/* ==========================================================================
   HOME HERO — "POWER-ON" (SPEC 6.1)
   The brand photo, brought to life by js/hero.js, with the stacked wordmark
   etched on its die. Everything is scoped under .hero and uses the design
   tokens with fallbacks, so this file also stands alone.

   Layers (bottom → top), all inside .hero-comp, which fills the sticky stage:
     .hero-board--under  photo + CSS-fallback die plate and current (image space)
     .hero-veil          darkens the photo before power-on
     .hero-canvas        WebGL2 (hero.js); covers everything below it when live
     .hero-scrim         legibility gradients for the copy (never over the die)
     .hero-board--over   the h1 wordmark (image space, so it sits on the die)
     .hero-handover      Die Blue, fading in at the end of the scroll dolly
     copy · live panel · credits · HUD · scroll cue

   DIE-SAFE FIT — the single source of truth for where the photo sits.
   The stage is a size container. Compositions only set four numbers:
     --die-x / --die-y  where the die centre lands (fractions of the stage)
     --die-h            the die never gets taller than this fraction of the stage
     --die-wmax         … or wider than this fraction of it
   From those, the photo (2048×1156, aspect 1.7716; die centre at UV .5/.4926,
   die size .2128 × .4731 of the photo) is sized to cover the stage around the
   die, then shrunk if the die would break its limits. Uncovered bands are
   faded here and filled by the shader with a blurred mirror of the board.
   hero.js reads the resulting .hero-board box, never these formulas.
   ========================================================================== */

