/**
 * Landing header scroll choreography (MIKO spec 2026-07-19).
 *
 * Theme-owned overrides on the bespoke #vz-header that lives ONLY in front-page.html.
 * Composes with Fabao's gfx header sheet (assets/css/gfx/13-journey-world.css) and the
 * headerEntrance HUD module (assets/js/gfx/hero-field/hud/headerEntrance.js) — both
 * READ-ONLY for the theme engineer. This sheet overrides from higher specificity
 * (html-prefixed / #vz-header chains); it never edits the gfx files.
 *
 * State machine — class `vz-past-hero` on #vz-header, toggled by 10-header-scroll.js via
 * an IntersectionObserver on the hero .vz-ride-hero. Works on BOTH the world ride and the
 * static fallback (both scroll the same document):
 *
 *   STATE 1  (default, at the top over the hero):
 *     - brand (vmark) HIDDEN
 *     - the four nav links pack into ONE centred block
 *
 *   STATE 2  (.vz-past-hero, scrolled past the hero):
 *     - brand appears centre (additionally gated by the entrance `.brand.in` on the world
 *       path — the two compose: entrance owns the y-reveal, this owns the scroll gate)
 *     - navs return to the flanking split grid (gfx sheet's `1fr auto 1fr`)
 *
 * Transition = transform + opacity + width, short and tasteful. prefers-reduced-motion
 * switches instantly. Nav size bump applies in BOTH states, desktop + mobile.
 */

/* ── Nav size bump (MIKO: 11px too small + QA touch-target FAIL at 18px vs 44px). Both
   states, both breakpoints. html prefix beats the gfx `#vz-header .nav a` on the tie. ── */
html #vz-header .nav a {
  /* 44px hit area must not depend on the gfx sheet's `.nav{display:flex}` blockifying anchors. */
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  padding: 15px 4px; /* 14px face + 30px = 44px min hit area */
}

/* Animate the moving parts. Off `all` so it never fights the entrance opacity fade.
   `width` animates the brand-column collapse so the split opens/closes smoothly. */
#vz-header .nav-left,
#vz-header .nav-right,
#vz-header .brand {
  transition:
    transform .46s cubic-bezier(.22, .9, .32, 1),
    width .46s cubic-bezier(.22, .9, .32, 1),
    opacity .45s ease;
  will-change: transform;
}

/* Brand appear timing (MIKO 2026-09-23, smoothed): the 280ms rise still read clunky. Now
   a slower, gentler glide — 460ms opacity+transform on the theme's ease-out curve
   cubic-bezier(.22,.9,.32,1) — with slightly more travel (11px, set on the hidden state
   below) so the mark drifts up into place instead of snapping. `width` is SYNCED to the
   same 460ms so the brand column's collapse/open finishes in step with the nav split
   (the shared block below still drives nav-left/right width; matched durations keep the
   two halves gliding together, no mid-motion snap). html prefix (0,1,2) beats the gfx
   `#vz-header .brand` (0,1,1) transition on source order. */
html #vz-header .brand {
  transition:
    transform .46s cubic-bezier(.22, .9, .32, 1),
    width .46s cubic-bezier(.22, .9, .32, 1),
    opacity .46s cubic-bezier(.22, .9, .32, 1);
}

/* ── STATE 1 — brand hidden (both breakpoints) ──
   Beats the gfx sheet's `html:not(.vz-world-on) #vz-header .brand` (0,1,2,1), which forces
   the brand visible on the fallback path unconditionally and loads AFTER this sheet (a plain
   tie would lose on source order). The extra `:not([hidden])` attribute selector lifts this
   to 0,1,3,1 — a strict, honest win, no !important. State 1 hides the brand on BOTH paths.
   Hidden state uses a small downward translate (MIKO 2026-09-23 smooth-appear): the mark
   rises INTO place on scroll instead of scaling up. Matching the axis of the gfx entrance
   (`translateY(10px)`) keeps the interpolation on one property — a scale↔none mix was the
   "pop" MIKO flagged. Column width still collapses on desktop (below), so no layout shift. */
html:not([hidden]) #vz-header:not(.vz-past-hero) .brand {
  opacity: 0;
  transform: translateY(11px); /* MIKO 2026-09-23: +3px travel reads smoother on the slow rise */
  pointer-events: none;
}

/* STATE 2 — brand visible, navs back to the split. Static-fallback path owns the opacity
   (no entrance runs); on the world path the entrance's `.brand.in` drives opacity and this
   composes with it. */
#vz-header.vz-past-hero .brand {
  transform: none;
  pointer-events: auto;
}
html:not(.vz-world-on) #vz-header.vz-past-hero .brand { opacity: 1; }

/* ── Desktop >=782px: the one-block <-> split grid choreography ──
   The gfx sheet lays #vz-header `grid-template-columns:1fr auto 1fr` with a wide column-gap
   — nav-left (flex-end) | brand | nav-right (flex-start), split to the far sides. That IS
   state 2. For state 1 we collapse the centre (brand) column to 0, centre the track, and
   shrink the gap so the four links read as one evenly spaced block. */
