/* ============================================================
   Ludumina Labs — HERO.  Owned by the hero builder.
   Every rule is scoped under [data-section="hero"].
   ============================================================ */

[data-section="hero"] {
  /* frame geometry — one source of truth for the HUD */
  --fx: var(--gut);          /* frame inset, left/right          */
  --fy: 104px;               /* top rail, from viewport top      */
  --fb: 40px;                /* bottom rail, from viewport bottom*/
  --step: 22px;              /* how far the top rail steps down  */

  /* ── the capture treatment, in one place ──────────────────────
     The source is a 480p phone capture upscaled; a rendered cinematic will
     always out-resolve it. So the grade stops competing on fidelity: pull
     brightness and saturation down, push contrast up, and let the duotone
     and the halftone screen above carry the look. Each shot multiplies
     these by its own --sb / --sc / --ss so the four worlds stay apart. */
  --gb: 1.18;                /* base brightness                  */
  --gc: 1.50;                /* base contrast                    */
  --gs: 1.12;                /* base saturation                  */
  --gd: 0.06;                /* duotone floor                    */
  --gn: 0.50;                /* halftone screen strength         */
  --gp: 5px;                 /* halftone pitch                   */

  /* motion inputs, written by js/hero.js */
  --p: 0;                    /* 0 → 1 as the hero scrolls away   */
  --mx: 0;                   /* pointer x, -1 → 1                */
  --my: 0;                   /* pointer y, -1 → 1                */

  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* ── media ─────────────────────────────────────────────────── */

[data-section="hero"] .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform:
    translate3d(calc(var(--mx) * 16px), calc(var(--p) * 64px + var(--my) * 11px), 0)
    scale(calc(1.06 + var(--p) * 0.12));
  opacity: calc(1 - var(--p) * 0.55);
  will-change: transform;
}

/* The plate under the montage is the first shot's own opening frame, so the
   hand-off from poster to playback has nothing to flash. */
[data-section="hero"] .hero__still {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../assets/img/w_arena_wide.jpg) 50% 42% / cover no-repeat;
  filter: brightness(1.18) contrast(1.50) saturate(1.30) blur(1.1px);
}

/* One <video> per world, stacked.
   The cut is a WIPE, not a cross-dissolve. Two 480p captures dissolving
   through each other average into something softer than either, and a
   visitor who lands mid-transition sees mush — which is exactly the frame
   that loses a side-by-side. A clip-path wipe means every pixel, at every
   instant, is 100% one shot: the transition can never be softer than the
   footage. The outgoing shot holds full opacity underneath (.is-prev) until
   the wipe has covered it, so the boundary never opens onto the plate. */
[data-section="hero"] .hero__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Most shots set object-position inline. Shot 02 sets --ox / --oy instead,
     because its framing has to change at the narrow breakpoint — an inline
     object-position would be unoverridable from here. */
  object-position: var(--ox, 50%) var(--oy, 42%);
  opacity: 0;
  z-index: 1;
  /* right inset shrinks 100% → 0, so the visible region grows from the left
     edge rightward and the boundary travels the same direction as the sweep */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.26s cubic-bezier(0.22, 0.9, 0.24, 1);
  /* base grade from the hero root; --sb / --sc / --ss are per-shot
     multipliers around 1, not absolute values */
  filter:
    brightness(calc(var(--gb) * var(--sb, 1)))
    contrast(calc(var(--gc) * var(--sc, 1)))
    saturate(calc(var(--gs) * var(--ss, 1)))
    blur(1.1px);
}
[data-section="hero"] .hero__shot.is-on {
  opacity: 1;
  z-index: 3;
  clip-path: inset(0 0 0 0);
}
/* the shot being wiped away — full frame, no transition, one layer down */
[data-section="hero"] .hero__shot.is-prev {
  opacity: 1;
  z-index: 2;
  clip-path: inset(0 0 0 0);
  transition: none;
}

/* Hue grade — a nudge toward the palette, deliberately light.
   A full duotone was tried and rejected: pushed hard enough to read as a
   treatment it flattens the gold cella and the magenta cytosol into the same
   grey-teal, and a montage whose four worlds look identical has no reason to
   be a montage. The treatment is carried by the halftone screen below
   instead, which costs no colour. Each shot keeps its own --tone offset. */
