/* Nav component CSS — Desktop V1 + Mobile C2.3 Two-State */
/* Redesigned Animation System: Container ≠ Content animations */
:root {
  --nav-gold: #d4b06a;
  --nav-gold-light: #e8c87a;
  --nav-gold-dark: #c0a05a;
    /* --nav-text / --nav-text-muted / --nav-glass / --nav-glass-bottom / --nav-hairline
      are owned by styles/variables.css (dark :root values + [data-theme="light"] day values);
      usages below carry literal fallbacks so dark rendering is identical without it. */
   --nav-drawer-chip: rgba(6, 6, 13, 0.72);
   --nav-drawer-chip-text: #e4e4ec;
   --nav-gold-text: #e8c87a;

   /* ── OPEN/CLOSE ANIMATION LANGUAGE — "The Ascent" / "The Descent" ── */
  --nav-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot springs (handle/brand) */
  --nav-ease-out:    cubic-bezier(0.4, 0, 0.2, 1);      /* draw-in / settle */
  --nav-ease-drop:   cubic-bezier(0.55, 0, 0.85, 0.36); /* weighted fall (gravity) */
  --nav-t-open:      520ms;  /* full sheet ascent */
  --nav-t-close:     480ms;  /* weighted descent */
  --nav-t-ridge:     400ms;  /* gold ridge draw */
  --nav-t-catchup:   220ms;  /* content catch-up offset after sheet lands */
}