@property --hero-ring {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --hero-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.hero {
  --h-photon: var(--photon, #7CD6FF);
  --h-plasma: var(--plasma, #F2F7FF);
  --h-trace: var(--trace, #8E9BFF);
  --h-substrate: var(--substrate, #03040A);
  --h-solder: var(--solder, #070A1C);
  --h-text: var(--text, #E9EDFA);
  --h-text-2: var(--text-2, rgba(233, 237, 250, .72));
  --h-text-3: var(--text-3, rgba(233, 237, 250, .56));
  --h-line: var(--line, rgba(142, 155, 255, .16));
  --h-line-strong: var(--line-strong, rgba(142, 155, 255, .30));
  --h-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  --h-ease-io: var(--ease-io, cubic-bezier(.65, 0, .35, 1));
  --h-mono: var(--font-mono, 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace);
  --h-display: var(--font-display, 'Anybody', system-ui, sans-serif);
  --h-body: var(--font-body, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif);
  /* Timeline speed: 1 = first visit (3.2 s), .25 = condensed (0.8 s). Set by hero.js. */
  --speed: 1;

  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--h-substrate);
  color: var(--h-text);
  isolation: isolate;
}

/* Scroll dolly room: 200svh in landscape, ~170svh on portrait touch, none on short screens,
   under reduced motion or with Motion off. Without JS there is no dolly. */
.js .hero { height: 200vh; height: 200svh; }

@media (max-aspect-ratio: 4/5) and (pointer: coarse) {
  .js .hero { height: 170vh; height: 170svh; }
}

@media (max-height: 640px), (prefers-reduced-motion: reduce) {
  .js .hero { height: 100vh; height: 100svh; }
}

.motion-off .hero { height: 100vh; height: 100svh; }

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  container: hero / size;
}

/* ---- Compositions (container queries on the stage) ---------------------- */

.hero-comp {
  /* landscape (default) */
  --die-x: .5;
  --die-y: .47;
  --die-h: .62;
  --die-wmax: .42;

  /* the dolly: the die covers the stage at p = --fill-p (hero.js reads it), the Die Blue hand-over runs from just
     before it to ≈ .84, and the page's first sentence is already rising into the frame (page-home.css) */
  --fill-p: .74;
  /* --next-enter (unset here): the dolly progress at which the page's next section starts rising into the frame, when
     the page pulls it up into the dolly (the home page does). hero.js dissolves the wordmark before its letters reach
     it, as it does before they reach a credit that is still up. */

  --g: var(--gutter, clamp(16px, 4vw, 96px));
  --top: var(--header-offset, calc(clamp(56px, 3.75rem, 80px) + env(safe-area-inset-top, 0px)));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar: calc(var(--safe-b) + clamp(2.75rem, 2rem + 2.5cqh, 4.5rem));
  --gap: clamp(1.5rem, 4.5cqw, 9rem);

  /* the fit */
  --cover: max(100cqw * 2 * max(var(--die-x), 1 - var(--die-x)),
               100cqh * 1.7716 * max(var(--die-y) / .4926, (1 - var(--die-y)) / .5074));
  --img-w: min(var(--cover), 100cqh * var(--die-h) * 3.7446, 100cqw * var(--die-wmax) / .2128);
  --img-h: calc(var(--img-w) / 1.7716);
  --img-x: calc(var(--die-x) * 100cqw - .5 * var(--img-w));
  --img-y: calc(var(--die-y) * 100cqh - .4926 * var(--img-h));
  /* die edges in stage px, for placing copy and panels around it */
  --die-l: calc(var(--die-x) * 100cqw - .1064 * var(--img-w));
  --die-r: calc(var(--die-x) * 100cqw + .1064 * var(--img-w));
  --die-t: calc(var(--die-y) * 100cqh - .1335 * var(--img-w));
  --die-b: calc(var(--die-y) * 100cqh + .1335 * var(--img-w));

  position: absolute;
  inset: 0;
}

/* landscape, narrower than 16:10 (4:3 tablets): die higher, copy below it */
@container hero (max-aspect-ratio: 8/5) {
  .hero-comp { --die-y: .4; --die-h: .55; --die-wmax: .4; }
}

/* square */
@container hero (max-aspect-ratio: 5/4) {
  .hero-comp { --die-y: .4; --die-h: .48; --die-wmax: .56; }
}

/* portrait: die high (≈36% y), never wider than 84% of the stage */
@container hero (max-aspect-ratio: 4/5) {
  .hero-comp { --die-y: .355; --die-h: .42; --die-wmax: .84; }
}

/* short portraits (small phones): a smaller die leaves room for the copy */
@container hero (max-aspect-ratio: 4/5) and (max-height: 760px) {
  .hero-comp { --die-y: .3; --die-h: .32; --die-wmax: .64; }
}

@container hero (max-aspect-ratio: 4/5) and (max-height: 600px) {
  .hero-comp { --die-y: .285; --die-h: .3; }
}

/* very tall portrait (portrait monitors, 9:21 phones): the die grows into the height */
@container hero (max-aspect-ratio: 9/16) and (min-width: 600px) {
  .hero-comp { --die-y: .37; --die-h: .44; }
}

/* ultrawide 21:9: a triptych — copy, die, "Runs in your browser" */
@container hero (min-aspect-ratio: 21/9) {
  .hero-comp { --die-x: .5; --die-y: .51; --die-h: .75; --die-wmax: .3; }
}

/* super-ultrawide 32:9: the photo stops covering; the shader mirrors it into the bands */
@container hero (min-aspect-ratio: 3/1) {
  .hero-comp { --die-y: .52; --die-h: .78; }
}

/* short landscape (phones on their side, 1600×600 windows): die right, copy left */
@container hero (max-height: 600px) and (min-aspect-ratio: 5/4) {
  .hero-comp { --die-x: .64; --die-y: .55; --die-h: .7; --die-wmax: .36; }
}

@container hero (max-height: 600px) and (min-aspect-ratio: 21/9) {
  .hero-comp { --die-x: .53; --die-h: .74; }
}

/* ---- Image-space boards ------------------------------------------------- */

.hero-board {
  position: absolute;
  left: var(--img-x);
  top: var(--img-y);
  width: var(--img-w);
  height: var(--img-h);
  transform: scale(var(--dolly, 1));
  transform-origin: 50% 49.26%;
  pointer-events: none;
}

/* the wordmark dissolves rather than being cropped when a portrait dolly pushes past it */
.hero-board--over { opacity: var(--mark-o, 1); }

.hero-board--under {
  /* fade the photo's edges where it does not reach the stage (folded phones, 32:9) */
  --fade-t: clamp(0px, var(--img-y) * 1.6, var(--img-h) * .22);
  --fade-b: clamp(0px, (100cqh - var(--img-y) - var(--img-h)) * 1.6, var(--img-h) * .22);
  --fade-l: clamp(0px, var(--img-x) * 1.6, var(--img-w) * .14);
  --fade-r: clamp(0px, (100cqw - var(--img-x) - var(--img-w)) * 1.6, var(--img-w) * .14);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent),
    linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent),
    linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-composite: intersect;
}

.hero-photo,
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* CSS fallback only: the die's lettering band with the raster letters painted out */
.hero-dieplate {
  position: absolute;
  left: 39.697%;
  top: 42.042%;
  width: 20.557%;
  height: 13.149%;
  display: none;
}

/* CSS fallback only: current through the traces mask (mask URL is inline in the markup) */
.hero-current {
  position: absolute;
  inset: 0;
  display: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: radial-gradient(circle at 50% 49.26%,
    rgba(124, 214, 255, .4) 0 calc(var(--hero-ring) - 14%),
    rgba(242, 247, 255, .9) calc(var(--hero-ring) - 1.5%),
    rgba(124, 214, 255, 0) var(--hero-ring));
  mix-blend-mode: plus-lighter;
  --hero-ring: 170%;
}

/* ---- Veil, canvas, scrim, handover -------------------------------------- */

.hero-veil {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 10, .34);
  pointer-events: none;
}

/* With JS the board starts powered down (−2 EV); the canvas's first frame matches this exactly. */
.js .hero.is-armed .hero-veil { background: rgba(3, 4, 10, .72); }

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity calc(300ms * var(--speed)) linear;
  pointer-events: none;
}

html:not(.js) .hero-canvas { display: none; }
.hero.is-live .hero-canvas { opacity: 1; }

.hero-scrim {
  /* under the transparent header: the nav reads over the board's brightest traces */
  --scrim-top: linear-gradient(to bottom, rgba(3, 4, 10, .8), rgba(3, 4, 10, .52) var(--top), rgba(3, 4, 10, 0) calc(var(--top) * 2.4));
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: clamp(0, 1 - var(--p, 0) * 3, 1);   /* the copy it protects has left by then */
  background:
    var(--scrim-top),
    radial-gradient(ellipse 58% 62% at 0% 100%, rgba(3, 4, 10, .82), rgba(3, 4, 10, .5) 45%, rgba(3, 4, 10, 0) 78%),
    linear-gradient(to top, rgba(3, 4, 10, .55), rgba(3, 4, 10, 0) calc(var(--bar) * 2.4));
}

.hero-handover {
  position: absolute;
  inset: 0;
  /* Die Blue: the section after the hero starts on the same colour (the home page adds the die's pin rows) */
  background: var(--die, #2342C4);
  opacity: clamp(0, (var(--p, 0) - var(--fill-p) + .04) * 7, 1);
  pointer-events: none;
}

/* ---- The etched wordmark (h1) ------------------------------------------- */

.hero-title {
  position: absolute;
  /* the photo's own lettering band, so the vector letters land where the raster ones were */
  left: 39.84%;
  top: 42.725%;
  width: 20.22%;
  height: 11.87%;
  margin: 0;
  container: hero-mark / inline-size;
}

.hero .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-wordmark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  stroke-width: 6;
  /* a faint photon halo and a hairline groove below each stroke: light etched into silicon */
  filter: drop-shadow(0 0 .45cqi rgba(124, 214, 255, .5)) drop-shadow(0 .16cqi 0 rgba(2, 3, 18, .55));
}

/* hairlines stay legible on small screens */
@container hero-mark (max-width: 300px) { .hero-wordmark { stroke-width: 7.5; } }
@container hero-mark (max-width: 220px) { .hero-wordmark { stroke-width: 9; } }

/* Without JS the photo's own letters are the wordmark. */
html:not(.js) .hero-wordmark { display: none; }

.hero-wordmark__etch { stroke: url(#hero-etch-light); }

.hero-wordmark__tip {
  stroke: var(--h-photon);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0;
}

/* Before the etch the strokes are undrawn (JS only); once powered, the animations' fill takes over. */
.js .hero.is-armed .hero-wordmark__etch path { stroke-dasharray: 1 1; }
.js .hero.is-armed .hero-wordmark__tip path { stroke-dasharray: .07 2; stroke-dashoffset: .07; }
.js .hero.is-armed:not(.is-power) .hero-wordmark__etch path { stroke-dashoffset: 1; }

/* 2.4–3.2 s: left → right, ~40 ms per glyph, photon tip settling to plasma */
.hero.is-power .hero-wordmark__etch path {
  animation: hero-etch calc(420ms * var(--speed)) var(--h-ease-io) calc((2400ms + var(--i) * 40ms) * var(--speed)) both;
}

.hero.is-power .hero-wordmark__tip { opacity: 1; }

.hero.is-power .hero-wordmark__tip path {
  animation: hero-tip calc(420ms * var(--speed)) var(--h-ease-io) calc((2400ms + var(--i) * 40ms) * var(--speed)) both;
}

@keyframes hero-etch {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes hero-tip {
  0% { stroke-dashoffset: .07; opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

/* skip (any key / click / scroll) and still mode: everything composed instantly */
.hero.is-skip .hero-wordmark__etch path,
.hero.is-still .hero-wordmark__etch path { animation: none; stroke-dashoffset: 0; }
.hero.is-skip .hero-wordmark__tip,
.hero.is-still .hero-wordmark__tip { display: none; }

/* ---- CSS fallback (no WebGL2 / software renderer / Save-Data / weak CPU) - */

.hero.is-css .hero-dieplate,
.hero.is-css .hero-current { display: block; }

.hero.is-css.is-power .hero-veil {
  animation: hero-unveil calc(1600ms * var(--speed)) var(--h-ease-io) calc(300ms * var(--speed)) both;
}

.hero.is-css.is-power .hero-current {
  animation: hero-ring calc(2400ms * var(--speed)) cubic-bezier(.3, 0, .2, 1) calc(300ms * var(--speed)) both;
}

.hero.is-css.is-power .hero-dieplate {
  animation: hero-fade calc(500ms * var(--speed)) ease-out calc(1900ms * var(--speed)) both;
}

.hero.is-css.is-skip .hero-veil,
.hero.is-css.is-still .hero-veil { animation: none; opacity: .62; }
.hero.is-css.is-skip .hero-current,
.hero.is-css.is-still .hero-current,
.hero.is-css.is-skip .hero-dieplate,
.hero.is-css.is-still .hero-dieplate { animation: none; }

@keyframes hero-unveil { from { opacity: 1; } to { opacity: .62; } }
@keyframes hero-ring { from { --hero-ring: 0%; } to { --hero-ring: 170%; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* Failsafe: if the power-on never starts (script blocked mid-way), lift the veil anyway. */
.js .hero.is-armed:not(.is-power) .hero-veil { animation: hero-wake 1s ease 5s both; }
@keyframes hero-wake { to { background: rgba(3, 4, 10, .34); } }

/* ---- Copy ---------------------------------------------------------------
   Hero type follows the stage's smaller side (cqmin), so every composition scales as one picture:
   a 4K screen shows the 1080p layout at twice the size instead of a small block in a corner. */

.hero-comp {
  --s-lede: clamp(1.2rem, .55rem + 2.1cqmin, 4.2rem);
  --s-mono: clamp(.7rem, .35rem + .65cqmin, 1.45rem);
  --s-btn: clamp(.9375rem, .5rem + .78cqmin, 1.8rem);
  --s-btn-h: clamp(44px, 1.5rem + 2.6cqmin, 5.5rem);
  --s-hud: clamp(.6875rem, .3rem + .6cqmin, 1.3rem);
}

.hero-copy {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* landscape: bottom-left, in the column left of the die */
  left: var(--g);
  bottom: calc(var(--bar) + .5rem);
  width: clamp(16rem, var(--die-l) - var(--g) - 2.5rem, var(--s-lede) * 17);
  opacity: clamp(0, 1 - var(--p, 0) * 14, 1);   /* gone by p = .07, before the first credit is up */
}

/* No :focus-within { opacity: 1 } on the copy, panel or HUD: forced visible mid-dolly they would sit over the credits
   and the next section. Keyboard focus arriving in them rewinds the dolly to its composed first frame (hero.js). */

.js .hero-copy__inner { animation: hero-rise 900ms var(--h-ease) 150ms both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero-eyebrow {
  max-width: none;
  margin: 0 0 1.1em;
  font-family: var(--h-mono);
  font-size: var(--s-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--h-photon);
}

.hero-lede {
  margin: 0;
  max-width: 22ch;
  font-family: var(--h-display);
  font-weight: 300;
  font-size: var(--s-lede);
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--h-plasma);
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 18px rgba(3, 4, 10, .6);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: calc(var(--s-lede) * .9);
}

.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: var(--s-btn-h);
  padding: 0 1.3em;
  border-radius: var(--r-sm, 6px);
  font-family: var(--h-body);
  font-size: var(--s-btn);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 320ms var(--h-ease), transform 160ms ease;
}

.hero-cta--primary {
  background: var(--h-photon);
  color: var(--h-substrate);
  box-shadow: 0 0 0 1px rgba(124, 214, 255, .4), 0 10px 40px -12px rgba(124, 214, 255, .55);
}

.hero-cta--primary:hover {
  background: var(--h-plasma);
  box-shadow: 0 0 0 1px rgba(242, 247, 255, .6), 0 12px 48px -10px rgba(124, 214, 255, .8);
}

.hero-cta__dot {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 .2em rgba(3, 4, 10, .16);
}

.hero-cta--ghost {
  background: rgba(7, 10, 28, .62);
  color: var(--h-text);
  box-shadow: inset 0 0 0 1px var(--h-line-strong);
}

/* hover/focus: current runs around the border */
.hero-cta--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--hero-angle), transparent 0 62%, var(--h-photon) 80%, var(--h-plasma) 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 320ms ease;
}

.hero-cta--ghost:hover::before,
.hero-cta--ghost:focus-visible::before {
  opacity: 1;
  animation: hero-orbit 2.2s linear infinite;
}

.hero-cta--ghost:hover { background: rgba(14, 20, 48, .82); }

@keyframes hero-orbit { to { --hero-angle: 360deg; } }

.hero-cta:active { transform: translateY(1px); }

.hero-cta:focus-visible,
.hero-hud__motion:focus-visible,
.hero-panel__item:focus-visible {
  outline: 2px solid var(--focus, var(--h-photon));
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(3, 4, 10, .85);
}

/* ---- "Runs in your browser" (ultrawide, tall portrait) ------------------ */

.hero-panel {
  display: none;
  position: absolute;
  z-index: 2;
  left: calc(var(--die-r) + var(--gap));
  top: calc(var(--die-y) * 100cqh);
  width: min(var(--s-lede) * 12.5, 100cqw - var(--die-r) - var(--gap) - var(--g));
  translate: 0 -50%;
  padding: 1.1em 1.1em .5em;
  border-radius: var(--r-md, 12px);
  background: rgba(5, 7, 20, .78);
  box-shadow: inset 0 0 0 1px var(--h-line), 0 24px 60px -24px rgba(0, 0, 0, .8);
  font-size: clamp(1rem, .5rem + .8cqmin, 1.75rem);
  opacity: clamp(0, 1 - var(--p, 0) * 14, 1);   /* gone by p = .07, before the first credit is up */
}

.hero-panel__title {
  margin: 0 0 .7em;
  font-family: var(--h-mono);
  font-size: var(--s-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--h-text-2);
}

.hero-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-panel__list li + li { border-top: 1px solid var(--h-line); }

.hero-panel__item {
  display: grid;
  grid-template-columns: 36% 1fr;
  grid-template-rows: auto auto;
  column-gap: .9em;
  align-items: center;
  padding: .7em 0;
  border-radius: var(--r-sm, 6px);
  color: var(--h-text);
  text-decoration: none;
}

.hero-panel__item img {
  grid-row: 1 / 3;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xs, 3px);
  box-shadow: 0 0 0 1px var(--h-line-strong);
  transition: box-shadow 320ms var(--h-ease);
}

.hero-panel__item:hover img { box-shadow: 0 0 0 1px var(--h-photon), 0 0 24px -6px rgba(124, 214, 255, .7); }

.hero-panel__name {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2em .6em;
  font-family: var(--h-body);
  font-weight: 500;
  font-size: 1em;
}

.hero-panel__tag {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--h-mono);
  font-size: .625em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--h-photon);
}

.hero-panel__dot {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--h-photon);
  box-shadow: 0 0 8px var(--h-photon);
  animation: hero-breathe 2.4s ease-in-out infinite;
}

@keyframes hero-breathe { 50% { opacity: .35; box-shadow: 0 0 2px var(--h-photon); } }

.hero-panel__meta {
  align-self: start;
  margin-top: .2em;
  font-family: var(--h-mono);
  font-size: .6875em;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--h-text-3);
}