[data-section="hero"] .hero__tone {
  position: absolute;
  inset: 0;
  background: linear-gradient(148deg, #0B3A4A 0%, #123048 46%, #221545 100%);
  z-index: 4;
  mix-blend-mode: color;
  opacity: calc(var(--gd) + var(--tone, 0.1));
  transition: opacity 0.26s var(--ease);
}

/* colour grade + vertical falloff into the page */
[data-section="hero"] .hero__grade {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(180deg,
      rgba(5, 6, 15, 0.92) 0%,
      rgba(5, 6, 15, 0.44) 18%,
      rgba(5, 6, 15, 0.24) 46%,
      rgba(5, 6, 15, 0.46) 64%,
      rgba(5, 6, 15, 0.84) 80%,
      var(--bg) 99%);
}

/* dark ellipse behind the lockup so white type always holds */
[data-section="hero"] .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    radial-gradient(78% 56% at 50% 50%, rgba(5, 6, 15, 0.32) 0%, rgba(5, 6, 15, 0) 80%),
    /* the outer frame is pushed to near-black so the capture reads as a
       lit core rather than an edge-to-edge field of texture. The bar's hero
       wins partly on negative space; this is where ours comes from. */
    radial-gradient(126% 88% at 50% 44%, rgba(5, 6, 15, 0) 40%, rgba(5, 6, 15, 0.66) 80%, rgba(5, 6, 15, 0.97) 100%);
}

/* luminous tint pulled from the footage itself */
[data-section="hero"] .hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    radial-gradient(48% 40% at 62% 58%, rgba(63, 224, 208, 0.14), transparent 72%),
    radial-gradient(42% 38% at 34% 34%, rgba(123, 92, 255, 0.12), transparent 74%);
  mix-blend-mode: screen;
}

/* THE SCREEN. A 3px dot matrix over a 3px scanline — a halftone, not a
   texture. It is the layer that decides the argument: at this pitch the
   capture's own softness is smaller than the screen structure laid over it,
   so the eye reads the structure first and files the whole frame as a
   processed feed. Which is honest — it IS a live capture off the engine. */
[data-section="hero"] .hero__scan {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: var(--gn);
  background:
    /* the dot matrix, and a specular pip inside each cell so the grid reads
       as a physical screen rather than a flat stipple */
    radial-gradient(circle at 38% 34%,
      rgba(255, 255, 255, 0.20) 0 14%,
      rgba(255, 255, 255, 0) 15%) 0 0 / var(--gp) var(--gp),
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0) 0 30%,
      rgba(3, 5, 12, 0.62) 62%) 0 0 / var(--gp) var(--gp),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      rgba(3, 5, 12, 0.34) 1px var(--gp));
}

/* The wipe's leading edge. A full-width bar translated so its right edge
   tracks the clip boundary exactly; without it a hard wipe reads as a
   rendering fault rather than a cut. */
[data-section="hero"] .hero__sweep {
  position: absolute;
  inset: 0;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(63, 224, 208, 0) 0%,
    rgba(63, 224, 208, 0) 97.4%,
    rgba(63, 224, 208, 0.22) 99.0%,
    rgba(150, 255, 244, 0.62) 99.8%,
    rgba(226, 255, 252, 0.85) 100%);
  mix-blend-mode: screen;
  will-change: transform;
}
[data-section="hero"] .hero__sweep.is-go {
  animation: heroSweep 0.26s cubic-bezier(0.22, 0.9, 0.24, 1);
}
@keyframes heroSweep {
  from { opacity: 1; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── HUD chrome ────────────────────────────────────────────── */

[data-section="hero"] .hero__hud,
[data-section="hero"] .hero__tag {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--p) * 28px), 0);
  opacity: calc(1 - var(--p) * 1.35);
  will-change: transform;
}
[data-section="hero"] .hero__tag { inset: auto; }