/* ─── NAV BARS ─── */
.nav{position:fixed;z-index:200;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
.nav--bottom{position:fixed;bottom:0;left:0;right:0;height:90px;background:var(--nav-glass-bottom, rgba(5, 5, 16, 0.92));border-top:1px solid rgba(212,176,106,0.2);padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav--top{top:0;left:0;right:0;height:80px;background:var(--nav-glass, rgba(6, 6, 13, 0.92));backdrop-filter:blur(10px);border-bottom:1px solid var(--nav-hairline, rgba(212, 176, 106, 0.15));padding:0 48px;display:none}
.nav__logo{display:flex;align-items:center;text-decoration:none}
.nav__logo-img{height:30px;width:auto;object-fit:contain}
.nav--top .nav__logo-img{height:25px}
/* Logo theme switching: dark bg → light logo, light bg → dark logo */
.nav__logo-img--light{display:block}
.nav__logo-img--dark{display:none}
html[data-theme="light"] .nav__logo-img--light{display:none!important}
html[data-theme="light"] .nav__logo-img--dark{display:block!important}
.nav__logo-text{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em}
.nav--bottom .nav__logo-text{color:var(--nav-text, #fff)}
.nav--top .nav__logo-text{color:var(--nav-text, #fff)}
.nav__logo-sub{font-size:9px;color:var(--nav-text-muted, rgba(255,255,255,0.4))}

/* Hamburger */
.hamburger{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index: 220}
.nav--bottom .hamburger{background:var(--nav-glass-bottom, rgba(5,5,16,0.9));border:1.5px solid rgba(212,176,106,0.4)}
.nav--top .hamburger{background:transparent;border:1.5px solid rgba(212,176,106,0.4)}
.hamburger__line{width:20px;height:2.5px;border-radius:2px;position:absolute;transition:all .3s cubic-bezier(0.68,-0.55,0.265,1.55)}
.hamburger__line{background:var(--nav-text, #fff)}
.hamburger__line:nth-child(1){transform:translateY(-8px)}
.hamburger__line:nth-child(2){transform:translateY(0)}
.hamburger__line:nth-child(3){transform:translateY(8px)}
.hamburger.active .hamburger__line:nth-child(1){transform:rotate(45deg)}
.hamburger.active .hamburger__line:nth-child(2){opacity:0}
.hamburger.active .hamburger__line:nth-child(3){transform:rotate(-45deg)}

/* Nav actions area — theme toggle sits next to the hamburger (both bars) */
.nav__actions{display:flex;align-items:center;gap:14px}

/* Theme toggle (day/night) — ghost-gold micro button */
.nav__theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;background:transparent;border:1px solid rgba(212,176,106,0.4);border-radius:2px;color:var(--nav-text,#ffffff);font-size:14px;line-height:1;cursor:pointer;transition:background .3s ease,border-color .3s ease,color .3s ease}
.nav__theme-toggle:hover{background:rgba(212,176,106,0.15);border-color:#d4b06a}

/* Overlay */
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);pointer-events:none;transition:background .4s;z-index:150}
.overlay.active{background:rgba(0,0,0,0.6);pointer-events:auto}

/* ─── DRAWER BASE ─── */
.drawer{position:fixed;left:0;right:0;background:var(--color-bg-glass, #06060d);overflow:hidden;z-index:180}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION SYSTEM — Premium Mobile Drawer
   ═══════════════════════════════════════════════════════════════
   
   DESIGN PHILOSOPHY:
   The drawer has TWO distinct animation layers:
   
   LAYER 1 — CONTAINER (the sheet itself)
     - Opening: The sheet arrives from below. Spring bounce. 
       This is the "hello, I'm here" moment.
     - Closing: The sheet departs downward. Smooth deceleration.
       This is the "goodbye" moment.
   
   LAYER 2 — CONTENT (what's inside the sheet)
     - Drill-Down: Content slides LEFT. Like pushing a card deck 
       deeper. Old content exits left, new content enters from right.
     - Drill-Up (Back): Content slides RIGHT. Like pulling a card 
       back. Old content exits right, new content enters from left.
     - Pill Switch: Crossfade with subtle scale. Like swapping 
       cards in a fan. Old fades out + shrinks slightly, new fades 
       in + grows slightly.
     - Staggered Reveal: Items cascade in from below with tiny 
       delays. Like a chorus line starting from the top.
   
   CRITICAL RULE: Container animation NEVER plays during content 
   changes. Only on open/close.
   
   TIMING OVERVIEW:
   ┌─────────────────┬──────────┬──────────────────────────────┐
   │ Animation       │ Duration │ Easing                       │
   ├─────────────────┼──────────┼──────────────────────────────┤
   │ Container Open  │ 520ms    │ ascent (spring keyframes + thud) │
   │ Container Close │ 480ms    │ descent (weighted drop, ease-in)  │
   │ Gold Ridge Draw │ 400ms    │ ease-out, delayed 60ms            │
   │ Brand Land ⛰️    │ 480ms    │ spring, delayed 140ms             │
   │ Content Catch-up│ 220ms    │ stagger + 220ms offset            │
   │ Drill-Down      │ 350ms    │ ease-out (0.4, 0, 0.2, 1)   │
   │ Drill-Up        │ 350ms    │ ease-out (0.4, 0, 0.2, 1)   │
   │ Pill Switch     │ 300ms    │ ease-out (0.4, 0, 0.2, 1)   │
   │ Stagger Reveal  │ 250ms    │ ease-out (0.4, 0, 0.2, 1)   │
   └─────────────────┴──────────┴──────────────────────────────┘
   ═══════════════════════════════════════════════════════════════ */

/* ─── CONTAINER ANIMATIONS (Layer 1 — The Sheet) ─── */

/* ═══════════════════════════════════════════════════════════
   LAYER 1 — CONTAINER OPEN/CLOSE (premium)
   ═══════════════════════════════════════════════════════════
   OPEN  = "The Ascent" ⛰️
     The sheet does not just slide up — it RISES like a summit
     appearing above the fog. Multi-stage keyframes overshoot,
     settle, then land with a tiny 'thud' (the final 1% dip).
     While the sheet climbs:
       · the gold summit ridge draws itself across the top edge
       · the handle wipes into place at the sheet's crest
       · the ⛰️ mountain icon rises and PLANTS itself with a bounce
       · the WIZARDSKI letters spread apart as they fade in
       · content items CATCH UP (+220ms) after the sheet lands
   CLOSE = "The Descent"
     A tiny anticipation lift, then gravity takes over: the sheet
     accelerates off-screen with a WEIGHTED feel. Content settles
     (dims + sinks) just before the drop; the ridge retracts from
     the right; the mountain dips and the handle slips away.
   ═══════════════════════════════════════════════════════════ */

/* OPEN — the ascent. 520ms. Easing: smooth fast-out, bounces come
   from the keyframe stages themselves (no per-keyframe easing). */
@keyframes drawer-open {
  0%   { transform: translateY(100%); opacity: 0; }
  38%  { transform: translateY(-2.4%); opacity: 1; }   /* eager rise — overshoots the top */
  60%  { transform: translateY(1.4%); }                /* bounce back down */
  76%  { transform: translateY(-0.7%); }               /* second, smaller overshoot */
  89%  { transform: translateY(0.3%); }                /* THUD — the sheet lands */
  100% { transform: translateY(0); opacity: 1; }
}

/* CLOSE — the weighted descent. 480ms. Easing: ease-in (gravity). */
@keyframes drawer-close {
  0%   { transform: translateY(0); opacity: 1; }
  16%  { transform: translateY(-1.2%); opacity: 1; }   /* anticipation — braces to drop */
  60%  { transform: translateY(34%); opacity: 1; }     /* accelerating fall */
  100% { transform: translateY(105%); opacity: 0; }
}

/* GOLD RIDGE DRAW — the summit ridge draws itself left→right */
@keyframes gold-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* GOLD RIDGE RETRACT — the ridge recedes as the sheet departs */
@keyframes gold-retract {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* HANDLE ARRIVE — the grip wipes into place at the sheet's crest */
@keyframes handle-arrive {
  0%   { opacity: 0; transform: translateY(-10px) scaleX(0.5); }
  55%  { opacity: 1; transform: translateY(2px) scaleX(1.06); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

/* BRAND LAND — the ⛰️ icon rises and plants itself */
@keyframes brand-land {
  0%   { opacity: 0; transform: translateY(18px) scale(0.7); }
  52%  { opacity: 1; transform: translateY(-4px) scale(1.14); }
  74%  { transform: translateY(2px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* BRAND LABEL IN — WIZARDSKI letters spread apart as they fade in */
@keyframes brand-label-in {
  0%   { opacity: 0; transform: translateY(10px); letter-spacing: 8px; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 3px; }
}

/* CONTENT SETTLE — the list sinks slightly and dims before the drop */
@keyframes content-settle {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.55; transform: translateY(7px) scale(0.985); }
}

/* BRAND DIP — the mountain sinks as the sheet falls away */
@keyframes brand-dip {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.3; transform: translateY(8px) scale(0.86); }
}

/* HANDLE EXIT — the grip slips downward and fades */
@keyframes handle-exit {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* ─── CONTENT NAVIGATION ANIMATIONS (Layer 2 — Inside the Sheet) ─── */

/* DRILL-DOWN: Old content slides out to the left */
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-30%);
    opacity: 0.3;
  }
}

/* DRILL-DOWN: New content slides in from the right */
@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* DRILL-UP (BACK): Old content slides out to the right */
@keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.3;
  }
}

/* DRILL-UP (BACK): New content slides in from the left */
@keyframes slide-in-left {
  0% {
    transform: translateX(-30%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* PILL SWITCH: Old content fades out with subtle shrink */
@keyframes pill-switch-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* PILL SWITCH: New content fades in with subtle grow */
@keyframes pill-switch-in {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* STAGGERED REVEAL: Items cascade from below */
@keyframes stagger-reveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── CSS CLASSES FOR ANIMATION HOOKS ─── */

/* Container States */
.drawer--mobile.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.drawer--mobile {
  bottom: 90px;
  border-top: 1px solid rgba(212,176,106,0.3);
  transform: translateY(100%);
  opacity: 0;
  /* No base transition — open/close run as KEYFRAME animations
     (.opening = ascent, .closing = descent). This is what makes the
     container animation feel hand-crafted instead of CSS-default. */
  pointer-events: none;
  max-height: 80vh;
  overflow-y: auto;
}

/* Gold summit ridge — sits on the top edge. scaleX(0) when hidden,
   scaleX(1) while open, draws in on open, retracts on close. */
.drawer--mobile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-gold-light) 20%, var(--nav-gold) 50%, var(--nav-gold-light) 80%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
}
.drawer--mobile.active::before {
  transform: scaleX(1);
}

/* ─── OPEN — "The Ascent" (hamburger / overlay / Escape trigger) ─── */
.drawer--mobile.opening {
  animation: drawer-open var(--nav-t-open) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}
.drawer--mobile.opening::before {
  animation: gold-draw var(--nav-t-ridge) var(--nav-ease-out) 60ms forwards;
}
.drawer--mobile.opening .drawer__handle {
  animation: handle-arrive 320ms var(--nav-ease-spring) 60ms forwards;
}
.drawer--mobile.opening .drawer__brand {
  animation: brand-land 480ms var(--nav-ease-spring) 140ms forwards;
}
.drawer--mobile.opening .drawer__brand-label {
  animation: brand-label-in 340ms var(--nav-ease-out) 200ms forwards;
}
/* Content CATCHES UP after the sheet lands: +220ms on top of stagger */
.drawer--mobile.opening .drawer__section,
.drawer--mobile.opening .drawer__sub {
  animation-delay: calc(var(--stagger, 0ms) + var(--nav-t-catchup));
}

/* ─── CLOSE — "The Descent" ─── */
.drawer--mobile.closing {
  animation: drawer-close var(--nav-t-close) var(--nav-ease-drop) forwards;
  pointer-events: none;
}
.drawer--mobile.closing::before {
  animation: gold-retract 260ms var(--nav-ease-drop) 40ms forwards;
  transform-origin: right center;
}
.drawer--mobile.closing .drawer__content {
  animation: content-settle 190ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.drawer--mobile.closing .drawer__brand {
  animation: brand-dip 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.drawer--mobile.closing .drawer__handle {
  animation: handle-exit 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Content Animation Classes */
.drawer__content {
  position: relative;
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Content transitions use animation, not transition */
}

/* Content exit states */
.drawer__content--exit-left {
  animation: slide-out-left 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}

.drawer__content--enter-right {
  animation: slide-in-right 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.drawer__content--exit-right {
  animation: slide-out-right 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}

.drawer__content--enter-left {
  animation: slide-in-left 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.drawer__content--pill-exit {
  animation: pill-switch-out 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}

.drawer__content--pill-enter {
  animation: pill-switch-in 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* ─── STAGGERED REVEAL for sheet items ─── */
/* --stagger is set INLINE per item by sheetContent() in nav.js (40ms cascade,
   capped at 200ms — site convention), so no nth-child calibration is needed. */
.drawer__section,
.drawer__sub {
  opacity: 0;
  animation: stagger-reveal 250ms cubic-bezier(0.4, 0.0, 0.2, 1) var(--stagger, 0ms) forwards;
}

/* ─── DRILL-DOWN CATEGORIES (scoped to drawer to avoid page CSS conflicts) ─── */
.drawer--mobile .drawer__cat {
  opacity: 0;
  animation: stagger-reveal 250ms cubic-bezier(0.4, 0.0, 0.2, 1) var(--stagger, 0ms) forwards;
  margin: 0 20px;
}
.drawer--mobile .drawer__cat-btn {
  width: 100% !important;
  background: rgba(212, 176, 106, 0.08);
  border: 1px solid rgba(212, 176, 106, 0.25);
  border-radius: 12px;
  color: var(--nav-text, #e4e4ec);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 24px;
  cursor: pointer;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  margin: 0 0 6px 0;
  box-sizing: border-box !important;
}
.drawer--mobile .drawer__cat-btn:hover,
.drawer--mobile .drawer__cat-btn.active {
  background: rgba(212, 176, 106, 0.15);
  border-color: rgba(212, 176, 106, 0.45);
}
.drawer--mobile .drawer__cat-arrow {
  font-size: 20px;
  transition: transform 0.3s ease;
  color: rgba(212, 176, 106, 0.7);
}
.drawer--mobile .drawer__cat-btn.active .drawer__cat-arrow {
  transform: rotate(90deg);
}
.drawer--mobile .drawer__cat-items {
  max-height: 0 !important;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
  padding: 0;
  margin: 0;
  box-sizing: border-box !important;
}
.drawer--mobile .drawer__cat-items.open {
  max-height: 400px !important;
  padding: 8px 0 4px;
}
.drawer--mobile .drawer__cat-items .drawer__sub {
  display: block;
  padding: 14px 24px;
  color: var(--nav-text-muted, rgba(255, 255, 255, 0.65));
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 8px;
  margin: 2px 8px;
  transition: background 0.2s, color 0.2s;
  opacity: 1;
  animation: none;
}
.drawer__cat-items .drawer__sub:hover {
  background: rgba(212, 176, 106, 0.08);
  color: var(--nav-text, #e4e4ec);
}

/* ─── DRAWER — DESKTOP V2 — Three Premium Variants ─── */
.drawer--desktop {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 900;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.drawer--desktop.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Gold ridge line — shared across all variants */
.drawer__ridge {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4b06a 20%, #e8c87a 50%, #d4b06a 80%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.5s ease 0.15s, opacity 0.4s ease 0.1s;
}

.drawer--desktop.active .drawer__ridge {
  opacity: 1;
  transform: scaleX(1);
}

/* Sub-item shared */
.drawer__sub-item {
  color: var(--nav-text-muted, rgba(255, 255, 255, 0.65));
  text-decoration: none;
  display: block;
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: 6px;
  position: relative;
}

.drawer__sub-item:hover {
  color: #d4b06a;
}

/* Language toggle shared */
.drawer__lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer__lang-item,
.drawer__lang-tab {
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--nav-text-muted, rgba(255, 255, 255, 0.4));
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 4px 0;
}

.drawer__lang-item:hover,
.drawer__lang-tab:hover {
  color: var(--nav-text, rgba(255, 255, 255, 0.7));
}

.drawer__lang-item.active,
.drawer__lang-tab.active {
  color: #d4b06a;
}

.drawer__lang-sep {
  color: var(--color-text-dim, rgba(255, 255, 255, 0.2));
  font-size: 11px;
  font-weight: 400;
  user-select: none;
}

/* ============================================================
   CONCEPT A — MEGA MENU (Stripe-style) — V2 Enhanced
   ============================================================ */

/* ─── KEYFRAME ANIMATIONS ─── */

/* Gold ridge draws in from left to right */
@keyframes mega-ridge-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Gold ridge retracts right to left on close */
@keyframes mega-ridge-retract {
  0%   { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* Column slides in from above with fade */
@keyframes mega-col-enter {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Column slides out upward with fade on close */
@keyframes mega-col-exit {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Individual item cascade in from below */
@keyframes mega-item-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Header underline sweep in */
@keyframes mega-underline-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ─── BASE MEGA MENU STYLES ─── */

.drawer--desktop.mega {
  background: var(--color-bg-glass, rgba(8, 8, 18, 0.97));
  border-bottom: 1px solid rgba(212, 176, 106, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── OPEN ANIMATION ─── */
.drawer--desktop.mega.active .drawer__ridge {
  animation: mega-ridge-draw 380ms cubic-bezier(0.4, 0, 0.2, 1) 30ms forwards;
  transform-origin: left center;
}

/* Columns stagger in left→right with 40ms each */
.drawer--desktop.mega.active .drawer__col {
  animation: mega-col-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.drawer--desktop.mega.active .drawer__col:nth-child(1) { animation-delay: 0.06s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) { animation-delay: 0.10s; }
.drawer--desktop.mega.active .drawer__col:nth-child(3) { animation-delay: 0.14s; }
.drawer--desktop.mega.active .drawer__col:nth-child(4) { animation-delay: 0.18s; }

/* Items cascade within each column — delayed further */
.drawer--desktop.mega.active .drawer__sub-item {
  animation: mega-item-enter 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(1) { animation-delay: 0.12s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(2) { animation-delay: 0.16s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(3) { animation-delay: 0.20s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(4) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(5) { animation-delay: 0.28s; }

.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(1) { animation-delay: 0.16s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(2) { animation-delay: 0.20s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(3) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(4) { animation-delay: 0.28s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(5) { animation-delay: 0.32s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(6) { animation-delay: 0.36s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(7) { animation-delay: 0.40s; }

.drawer--desktop.mega.active .drawer__col:nth-child(3) .drawer__sub-item:nth-child(1) { animation-delay: 0.20s; }
.drawer--desktop.mega.active .drawer__col:nth-child(3) .drawer__sub-item:nth-child(2) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(3) .drawer__sub-item:nth-child(3) { animation-delay: 0.28s; }

.drawer--desktop.mega.active .drawer__col:nth-child(4) .drawer__sub-item:nth-child(1) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(4) .drawer__sub-item:nth-child(2) { animation-delay: 0.28s; }
.drawer--desktop.mega.active .drawer__col:nth-child(4) .drawer__sub-item:nth-child(3) { animation-delay: 0.32s; }

/* ─── CLOSE ANIMATION ─── */
/* When closing, we remove .active — the base .drawer--desktop transition
   handles the slide-up fade-out. We enhance with a brief delay for items. */

/* ─── GRID LAYOUT ─── */
.drawer--desktop.mega .drawer__mega-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 32px 48px 28px;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ─── COLUMNS ─── */
.drawer--desktop.mega .drawer__col {
  position: relative;
}

/* Column divider lines (vertical separators between columns) */
.drawer--desktop.mega .drawer__col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 4px;
  right: -16px;
  bottom: 4px;
  width: 1px;
  background: rgba(212, 176, 106, 0.12);
}

/* ─── COLUMN HEADERS ─── */
.drawer--desktop.mega .drawer__col-header {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #d4b06a;
  padding: 0 0 10px;
  margin-bottom: 18px;
  position: relative;
  /* Gold underline bar */
  border-bottom: 1.5px solid rgba(212, 176, 106, 0.25);
  /* Subtle text shadow for readability */
  text-shadow: 0 1px 4px rgba(212, 176, 106, 0.15);
  transition: color 0.2s ease;
}

/* Hover: gold underline sweep */
.drawer--desktop.mega .drawer__col-header::after {
  content: '';
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d4b06a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(212, 176, 106, 0.3);
}

.drawer--desktop.mega .drawer__col-header:hover::after {
  transform: scaleX(1);
}

.drawer--desktop.mega .drawer__col-header:hover {
  color: #d4b06a;
}

/* ─── SUB-ITEMS ─── */
.drawer--desktop.mega .drawer__col-items {
  display: flex;
  flex-direction: column;
}

.drawer--desktop.mega .drawer__sub-item {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--nav-text-muted, rgba(255, 255, 255, 0.55));
  text-decoration: none;
  display: block;
  padding: 6px 0;
  line-height: 1.5;
  min-height: 28px;
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
  border-radius: 4px;
  position: relative;
}

/* First item in each column is gold */
.drawer--desktop.mega .drawer__sub-item--first {
  color: #d4b06a;
  font-weight: 500;
}

/* Hover: soft gold background on item rows */
.drawer--desktop.mega .drawer__sub-item:hover {
  color: #d4b06a;
  background: rgba(212, 176, 106, 0.07);
  padding-left: 6px;
}

/* ─── LANGUAGE TOGGLE (bottom of last column) ─── */
.drawer--desktop.mega .drawer__col-lang {
  margin-top: 20px;
  padding-top: 4px;
}

.drawer--desktop.mega .drawer__col-lang .drawer__lang-divider {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 176, 106, 0.2), rgba(212, 176, 106, 0.08) 80%, transparent);
  margin-bottom: 14px;
}

.drawer--desktop.mega .drawer__lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer--desktop.mega .drawer__lang-item {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--nav-text-muted, rgba(255, 255, 255, 0.4));
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 4px 0;
}

.drawer--desktop.mega .drawer__lang-item:hover {
  color: var(--nav-text, rgba(255, 255, 255, 0.7));
}

.drawer--desktop.mega .drawer__lang-item.active {
  color: #d4b06a;
}

.drawer--desktop.mega .drawer__lang-sep {
   color: var(--color-text-dim, rgba(255, 255, 255, 0.2));
    font-size: 11px;
    font-weight: 400;
    user-select: none;
}
/* ============================================================
   CONCEPT B — CENTERED GLASS CARD
   ============================================================ */

.drawer--desktop.glass {
  display: flex;
  justify-content: center;
  padding: 0 24px;
  background: transparent;
}

.drawer--desktop.glass .drawer__glass-panel {
  max-width: 720px;
  width: 100%;
  background: rgba(14, 14, 24, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(212, 176, 106, 0.15);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(212, 176, 106, 0.08);
  padding: 28px 32px 20px;
  transform: translateY(-4px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.drawer--desktop.glass.active .drawer__glass-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Ridge inside panel */
.drawer--desktop.glass .drawer__ridge {
  border-radius: 4px 4px 0 0;
  height: 2px;
  margin: -28px -32px 24px;
  background: linear-gradient(90deg, transparent, #d4b06a 15%, #e8c87a 50%, #d4b06a 85%, transparent);
}

/* 2×2 grid */
.drawer--desktop.glass .drawer__glass-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Individual card */
.drawer--desktop.glass .drawer__card {
  background: rgba(6, 6, 13, 0.5);
  border: 1px solid rgba(212, 176, 106, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.drawer--desktop.glass .drawer__card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 176, 106, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Card header — gold gradient strip */
.drawer--desktop.glass .drawer__card-header {
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #06060d;
  background: linear-gradient(135deg, #e8c87a, #d4b06a 50%, #c0a05a);
  padding: 10px 16px 8px;
  line-height: 1;
}

/* Card body — sub-items */
.drawer--desktop.glass .drawer__card-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer--desktop.glass .drawer__sub-item {
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.drawer--desktop.glass .drawer__sub-item::before {
  content: '▪';
  color: rgba(212, 176, 106, 0.3);
  margin-right: 10px;
  font-size: 8px;
  vertical-align: middle;
  transition: color 0.2s ease;
}

.drawer--desktop.glass .drawer__sub-item:hover {
  background: rgba(212, 176, 106, 0.08);
  border-color: rgba(212, 176, 106, 0.2);
  color: #d4b06a;
}

.drawer--desktop.glass .drawer__sub-item:hover::before {
  color: #d4b06a;
}

/* Lang below grid */
.drawer--desktop.glass .drawer__glass-lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.drawer--desktop.glass .drawer__lang-divider-short {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(212, 176, 106, 0.2);
  margin-bottom: 16px;
}

/* Stagger cards in */
.drawer--desktop.glass .drawer__card {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.drawer--desktop.glass.active .drawer__card {
  opacity: 1;
  transform: translateY(0);
}

.drawer--desktop.glass.active .drawer__card:nth-child(1) { transition-delay: 0.06s; }
.drawer--desktop.glass.active .drawer__card:nth-child(2) { transition-delay: 0.10s; }
.drawer--desktop.glass.active .drawer__card:nth-child(3) { transition-delay: 0.14s; }
.drawer--desktop.glass.active .drawer__card:nth-child(4) { transition-delay: 0.18s; }

/* Re-apply hover lift after stagger completes */
.drawer--desktop.glass.active .drawer__card:hover {
  transform: translateY(-2px);
}


/* ============================================================
   CONCEPT C — HORIZONTAL TABS (Linear-style)
   ============================================================ */

.drawer--desktop.tabs {
  background: rgba(6, 6, 13, 0.97);
  border-bottom: 1px solid rgba(212, 176, 106, 0.06);
}

.drawer--desktop.tabs .drawer__tabs-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Tab bar — top row */
.drawer--desktop.tabs .drawer__tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
}

.drawer--desktop.tabs .drawer__tabs-group {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  position: relative;
}

/* Individual tab button */
.drawer--desktop.tabs .drawer__tab {
  font-family: -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 12px;
  position: relative;
  transition: color 0.2s ease;
}

.drawer--desktop.tabs .drawer__tab:hover {
  color: rgba(255, 255, 255, 0.85);
}

.drawer--desktop.tabs .drawer__tab.active {
  color: #d4b06a;
  font-weight: 700;
}

/* Gold underline indicator */
.drawer--desktop.tabs .drawer__tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4b06a, #e8c87a, #d4b06a);
  border-radius: 1px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(212, 176, 106, 0.4);
}

/* Language tabs — right side */
.drawer--desktop.tabs .drawer__tab-lang {
  display: flex;
  gap: 12px;
}

.drawer--desktop.tabs .drawer__lang-tab {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}

.drawer--desktop.tabs .drawer__lang-tab:hover {
  background: rgba(212, 176, 106, 0.06);
}

.drawer--desktop.tabs .drawer__lang-tab.active {
  color: #d4b06a;
  background: rgba(212, 176, 106, 0.08);
}

/* Sub-items bar — bottom row */
.drawer--desktop.tabs .drawer__sub-bar {
  border-top: 1px solid rgba(212, 176, 106, 0.08);
  padding: 16px 0 14px;
  position: relative;
  min-height: 48px;
}

.drawer--desktop.tabs .drawer__sub-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0;
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.drawer--desktop.tabs .drawer__sub-group.visible {
  opacity: 1;
  position: relative;
  top: auto;
  pointer-events: auto;
}

/* Sub-item in tabs mode */
.drawer--desktop.tabs .drawer__sub-item {
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  display: inline;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.drawer--desktop.tabs .drawer__sub-item:hover {
  background: rgba(212, 176, 106, 0.08);
}

/* Dot divider between sub-items */
.drawer--desktop.tabs .drawer__sub-dot {
  color: rgba(212, 176, 106, 0.3);
  font-size: 16px;
  user-select: none;
  line-height: 1;
}


/* ─── MOBILE C2.3 COMPONENT STYLES ─── */
@media (max-width: 599px) {
  .nav--bottom {
    display: flex;
    height: 82px;
    padding: 0 22px;
    z-index: 1000;
  }
  .nav--top { display: none !important; }
  .drawer--desktop { display: none !important; }
  /* Bottom-anchored sheet — "The Ascent / The Descent" (variant-review pick,
     demo geometry): rises flush from the 82px bottom bar, max-height 78vh,
     scrollable; the dimmed page above the sheet stays tappable (backdrop
     close). The bar stays on top (z-index 1000) so the hamburger is reachable. */
  .drawer--mobile {
    display: block;
    top: auto;
    bottom: 82px;
    z-index: 999;
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg-glass, #0e0e18);
    border-top: 1px solid rgba(212,176,106,.55);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 44px rgba(0,0,0,.42);
  }
  /* Close X — sticky so it stays reachable while the sheet scrolls.
     44px tap floor per the picked design. */
  .drawer__close {
    position: sticky;
    top: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 8px 0 0 auto;
    border: 1px solid rgba(212,176,106,0.4);
    border-radius: 50%;
    background: var(--glass-cta, rgba(10,10,46,0.5));
    color: var(--nav-text, #fff);
    font: 300 22px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    cursor: pointer;
  }
  .drawer__close:hover { background: rgba(212,176,106,0.15); border-color: #d4b06a; }
  .drawer__handle {
    width: 42px;
    height: 4px;
    margin: 4px auto 2px;
    border-radius: 99px;
    background: rgba(232,200,122,.72);
  }
  .drawer__content {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  .drawer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 38px;
    margin: 0 auto 2px;
    font-size: 25px;
  }
  .drawer__brand-label {
    margin: 0 auto 16px;
    color: var(--nav-gold-text, #e8c87a);
    font: 700 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    letter-spacing: 4px;
    text-align: center;
  }
  /* Section labels — gold, letterspaced (desktop mega-menu col-header DNA).
     Not interactive: the links below them are the tap targets. */
  .drawer__section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    min-height: 44px;
    box-sizing: border-box;
    margin: 14px auto 6px;
    color: var(--nav-gold-text, #e8c87a);
    font: 700 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
  }
  .drawer__sub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    min-height: 44px;
    box-sizing: border-box;
    margin: 6px auto;
    padding: 9px 14px;
    border: 1px solid rgba(212,176,106,.34);
    border-radius: 10px;
    background: var(--nav-drawer-chip, rgba(6,6,13,0.72));
    color: var(--nav-drawer-chip-text, #e4e4ec);
    font: 500 13px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    text-align: center;
    text-decoration: none;
  }
  .drawer__sub:hover, .drawer__sub:focus-visible { opacity: 0.9;
    color: #d4b06a;
    border-color: #d4b06a;
    background: rgba(212,176,106,.1);
  }
  /* Meta row (theme / lang) — 44px tap floors, scoped to the sheet so the
     nav-bar toggles (desktop pixel-unchanged) keep their ghost size. */
  .drawer--mobile .nav__theme-toggle { min-width: 44px; height: 44px; }
  .drawer__toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .drawer__divider {
    width: min(100%, 360px);
    height: 1px;
    margin: 14px auto 11px;
    background: rgba(212,176,106,.2);
  }
  .drawer__meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .drawer__toggle {
    color: var(--nav-text-muted, rgba(228,228,236,0.58));
    font: 600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    letter-spacing: 2px;
    text-align: center;
  }
  .drawer__toggle--active { color: #d4b06a; }
}

/* ─── DESKTOP RESPONSIVE ─── */
@media (min-width: 600px) {
  .nav--bottom { display: none; }
  .nav--top { display: flex; }
  .drawer--mobile { display: none !important; }
}

[data-theme="light"] {
  --nav-drawer-chip: rgba(255, 255, 255, 0.72);
  --nav-drawer-chip-text: #2c2416;
  --nav-gold-text: #c0a05a;
}

/* QoL 2026-08: reduced motion + balance + stable scrollbar */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
h1, h2, h3 { text-wrap: balance; }
html { scrollbar-gutter: stable; }