@media (min-width: 782px) {
  /* column-gap sits on BOTH sides of the collapsed centre column, so the seam between the
     two nav groups is 2x this value — half the nav's own inter-link gap (clamp(18px,3vw,
     44px)) makes the four links evenly spaced. */
  #vz-header:not(.vz-past-hero) {
    grid-template-columns: auto 0 auto;
    column-gap: clamp(9px, 1.5vw, 22px);
    justify-content: center;
  }
  #vz-header:not(.vz-past-hero) .brand {
    width: 0;
    overflow: hidden;
  }
  /* Small inward slide for the transition (resolves to none in state 2). */
  #vz-header:not(.vz-past-hero) .nav-left { transform: translateX(-6px); }
  #vz-header:not(.vz-past-hero) .nav-right { transform: translateX(6px); }
  #vz-header.vz-past-hero .nav-left,
  #vz-header.vz-past-hero .nav-right { transform: none; }
}

/* ── Mobile <=781px (MIKO judgment-call variant) ──
   Fabao stacks the header single-column (brand order:-1 on top, nav row beneath). The
   lateral one-block->split does not fit ~390px, so the SIMPLE sane variant: the four links
   stay a single centred row in BOTH states; only the logo fades in on scroll. The logo's
   stacked row collapses to 0 height in state 1 so the nav sits at the top. Flagged for
   MIKO's eyeball. */
@media (max-width: 781px) {
  html #vz-header .nav a {
    font-size: 13px;
    padding: 16px 4px; /* 13px face + 32px = 45px hit area, clears the 44px minimum */
  }
  html:not([hidden]) #vz-header:not(.vz-past-hero) .brand {
    height: 0;
    overflow: hidden;
  }
  #vz-header.vz-past-hero .brand { height: auto; }
}

/* ── Reduced motion: instant switch, no animation (both breakpoints). ── */
@media (prefers-reduced-motion: reduce) {
  #vz-header .nav-left,
  #vz-header .nav-right,
  #vz-header .brand { transition: none; }
}

/* ══ MIKO header polish 2026-07-19 ══ */

/* Hairline symmetry (desktop only). Gfx `.light-line` fixes top:153px — asymmetric around
   the nav tabs (37.5px above the tabs vs 71.5px below to the line). Symmetric: nav bottom
   81.5px + 37.5px = 119px. `html .light-line` (0,1,1) beats the gfx bare `.light-line`
   (0,1,0). Scoped >=782px so the gfx mobile value (top:118px at <=781px) stays untouched —
   an unscoped override would silently win inside that media query too. */
@media (min-width: 782px) {
  html .light-line { top: 119px; }
}

/* Social icons: size + spacing (MIKO 2026-09-23). Gfx sizes the anchors 16px
   (`#vz-header .vz-social a`, 0,1,2) and the svgs at 100% of them — so the anchor is the
   sizing source; the svg follows. html prefix lifts this to 0,1,3, a strict win.
   Size: the shipped value was 32px; MIKO asked for +20% → 38px (32 × 1.2, rounded). */
html #vz-header .vz-social a {
  width: 38px;
  height: 38px;
}

/* Spacing (MIKO 2026-09-23, revised): keep the ORIGINAL corner spread — one icon left,
   one right — which the gfx sheet's `inset-inline` + `justify-content:space-between`
   strip does natively. (The earlier same-day flex-end cluster override is REMOVED — it
   floated both icons to the right, which MIKO rejected.) The only change: pull each icon
   ~10% closer to centre by widening the strip's side inset (the gfx value is
   `clamp(14px, 2.5vw, 30px)`; raising the vw term moves both ends inward while they stay
   corner-anchored). html prefix (0,1,2) beats the gfx `#vz-header .vz-social` (0,1,1) on
   source order. Mobile (<=781px) hides .vz-social entirely, so this is desktop-only. */
html #vz-header .vz-social {
  inset-inline: clamp(16px, 5.5vw, 90px);
}

/* ══ Hairline single sweep (MIKO 2026-09-23) ══ */

/* The gfx `vz-line-pulse` keyframe sweeps the pulse scaleX 0→1→0 — it expands to full
   width THEN retracts to nothing (round trip). MIKO: too much motion, make it one motion.
   Override the activation to a new keyframe that expands ONCE from the left edge to full
   width and holds, then the .pulse fades so the dormant hairline reads underneath — no
   return trip. Same 2.4s duration + easing family as the original so it keeps the theme's
   motion language. `transform-origin` moves to the left edge for a single directional
   sweep. html prefix (0,1,2,1) beats the gfx `.light-line.activate .pulse` (0,1,1,1). */
html .light-line.activate .pulse {
  transform-origin: 0 50%;
  animation: vz-line-sweep 2.4s cubic-bezier(.45, 0, .25, 1) forwards;
}
@keyframes vz-line-sweep {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Reduced motion: no sweep at all (mirrors the gfx `.light-line .pulse{animation:none}`
   guard, which our higher-specificity rule above would otherwise re-enable). */
@media (prefers-reduced-motion: reduce) {
  html .light-line.activate .pulse { animation: none; }
}

/* ══ Glass bar (Fabão ruling 2026-08-11) ══ */

/* Once content can pass behind the bar — state 2, .vz-past-hero — the header becomes a
   glassy blur: what scrolls under it stops being legible, giving the separation a hard
   fill would give without killing the surface below. State 1 (over the hero, nothing
   passes behind) stays clean glass-less, and the flip fades with the state transition.
   `html #vz-header` (0,1,1) beats the gfx sheet's `#vz-header{background:transparent}`
   (0,1,0) — same override law as the rest of this sheet; the gfx file stays untouched.
   The blur samples everything painted behind the fixed bar, GL canvas included. */
html #vz-header {
  transition: background-color .35s ease;
}
html #vz-header.vz-past-hero {
  background: rgba(9, 7, 20, 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}