[data-section="hero"] .hero__g {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(63, 224, 208, 0.32));
}
[data-section="hero"] .hero__g .ln {
  stroke: var(--cy);
  stroke-opacity: 0.52;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
[data-section="hero"] .hero__g .ln--dim { stroke-opacity: 0.26; }
[data-section="hero"] .hero__g .ln--hot { stroke-opacity: 0.95; }
[data-section="hero"] .hero__g .fl { fill: var(--cy); fill-opacity: 0.85; }

[data-section="hero"] .hero__ln {
  position: absolute;
  height: 1px;
  background: rgba(63, 224, 208, 0.42);
  box-shadow: 0 0 7px rgba(63, 224, 208, 0.28);
}

/* top-left corner + left run of the top rail */
[data-section="hero"] .hero__g--tl { left: var(--fx); top: var(--fy); }
[data-section="hero"] .hero__ln--t1 {
  left: calc(var(--fx) + 100px);
  right: 60%;
  top: var(--fy);
  background: linear-gradient(90deg, rgba(63, 224, 208, 0.5), rgba(63, 224, 208, 0.24));
}

/* centre step-down */
[data-section="hero"] .hero__g--step { left: 40%; top: var(--fy); }

/* right run, one step lower */
[data-section="hero"] .hero__ln--t2 {
  left: calc(40% + 230px);
  right: calc(var(--fx) + 130px);
  top: calc(var(--fy) + var(--step));
  background: linear-gradient(90deg, rgba(63, 224, 208, 0.24), rgba(63, 224, 208, 0.5));
}
[data-section="hero"] .hero__g--tr { right: var(--fx); top: calc(var(--fy) + var(--step)); }

/* bottom rail */
[data-section="hero"] .hero__g--bl { left: var(--fx); bottom: var(--fb); }
[data-section="hero"] .hero__g--br { right: var(--fx); bottom: var(--fb); }
[data-section="hero"] .hero__ln--b {
  left: calc(var(--fx) + 94px);
  right: calc(var(--fx) + 116px);
  bottom: var(--fb);
  background: linear-gradient(90deg,
    rgba(63, 224, 208, 0.4), rgba(63, 224, 208, 0.14) 46%, rgba(63, 224, 208, 0.4));
}

/* provenance tag, under the top-left corner — tracks the current shot */
[data-section="hero"] .hero__tag {
  position: absolute;
  left: calc(var(--fx) + 22px);
  top: calc(var(--fy) + 90px);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--ink-40);
}
[data-section="hero"] .hero__tag-b {
  display: block;
  color: rgba(63, 224, 208, 0.62);
  transition: opacity 0.4s var(--ease);
}
[data-section="hero"] .hero__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.7em;
  vertical-align: 1px;
  background: var(--cy);
  box-shadow: 0 0 8px var(--cy);
  animation: hero-pulse 2.6s var(--ease) infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.18; }
}

/* rotated left caption */
[data-section="hero"] .hero__vlabel {
  position: absolute;
  left: calc(var(--fx) + 3px);
  bottom: calc(var(--fb) + 74px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

/* instrument stack, right side */
[data-section="hero"] .hero__meters {
  position: absolute;
  right: calc(var(--fx) + 24px);
  bottom: calc(var(--fb) + 26px);
  width: 200px;
  text-align: right;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-section="hero"] .hero__meter {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  line-height: 2.1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
[data-section="hero"] .hero__meter .k { color: rgba(255, 255, 255, 0.32); }
[data-section="hero"] .hero__meter .v {
  color: rgba(63, 224, 208, 0.82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-section="hero"] .hero__meter .v b {
  font-weight: 600;
  transition: opacity 0.4s var(--ease);
}

/* four segments — one per world. The montage gets its own scrub bar. */
[data-section="hero"] .hero__rail {
  display: flex;
  gap: 4px;
  margin: 9px 0 10px;
}
[data-section="hero"] .hero__rail i {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}
[data-section="hero"] .hero__rail i b {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cy);
  box-shadow: 0 0 8px rgba(63, 224, 208, 0.7);
}

/* ── content ───────────────────────────────────────────────── */

[data-section="hero"] .hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--fy) + 20px) var(--gut) calc(var(--fb) + 74px);
  text-align: center;
  transform:
    translate3d(calc(var(--mx) * -7px), calc(var(--p) * -76px + var(--my) * -5px), 0)
    scale(calc(1 - var(--p) * 0.07));
  opacity: calc(1 - var(--p) * 1.45);
  will-change: transform;
}

[data-section="hero"] .hero__inner {
  width: 100%;
  max-width: var(--maxw);
}

[data-section="hero"] .hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: clamp(0.9rem, 1.9vw, 1.6rem);
}
[data-section="hero"] .hero__sep {
  margin: 0 0.6em;
  color: var(--cy);
}
[data-section="hero"] .hero__rule {
  width: clamp(24px, 6vw, 74px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 224, 208, 0.55));
}
[data-section="hero"] .hero__rule:last-child {
  background: linear-gradient(90deg, rgba(63, 224, 208, 0.55), transparent);
}

/* ── the wordmark ──────────────────────────────────────────────
   Michroma only ships at 400, and at hero scale a 400 weight reads
   elegant where the bar's Microgramma Bold Extended reads massive.
   Saira is a variable face with BOTH axes, so the lockup is set in
   genuine bold-extended — wght 830 / wdth 125 — with a hairline
   same-colour stroke to close the last of the gap. The rest of the
   type system stays on Michroma.
   --wsize is measured and written by js/hero.js so the lockup always
   fills the frame exactly; the clamp below is the no-JS fallback. */