/* ---- Credits (during the dolly only) ------------------------------------ */

.hero-credits {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--bar) + 6cqh);
  width: min(var(--s-lede) * 24, 100cqw - 2 * var(--g));
  translate: -50% 0;
  display: grid;
  pointer-events: none;
}

.hero-credit {
  grid-area: 1 / 1;
  align-self: end;
  max-width: none;
  margin: 0;
  font-family: var(--h-display);
  font-weight: 300;
  font-size: clamp(1.25rem, .5rem + 2.9cqmin, 5rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: var(--h-plasma);
  text-shadow: 0 2px 28px rgba(3, 4, 10, .95), 0 0 2px rgba(3, 4, 10, .8);
  opacity: 0;
}

.hero.is-dolly .hero-credit {
  opacity: clamp(0, min((var(--p, 0) - var(--a)) / .05, (var(--b) - var(--p, 0)) / .05), 1);
  transform: translateY(calc((var(--a) + var(--b) - 2 * var(--p, 0)) * 60px));
}

.hero-credit__em {
  display: block;
  margin-top: .35em;
  font-family: var(--h-mono);
  font-size: .5em;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--h-photon);
}

/* ---- HUD ---------------------------------------------------------------- */

.hero-hud {
  position: absolute;
  z-index: 2;
  right: var(--g);
  bottom: calc(var(--safe-b) + clamp(.75rem, .4rem + 1.2cqh, 2.25rem));
  display: flex;
  align-items: center;
  gap: 1.6em;
  font-family: var(--h-mono);
  font-size: var(--s-hud);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--h-text-3);
  opacity: clamp(0, 1 - var(--p, 0) * 6, 1);
}

