/* ==========================================================
   SITE CARD SHELL — Chewtoy's Dugout v9.0.0
   Global app-shell card wrapping the entire site
   ==========================================================

   COMPONENT: Site Card Shell
   Owns:     outer frame, texture overlay, scroll body,
             border footer, view transitions, mobile shell breakpoint
   Does NOT own: header nav, page content, builder overrides,
                 background layers, body-level layout resets
   ========================================================== */

/* ── CARD SHELL ── */
.site-card-shell {
  max-width: 1200px;
  width: calc(100% - 64px);
  margin: 40px auto 16px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  position: relative;
  overflow: visible;
  background: linear-gradient(165deg, rgba(32, 38, 48, 0.98) 0%, rgba(22, 26, 34, 0.99) 100%);
  border: 3px solid var(--gold-700);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 6px 2px rgba(0, 0, 0, 0.4),
    0 2px 4px 4px rgba(18, 15, 23, 0.8),
    0 -1px 3px 4px rgba(60, 45, 70, 0.6),
    0 0 0 14px var(--purple-900),
    0 0 0 16px var(--gold-700),
    0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ── TEXTURE OVERLAY ── */
.site-card-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/card_background_1.png') center / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* ── CHILDREN ABOVE TEXTURE ── */
.site-card-shell > * {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* ── BORDER FOOTER (copyright/legal in purple band) ── */
.card-border-footer {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.55rem;
  color: var(--text-muted, rgba(200, 195, 185, 0.45));
  white-space: nowrap;
  z-index: 30;
  letter-spacing: 0.03em;
}

.card-border-footer a {
  color: var(--text-muted, rgba(200, 195, 185, 0.45));
  text-decoration: none;
  transition: color 0.15s ease;
}

.card-border-footer a:hover {
  color: var(--gold-500);
}

.card-border-footer__sep {
  opacity: 0.4;
}

/* ── CARD BODY ── */
.site-card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── CARD FOOTER ── */
.site-card-footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* ── VIEW TRANSITIONS ── */
@view-transition {
  navigation: auto;
}

.site-card-nav {
  view-transition-name: site-card-nav;
}

.site-card-body {
  view-transition-name: site-card-body;
}

/* Nav stays persistent - no animation */
::view-transition-old(site-card-nav),
::view-transition-new(site-card-nav) {
  animation: none;
  mix-blend-mode: normal;
}

/* Content fades and slides */
::view-transition-old(site-card-body) {
  animation: 200ms ease-out card-body-out;
}

::view-transition-new(site-card-body) {
  animation: 300ms ease-in card-body-in;
}

@keyframes card-body-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

@keyframes card-body-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SHELL NAVIGATION LOADING ── */
.site-card-body {
  transition: opacity 0.15s ease;
}

.site-card-body.shell-loading {
  opacity: 0.4;
  pointer-events: none;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .site-card-shell {
    width: 100%;
    margin: 0;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}