[data-section="hero"] .hero__word {
  font-family: "Saira", var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: 'wght' 830, 'wdth' 125;
  font-size: var(--wsize, clamp(2.9rem, 15.4vw, 8.1rem));
  line-height: 0.86;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}

[data-section="hero"] .hero__lock {
  display: inline-block;
  background: linear-gradient(176deg, #FFFFFF 34%, rgba(223, 246, 252, 0.94) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(250, 254, 255, 0.95);
  paint-order: stroke fill;
  filter:
    drop-shadow(0 0 46px rgba(63, 224, 208, 0.26))
    drop-shadow(0 10px 30px rgba(5, 6, 15, 0.72))
    drop-shadow(0 16px 64px rgba(5, 6, 15, 0.92));
}
[data-section="hero"] .hero__w { display: inline-block; }

/* one line while there is room for fifteen characters; stacked below that */
@media (min-width: 1000px) {
  [data-section="hero"] .hero__lock { white-space: nowrap; }
}
@media (max-width: 999.98px) {
  [data-section="hero"] .hero__w { display: block; }
  [data-section="hero"] .hero__lock { -webkit-text-stroke-width: 0.7px; }
}

[data-section="hero"] .hero__sub {
  font-family: var(--f-display);
  font-size: clamp(0.78rem, 2.85vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
  margin-top: clamp(1rem, 2vw, 1.7rem);
  text-wrap: balance;
  /* Michroma only ships at 400; a hairline same-colour stroke keeps the
     sub-line from reading thin under a bold-extended lockup. */
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.9);
  text-shadow:
    0 4px 18px rgba(5, 6, 15, 0.7),
    0 10px 40px rgba(5, 6, 15, 0.9);
}

/* the montage caption — instrument voice, so a line that changes every
   four seconds reads as a readout rather than as unstable headline copy */
[data-section="hero"] .hero__now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7em;
  margin-top: clamp(0.85rem, 1.7vw, 1.3rem);
  padding: 0.5em 1.15em;
  font-family: var(--f-mono);
  font-size: clamp(0.6rem, 0.78vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(6, 10, 22, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  clip-path: var(--clip-both);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.42s var(--ease);
}
[data-section="hero"] .hero__now.is-swap { opacity: 0.12; }
[data-section="hero"] .hero__now-n {
  color: #04121A;
  background: var(--cy);
  padding: 0.25em 0.5em;
  letter-spacing: 0.12em;
}
[data-section="hero"] .hero__now-w { color: rgba(255, 255, 255, 0.92); }
[data-section="hero"] .hero__now-x {
  width: 20px;
  height: 1px;
  background: rgba(63, 224, 208, 0.5);
}
[data-section="hero"] .hero__now-l {
  color: rgba(63, 224, 208, 0.9);
  letter-spacing: 0.12em;
  text-transform: none;
}

[data-section="hero"] .hero__lede {
  max-width: 46ch;
  margin: clamp(0.85rem, 1.5vw, 1.2rem) auto 0;
  font-size: clamp(0.9rem, 1.02vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink-60);
  text-wrap: balance;
}

[data-section="hero"] .hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.3rem);
}