.hero-hud__readouts {
  display: flex;
  gap: 1.6em;
  margin: 0;
}

.hero-hud__row { display: flex; gap: .6em; }
.hero-hud__row[hidden] { display: none; }
.hero-hud dt { color: var(--h-text-3); }
.hero-hud dd { margin: 0; color: var(--h-text-2); }
.hero-hud [data-hero-path]::before {
  content: '';
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-right: .55em;
  vertical-align: .1em;
  border-radius: 50%;
  background: var(--h-text-3);
}
.hero.is-webgl .hero-hud [data-hero-path]::before { background: var(--h-photon); box-shadow: 0 0 6px var(--h-photon); }

.hero-hud__motion {
  min-height: max(32px, 2.9em);
  padding: 0 .9em;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 10, 28, .6);
  box-shadow: inset 0 0 0 1px var(--h-line-strong);
  color: var(--h-text-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.hero-hud__motion:hover { color: var(--h-plasma); box-shadow: inset 0 0 0 1px var(--h-photon); }
html:not(.js) .hero-hud__motion { display: none; }

@media (pointer: coarse) {
  .hero-hud__motion { min-height: 44px; }
}

/* ---- Scroll cue --------------------------------------------------------- */

.hero-cue {
  --cue-h: clamp(36px, 6.5cqh, 128px);
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--safe-b);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  font-family: var(--h-mono);
  font-size: clamp(.625rem, .3rem + .5cqmin, 1.1rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--h-text-3);
  opacity: clamp(0, 1 - var(--p, 0) * 12, 1);
  pointer-events: none;
}

.hero-cue__label { padding-left: .3em; }

.hero-cue__trace {
  position: relative;
  width: 1px;
  height: var(--cue-h);
  background: linear-gradient(var(--h-line-strong), rgba(142, 155, 255, 0));
  overflow: hidden;
}

.hero-cue__trace::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(rgba(124, 214, 255, 0), var(--h-photon));
  box-shadow: 0 0 8px var(--h-photon);
  animation: hero-packet 1.8s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes hero-packet {
  from { transform: translateY(-14px); }
  to { transform: translateY(var(--cue-h)); }
}

/* the cue only promises scrolling where there is a dolly to scroll through */
html:not(.js) .hero-cue,
.motion-off .hero-cue { display: none; }

@media (max-height: 640px), (prefers-reduced-motion: reduce) {
  .hero-cue { display: none; }
}

/* ---- Composition layouts ------------------------------------------------ */

/* below the die: 4:3 landscape, square, portrait */
@container hero (max-aspect-ratio: 8/5) {
  .hero-copy {
    left: var(--g);
    right: var(--g);
    width: auto;
    top: calc(var(--die-b) + var(--img-h) * .03 + clamp(.75rem, 3cqh, 2.5rem));   /* clear the pins under the die */
    bottom: calc(var(--bar) + .25rem);
    justify-content: center;
  }

  .hero-copy__inner { width: min(100%, var(--s-lede) * 26); }
  .hero-lede { max-width: 26ch; }
  .hero-cue { display: none; }

  .hero-scrim {
    background:
      var(--scrim-top),
      linear-gradient(to bottom, rgba(3, 4, 10, 0) calc(var(--die-b) - 6cqh), rgba(3, 4, 10, .78) calc(var(--die-b) + 6cqh), rgba(3, 4, 10, .9));
  }
}