/* the trailer's own date card, stated as the company states it */
[data-section="hero"] .hero__ship {
  margin-top: clamp(1rem, 1.8vw, 1.4rem);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

/* buttons: the bar's are flat rectangles — ours are lit and lift */
[data-section="hero"] .hero__btn {
  position: relative;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}
[data-section="hero"] .btn--solid {
  box-shadow: 0 10px 34px rgba(63, 224, 208, 0.24);
}
[data-section="hero"] .btn--ghost {
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
}
[data-section="hero"] .hero__btn:hover {
  transform: translateY(-2px);
}
[data-section="hero"] .btn--solid:hover {
  box-shadow: 0 14px 40px rgba(63, 224, 208, 0.42);
}
[data-section="hero"] .hero__play {
  flex: none;
  color: var(--cy);
  transition: transform 0.4s var(--ease);
}
[data-section="hero"] .btn--ghost:hover .hero__play { transform: translateX(2px); }

/* ── scroll cue ────────────────────────────────────────────── */

[data-section="hero"] .hero__cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--fb) + 12px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  opacity: calc(1 - var(--p) * 2.4);
  transition: color 0.4s var(--ease);
}
[data-section="hero"] .hero__cue:hover { color: var(--cy); }
[data-section="hero"] .hero__cue-l {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
[data-section="hero"] .hero__cue-l i {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 14px;
  background: var(--cy);
  box-shadow: 0 0 8px var(--cy);
  animation: hero-cue 2.4s var(--ease) infinite;
}
@keyframes hero-cue {
  0%       { transform: translateY(-16px); opacity: 0; }
  22%      { opacity: 1; }
  78%      { opacity: 1; }
  100%     { transform: translateY(38px); opacity: 0; }
}

/* ── responsive ────────────────────────────────────────────── */

@media (max-width: 1100px) {
  [data-section="hero"] { --fy: 92px; }
  [data-section="hero"] .hero__vlabel { display: none; }
}

@media (max-width: 860px) {
  [data-section="hero"] .hero__meters { display: none; }
  [data-section="hero"] .hero__ln--t2 { left: calc(40% + 230px); }
}

@media (max-width: 640px) {
  [data-section="hero"] {
    --fy: 74px;
    --fb: 26px;
    --step: 16px;
  }
  /* At 390 wide, a full-height cover crop magnifies the soft source ~5x.
     Give the footage a shorter panel instead and let it fall into black. */
  [data-section="hero"] .hero__media { inset: 0 0 auto; height: 62%; }
  /* That panel crops to roughly a third of the source width, so shot 02's
     off-centre desktop framing would land on bare cell wall. Re-centre it —
     at this crop the avatar is outside the frame anyway. */
  [data-section="hero"] .hero__shot[data-hero-shot="1"] { --ox: 66%; }
  [data-section="hero"] .hero__grade {
    background: linear-gradient(180deg,
      rgba(5, 6, 15, 0.92) 0%,
      rgba(5, 6, 15, 0.42) 20%,
      rgba(5, 6, 15, 0.46) 52%,
      rgba(5, 6, 15, 0.92) 84%,
      var(--bg) 100%);
  }
  [data-section="hero"] .hero__content {
    align-items: flex-end;
    padding-bottom: calc(var(--fb) + 66px);
  }
  [data-section="hero"] .hero__cue { gap: 6px; bottom: calc(var(--fb) + 8px); }
  [data-section="hero"] .hero__cue-l { height: 26px; }
  [data-section="hero"] .hero__g--step,
  [data-section="hero"] .hero__ln--t2,
  [data-section="hero"] .hero__tag { display: none; }
  [data-section="hero"] .hero__ln--t1 { right: calc(var(--fx) + 116px); }
  [data-section="hero"] .hero__g--tr {
    top: var(--fy);
    width: 116px;
    height: 62px;
  }
  [data-section="hero"] .hero__g--tl { width: 84px; height: 84px; }
  [data-section="hero"] .hero__g--bl { width: 72px; height: 44px; }
  [data-section="hero"] .hero__g--br { width: 88px; height: 44px; }
  [data-section="hero"] .hero__ln--b {
    left: calc(var(--fx) + 70px);
    right: calc(var(--fx) + 86px);
  }
  [data-section="hero"] .hero__now {
    gap: 0.55em;
    padding: 0.45em 0.85em;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }
  [data-section="hero"] .hero__now-x { display: none; }
  [data-section="hero"] .hero__now-l { flex: 1 1 100%; letter-spacing: 0.08em; }
  [data-section="hero"] .hero__lede { display: none; }
  [data-section="hero"] .hero__cta { gap: 0.7rem; }
  [data-section="hero"] .hero__btn { flex: 1 1 100%; justify-content: center; }
  [data-section="hero"] .hero__eyebrow { gap: 0.7rem; }
  [data-section="hero"] .hero__ship { font-size: 0.58rem; letter-spacing: 0.2em; }
}

@media (max-width: 380px) {
  [data-section="hero"] .hero__eyebrow { font-size: 0.6rem; }
}

/* ── reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-section="hero"] .hero__media,
  [data-section="hero"] .hero__hud,
  [data-section="hero"] .hero__content {
    transform: none;
    opacity: 1;
  }
  [data-section="hero"] .hero__media { transform: scale(1.04); }
  [data-section="hero"] .hero__shot { transition: none; }
  [data-section="hero"] .hero__cue { opacity: 1; }
  [data-section="hero"] .hero__dot,
  [data-section="hero"] .hero__cue-l i { animation: none; }
  [data-section="hero"] .hero__cue-l i { transform: translateY(12px); }
  [data-section="hero"] .hero__now { transition: none; }
  [data-section="hero"] .hero__now.is-swap { opacity: 1; }
}