@container hero (max-aspect-ratio: 5/4) {
  .hero-copy { align-items: center; text-align: center; }
  .hero-lede { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
}

/* portrait: copy stacked under the die; full-width CTAs on phones. The credits sit just under the die's middle
   (the wordmark has left by then, and the bottom of the frame is where the next sentence rises) */
@container hero (max-aspect-ratio: 4/5) {
  .hero-copy { justify-content: center; }
  .hero-credits { top: 54cqh; bottom: auto; }
  .hero-credit { align-self: start; }
  .hero-lede { max-width: 24ch; }
  .hero-hud { left: var(--g); justify-content: space-between; }
}

@container hero (max-aspect-ratio: 4/5) and (max-width: 599px) {
  .hero-copy { align-items: stretch; text-align: left; justify-content: flex-start; }
  .hero-copy__inner { width: 100%; }
  .hero-lede { margin-inline: 0; }
  .hero-ctas { flex-direction: column; gap: .6rem; }
  .hero-cta { width: 100%; }
}

/* tall portraits (portrait monitors, big tablets): the live panel joins the copy, under it */
@container hero (max-aspect-ratio: 4/5) and (min-height: 1250px) and (min-width: 700px) {
  .hero-copy { bottom: calc(var(--bar) + var(--s-lede) * 7.5); }
  .hero-panel {
    display: block;
    left: 50%;
    top: auto;
    bottom: var(--bar);
    width: min(100cqw - 2 * var(--g), var(--s-lede) * 30);
    translate: -50% 0;
  }
  .hero-panel__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4em; }
  .hero-panel__list li + li { border-top: 0; }
}

/* ultrawide triptych: copy hugs the die's left side, live panel its right */
@container hero (min-aspect-ratio: 21/9) {
  .hero-copy {
    left: max(var(--g), var(--die-l) - var(--gap) - var(--s-lede) * 17);
    width: min(var(--s-lede) * 17, var(--die-l) - var(--gap) - var(--g));
    top: var(--top);
    bottom: var(--bar);
    justify-content: center;
  }

  .hero-scrim {
    background:
      var(--scrim-top),
      linear-gradient(to right, rgba(3, 4, 10, .5), rgba(3, 4, 10, .72) calc(var(--die-l) - var(--gap) - var(--s-lede) * 17), rgba(3, 4, 10, .6) calc(var(--die-l) - var(--gap)), rgba(3, 4, 10, 0) var(--die-l)),
      linear-gradient(to left, rgba(3, 4, 10, .5), rgba(3, 4, 10, .55) calc(100% - var(--die-r) - var(--gap) * .5), rgba(3, 4, 10, 0) calc(100% - var(--die-r))),
      linear-gradient(to top, rgba(3, 4, 10, .5), rgba(3, 4, 10, 0) calc(var(--bar) * 2.2));
  }
}

@container hero (min-aspect-ratio: 21/9) and (min-width: 1200px) {
  .hero-panel { display: block; }
}

/* short landscape: copy in the left 40%, vertically centred under the header */
@container hero (max-height: 600px) and (min-aspect-ratio: 5/4) {
  .hero-comp { --s-lede: clamp(1.125rem, .8rem + 2.2cqh, 1.85rem); }

  .hero-copy {
    left: var(--g);
    right: auto;
    width: min(var(--s-lede) * 17, 40cqw, var(--die-l) - var(--g) - 1.5rem);
    top: var(--top);
    bottom: calc(var(--bar) - .5rem);
    justify-content: center;
    align-items: stretch;
    text-align: left;
  }

  .hero-copy__inner { width: auto; }
  .hero-eyebrow { margin-bottom: .8em; }
  .hero-lede { max-width: 24ch; margin-inline: 0; }
  .hero-ctas { margin-top: clamp(.9rem, 4cqh, 1.75rem); justify-content: flex-start; flex-direction: row; }
  .hero-cta { width: auto; }
  .hero-cue { display: none; }

  .hero-scrim {
    background:
      var(--scrim-top),
      linear-gradient(to right, rgba(3, 4, 10, .84), rgba(3, 4, 10, .66) calc(var(--die-l) - var(--gap)), rgba(3, 4, 10, 0) var(--die-l)),
      linear-gradient(to top, rgba(3, 4, 10, .5), rgba(3, 4, 10, 0) var(--bar));
  }
}

@container hero (max-height: 600px) and (min-aspect-ratio: 21/9) {
  .hero-copy { left: max(var(--g), var(--die-l) - var(--gap) - var(--s-lede) * 17); width: min(var(--s-lede) * 17, var(--die-l) - var(--gap) - var(--g)); }
}

@container hero (max-height: 440px) and (min-aspect-ratio: 5/4) {
  .hero-comp { --s-mono: .625rem; --s-btn: .875rem; --s-btn-h: 40px; }
  .hero-hud__readouts { display: none; }
}

@media (pointer: coarse) and (max-height: 440px) {
  .hero .hero-cta { min-height: 44px; }
}

/* narrow stages: compact HUD (values only) */
@container hero (max-width: 479px) {
  .hero-hud { gap: 1em; letter-spacing: .1em; }
  .hero-hud__readouts { gap: 1em; }
  .hero-hud dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* folded phones */
@container hero (max-width: 340px) {
  .hero-comp { --g: 12px; }
  .hero-eyebrow { letter-spacing: .14em; }
}

/* ---- Dolly state -------------------------------------------------------- */

.hero.is-dollying .hero-copy,
.hero.is-dollying .hero-panel,
.hero.is-dollying .hero-hud { pointer-events: none; }

.hero.is-dollying .hero-copy:focus-within,
.hero.is-dollying .hero-panel:focus-within,
.hero.is-dollying .hero-hud:focus-within { pointer-events: auto; }

/* ---- Reduced motion / Motion off: composed instantly -------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero .hero-copy__inner,
  .hero .hero-panel__dot,
  .hero .hero-cue__trace::after,
  .hero .hero-cta--ghost::before { animation: none !important; }
  .hero .hero-canvas { transition: none; }
}

.motion-off .hero .hero-copy__inner,
.motion-off .hero .hero-panel__dot,
.motion-off .hero .hero-cta--ghost::before { animation: none !important; }
.motion-off .hero .hero-canvas { transition: none; }

/* ---- Modes -------------------------------------------------------------- */

@media (prefers-contrast: more) {
  .hero-scrim { background: rgba(3, 4, 10, .55); }
  .hero-cta--ghost,
  .hero-panel,
  .hero-hud__motion { background: var(--laminate, #0E1430); }
  .hero-wordmark { filter: none; }
}

@media (forced-colors: active) {
  .hero-canvas,
  .hero-veil,
  .hero-scrim,
  .hero-current,
  .hero-handover { display: none; }
  .hero-wordmark { filter: none; }
  .hero-wordmark__etch { stroke: CanvasText; }
  .hero-wordmark__tip { display: none; }
  .hero-cta { border: 1px solid ButtonText; }
}

/* Very old browsers without container units: a plain cover photo with its own letters. */
@supports not (width: 1cqw) {
  .hero-board { inset: 0; width: 100%; height: 100%; transform: none; }
  .hero-photo img { object-fit: cover; }
  .hero-wordmark,
  .hero-canvas,
  .hero-panel,
  .hero-credits { display: none; }
  .hero-copy { left: 16px; right: 16px; bottom: 3.5rem; width: auto; }
  .hero-lede { font-size: 1.375rem; }
}