/* =============================================
   HERO - "the edit"
   Subject-born: a vertical-video carousel (the work) standing on a
   jog-wheel dial, with a timeline under it. Layers, back to front:
   ambient video -> light -> wordmark -> dial -> ring of reels -> copy.
   ============================================= */

.hero {
  --fw: clamp(88px, min(30vw, 14.6svh), 122px);
  --fh: calc(var(--fw) * 16 / 9);
  --R: calc(var(--fw) * var(--Rk, 1.52));
  --ring-drop: 22px;                       /* how far the ring sits below the wordmark line, so the letters show above the reels */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: 84px 0 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 961px) {
  .hero { --fw: clamp(150px, 13vw, 200px); --ring-drop: 44px; padding-top: 92px; }
}

/* ---------- background layers ---------- */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-bg::before { content: ''; position: absolute; inset: 0; background: rgba(7,5,12,0.5); }
.hero-spot {
  position: absolute; inset: 0; opacity: 0.9;
  background: radial-gradient(420px 420px at var(--mx, 30%) var(--my, 50%), rgba(190,140,255,0.16), transparent 70%);
}
.hero-light {
  position: absolute; inset-inline: -20%; top: -10%; height: 90%;
  background:
    radial-gradient(48% 52% at 50% 46%, rgba(147,51,234,0.34), transparent 70%),
    radial-gradient(30% 34% at 78% 20%, rgba(147,51,234,0.14), transparent 70%);
}
@media (min-width: 961px) {
  .hero-light {
    background:
      radial-gradient(34% 56% at 27% 52%, rgba(147,51,234,0.34), transparent 70%),
      radial-gradient(30% 40% at 85% 18%, rgba(147,51,234,0.12), transparent 70%);
  }
}
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grain {
  position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,5,12,0.55) 0, transparent 22%, transparent 70%, var(--ink) 100%);
}

/* ---------- layout ---------- */
.hero-grid {
  position: relative; z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 4px;
}
@media (min-width: 961px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    align-content: center;
    gap: 24px;
    padding-bottom: 28px;
  }
}

/* ---------- stage ---------- */
.hero-stage {
  position: relative;
  order: -1;
  height: calc(var(--fh) + 126px + var(--ring-drop));
  container-type: inline-size;
  perspective: 1100px;
  perspective-origin: 50% 38%;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.hero-stage:active { cursor: grabbing; }
.hero-stage:focus-visible { box-shadow: 0 0 0 2px var(--txt-hi); border-radius: 18px; }
@media (min-width: 961px) {
  .hero-stage { order: 1; height: calc(var(--fh) + 230px + var(--ring-drop)); }
  .stage-rec { right: 2%; top: 46%; }
  .hero-word { top: 4px; }
}

/* wordmark - sits behind everything, scrubbed in by a playhead */
.hero-word {
  position: absolute; inset-inline: 0; top: -14px;
  z-index: 0; pointer-events: none;
  direction: ltr;
  font-family: 'Archivo', 'Heebo', sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 16.2cqw;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(147,51,234,0.24);
  -webkit-text-stroke: 1.6px rgba(214,196,255,0.78);
  clip-path: inset(0 100% 0 0);
  animation: wordScrub 1.05s var(--ease-inout) 1.0s forwards;
  transform: translate3d(var(--wx, 0px), 0, 0);
  will-change: transform;
}
.hero-word span { display: block; }
.hero-word .w-or { text-align: start; padding-inline-start: 1.5%; font-size: 0.3em; line-height: 1.55; -webkit-text-stroke-width: 1px; letter-spacing: 0.08em; }
.hero-scrub {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 0;
  left: 0; pointer-events: none;
  background: var(--signal);
  box-shadow: 0 0 14px rgba(255,77,109,0.7);
  opacity: 0;
  animation: scrubLine 1.05s var(--ease-inout) 1.0s forwards;
}
@keyframes wordScrub { to { clip-path: inset(0 0 0 0); } }
@keyframes scrubLine {
  0% { left: 0; opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ring */
.ring-wrap { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; }
.ring-pivot {
  position: absolute; left: 50%; top: calc(50% - 6px + var(--ring-drop, 0px));
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--R) * -1)) rotateX(13deg);
  will-change: transform;
}
.ring-frame {
  position: absolute;
  width: var(--fw); height: var(--fh);
  left: calc(var(--fw) / -2); top: calc(var(--fh) / -2);
  border-radius: 14px;
  transform: rotateY(calc(var(--i) * var(--step, 40deg))) translateZ(var(--R));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: linear-gradient(160deg, #1c1230, #0c0816);
  border: 1px solid rgba(214,196,255,0.16);
  box-shadow: 0 26px 44px -20px rgba(0,0,0,0.85);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out), border-color 0.3s;
  transition-delay: calc(var(--i) * 70ms), 0s;
  cursor: pointer;
}
.hero.is-in .ring-frame { opacity: 1; }
.hero.is-live .ring-frame { transition: border-color 0.3s; }
.ring-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ring-frame.is-front { border-color: rgba(214,196,255,0.5); }
.rf-shade { position: absolute; inset: 0; background: var(--ink); opacity: var(--d, 0); pointer-events: none; }
.rf-gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent 28%); }
.rf-play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 0.95rem; padding-inline-start: 2px;
  background: rgba(7,5,12,0.55); border: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}
.ring-frame.is-front .rf-play { opacity: 1; transform: none; }

/* jog-wheel dial under the reels - spins with the ring */
.ring-dial {
  position: absolute;
  --D: calc(var(--fw) * 4.4);
  width: var(--D); height: var(--D);
  left: calc(var(--D) / -2); top: calc(var(--D) / -2);
  transform: translateY(calc(var(--fh) / 2 + 12px)) rotateX(90deg);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(214,196,255,0.85) 0 0.55deg, transparent 0.55deg 3deg),
    radial-gradient(circle, transparent 0 60%, rgba(147,51,234,0.22) 61% 62%, transparent 63%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 66%, #000 67% 73%, transparent 74%);
          mask-image: radial-gradient(circle, transparent 0 66%, #000 67% 73%, transparent 74%);
  pointer-events: none;
}
.ring-dial::before, .ring-dial::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ring-dial::before { inset: 0; border: 1px solid rgba(214,196,255,0.22); }
.ring-dial::after { inset: 11%; border: 1px dashed rgba(147,51,234,0.5); }

/* floating glass chip - a nearer layer than the ring */
.stage-rec {
  position: absolute; z-index: 4; right: 3%; top: -24px;
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px;
  background: rgba(14,10,22,0.6); border: 1px solid rgba(214,196,255,0.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: 'Archivo', sans-serif; font-stretch: 100%; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; direction: ltr; color: var(--txt-hi);
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0); pointer-events: none;
  opacity: 0; animation: fadeUp 0.8s var(--ease-expo) 3.0s forwards;
}
.stage-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: recBlink 1.4s steps(1) infinite; }
.stage-rec span { color: var(--txt-mid); font-weight: 700; }
@keyframes recBlink { 50% { opacity: 0.15; } }

/* cursor that follows the mouse on the stage (desktop only) */
.stage-cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-stage { cursor: none; }
  .stage-cur {
    display: grid; place-items: center; position: absolute; left: 0; top: 0; z-index: 6;
    width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; pointer-events: none;
    background: rgba(246,242,255,0.92); color: var(--ink); font-weight: 800; font-size: 0.86rem;
    transform: translate3d(var(--curx, -200px), var(--cury, -200px), 0) scale(var(--curs, 0));
    transition: transform 0.18s var(--ease-out);
    mix-blend-mode: normal;
  }
}

@media (min-width: 961px) { .ring-dial { --D: min(calc(var(--fw) * 4.4), 98cqw); } }

/* drag hint */
.stage-hint {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3; text-align: center;
  font-size: 0.8rem; font-weight: 700; color: var(--txt-mid);
  pointer-events: none; transition: opacity 0.5s var(--ease-out);
}
.stage-hint.is-gone { opacity: 0; }

/* timeline: one clip per reel, a playhead that follows the ring */
.hero-track {
  position: absolute; inset-inline: 4%; bottom: 30px; z-index: 3;
  height: 22px; display: flex; gap: 4px;
}
.trk {
  flex: 1; position: relative; padding: 0; border: 0; cursor: pointer;
  border-radius: 4px; background: rgba(214,196,255,0.14);
  transition: background-color 0.24s var(--ease-out);
}
.trk::after { content: ''; position: absolute; inset: -12px -2px; } /* 44px touch target */
.trk.is-on { background: var(--accent); }
.trk-head {
  position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--signal);
  inset-inline-start: 0; pointer-events: none; border-radius: 2px;
  transform: translate3d(var(--hx, 0px), 0, 0);
}
html[dir="rtl"] .trk-head { transform: translate3d(calc(var(--hx, 0px) * -1), 0, 0); }
.trk-head::before {
  content: ''; position: absolute; top: -5px; inset-inline-start: -4px; width: 10px; height: 8px;
  background: var(--signal); clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- copy ---------- */
.hero-copy { position: relative; z-index: 4; padding-top: 12px; }
.hero-h1 {
  font-family: 'Karantina', 'Heebo', sans-serif;
  font-weight: 700;
  font-size: clamp(2.7rem, 12.6vw, 4.3rem);
  line-height: 1.0;
  letter-spacing: 0;
  margin-bottom: 16px;
  text-wrap: balance;
}
.hero-line:first-child > span { font-size: 0.8em; color: #d8cfea; }
.hero-line { display: block; overflow: hidden; padding-block: 0.07em; margin-block: -0.07em; }
.hero-line > span { display: block; transform: translateY(112%); animation: lineUp 0.95s var(--ease-expo) both; }
.hero-line:nth-child(1) > span { animation-delay: 2.35s; }
.hero-line:nth-child(2) > span { animation-delay: 2.5s; }
@keyframes lineUp { to { transform: none; } }

/* the selected clip on a timeline - each wrapped line is its own clip with trim handles */
.clip {
  color: #fff;
  padding: 0 0.2em; margin-inline: -0.06em;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat right center / 0% 100%,
    linear-gradient(var(--txt-hi), var(--txt-hi)) no-repeat right center / 0px 64%,
    linear-gradient(var(--txt-hi), var(--txt-hi)) no-repeat left center / 0px 64%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: clipIn 1.1s var(--ease-expo) 2.9s forwards;
}
html[dir="ltr"] .clip { background-position: left center, left center, right center; }
@keyframes clipIn {
  60% { background-size: 100% 100%, 0px 64%, 0px 64%; }
  100% { background-size: 100% 100%, 3px 64%, 3px 64%; }
}

.hero-sub {
  font-size: 1rem; line-height: 1.7; color: var(--txt-mid);
  max-width: 34rem; margin-bottom: 18px;
  opacity: 0; transform: translateY(14px); animation: fadeUp 0.8s var(--ease-expo) 3.0s forwards;
}
.hero .hero-cta { flex-direction: row; }
.hero-cta { opacity: 0; transform: translateY(14px); animation: fadeUp 0.8s var(--ease-expo) 2.85s forwards; flex-wrap: nowrap; }
.hero-cta .btn { flex: 1; padding-inline: 14px; justify-content: center; }
.hero-cta .btn-p { flex: 1.25; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@media (min-width: 961px) {
  .hero-copy { padding-top: 0; }
  .hero-h1 { font-size: clamp(4rem, 5.7vw, 5.9rem); line-height: 0.98; margin-bottom: 22px; }
  .hero-sub { font-size: 1.1rem; margin-bottom: 30px; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn { flex: 0 0 auto; padding-inline: 34px; }
}

/* ---------- scrolling band: what I do ---------- */
.hero-ticker {
  position: relative; z-index: 1; overflow: hidden; direction: rtl;
  border-block: 1px solid var(--border);
  background: rgba(214,196,255,0.03);
  margin-top: 26px;
  opacity: 0; transform: translateY(14px); animation: fadeUp 0.8s var(--ease-expo) 2.7s forwards;
}
.tick-track { display: flex; width: max-content; animation: tick 34s linear infinite; }
.hero-ticker:hover .tick-track { animation-play-state: paused; }
.tick-set { display: flex; align-items: center; flex-shrink: 0; }
.tick-set span {
  font-family: 'Karantina', 'Heebo', sans-serif; font-weight: 700;
  font-size: 1.7rem; line-height: 1; padding: 15px 0; white-space: nowrap;
}
.tick-set i {
  width: 11px; height: 11px; margin-inline: 28px; flex-shrink: 0;
  background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html[dir="rtl"] .tick-set i { transform: scaleX(-1); }
@keyframes tick { to { transform: translate3d(50%, 0, 0); } }
html[dir="ltr"] .tick-track { animation-name: tickLtr; }
@keyframes tickLtr { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- trust band ---------- */
.hero-trust { position: relative; z-index: 1; padding: 44px 0 56px; text-align: center; }
.hero-trust-label { display: block; font-size: 0.95rem; font-weight: 800; color: var(--txt-mid); margin-bottom: 20px; }
.hero-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust-chip {
  width: 78px; height: 56px; padding: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.24s var(--ease-out), transform 0.24s var(--ease-out);
}
.trust-chip img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(0.85); opacity: 0.85;
  transition: filter 0.24s var(--ease-out), opacity 0.24s var(--ease-out);
}
.trust-chip:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .trust-chip:hover { border-color: var(--border-hover); transform: translateY(-4px); }
  .trust-chip:hover img { filter: none; opacity: 1; }
}
@media (min-width: 700px) {
  .trust-chip { width: 128px; height: 84px; padding: 14px; border-radius: 14px; }
  .hero-trust-row { gap: 18px; }
}

/* ---------- lite mode (set by the performance governor on slow phones) ---------- */
.hero.is-lite .stage-rec { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero.is-lite .rf-gloss, .hero.is-lite .hero-grain { display: none; }
.hero.is-lite .rf-play { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- reduced motion: the finished layout is the static state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-word { clip-path: none; animation: none; }
  .hero-scrub { display: none; }
  .hero-line > span { transform: none; animation: none; }
  .clip { background-size: 100% 100%, 3px 64%, 3px 64%; animation: none; }
  .hero-sub, .hero-cta { opacity: 1; transform: none; animation: none; }
  .ring-frame { opacity: 1; transition: none; }
  .tick-track { animation: none; }
}

/* tablets / large phones in landscape: stacked, but a bigger ring */
@media (min-width: 600px) and (max-width: 960px) {
  .hero { --fw: 150px; }
  .hero-stage { max-width: 640px; margin-inline: auto; width: 100%; }
  .hero-copy { max-width: 640px; margin-inline: auto; width: 100%; }
}

/* short phones (e.g. 360x640): keep headline + both buttons on the first screen */
@media (max-width: 599px) and (max-height: 700px) {
  .hero { --ring-drop: 10px; }
  .hero-stage { height: calc(var(--fh) + 102px + var(--ring-drop)); }
  .hero-track { bottom: 24px; }
  .hero-h1 { font-size: clamp(2.3rem, 11.4vw, 3.4rem); margin-bottom: 12px; }
  .hero-sub { font-size: 0.95rem; line-height: 1.6; margin-bottom: 14px; }
  .hero-copy { padding-top: 8px; }
}

/* landscape phones: side by side instead of a tall stack */
@media (min-width: 600px) and (max-height: 520px) {
  .hero { --fw: clamp(72px, 24svh, 112px); --ring-drop: 0px; min-height: 0; padding-top: 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; padding-bottom: 18px; }
  .hero-stage { order: 1; height: calc(var(--fh) + 100px); max-width: none; }
  .hero-copy { max-width: none; padding-top: 0; }
  .hero-h1 { font-size: clamp(2.1rem, 11svh, 3.4rem); margin-bottom: 8px; }
  .hero-sub { font-size: 0.9rem; line-height: 1.55; margin-bottom: 12px; }
  .stage-rec, .stage-hint { display: none; }
  .hero-track { bottom: 22px; }
}


/* =============================================
   BUILD - the page assembles itself (js/hero.js drives the cards)
   html.build-pending  = waiting for fonts, everything paused
   html.is-building    = the ~2.5s assembly is running
   ============================================= */
html.build-pending .hero *, html.build-pending .hdr * { animation-play-state: paused !important; }
html.build-skip .hero-word, html.build-skip .hero-scrub, html.build-skip .hero-line > span, html.build-skip .clip,
html.build-skip .hero-sub, html.build-skip .hero-cta, html.build-skip .stage-rec, html.build-skip .hero-ticker,
html.build-skip .hdr .logo, html.build-skip .hdr-nav a, html.build-skip .hdr-inner > .btn, html.build-skip .burger {
  animation-duration: 0.25s !important; animation-delay: 0s !important;
}

/* header drops in piece by piece */
html.is-building .hdr .logo, html.is-building .hdr-nav a, html.is-building .hdr-inner > .btn, html.is-building .burger {
  animation: dropIn 0.7s var(--ease-expo) both; animation-delay: calc(0.85s + var(--n, 0) * 0.07s);
}
.hdr-nav a:nth-child(1) { --n: 1; } .hdr-nav a:nth-child(2) { --n: 2; } .hdr-nav a:nth-child(3) { --n: 3; }
.hdr-nav a:nth-child(4) { --n: 4; } .hdr-nav a:nth-child(5) { --n: 5; } .hdr-nav a:nth-child(6) { --n: 6; }
.hdr-inner > .btn, .burger { --n: 7; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

/* cards: no CSS fade while JS flies them in */
html.is-building .ring-frame { opacity: 0; transition: none; will-change: transform, opacity; }
html.build-failsafe .ring-frame { opacity: 1 !important; }

/* dial, timeline and hint arrive as the cards land */
.ring-dial { transition: opacity 0.9s var(--ease-out); }
html.is-building .ring-dial { animation: dialIn 0.8s linear 0.1s both; }
@keyframes dialIn { from { opacity: 0; } to { opacity: 1; } }
.trk { transition: background-color 0.24s var(--ease-out), opacity 0.35s var(--ease-out), transform 0.5s var(--ease-expo); }
html.is-building .trk:not(.is-in) { opacity: 0; transform: scaleY(0.15); }
.trk-head, .stage-hint { transition: opacity 0.6s var(--ease-out); }
html.is-building .trk-head, html.is-building .stage-hint { opacity: 0; }

/* shockwave on the dial when the ring locks */
.dial-pulse {
  position: absolute; --D: calc(var(--fw) * 4.4); width: var(--D); height: var(--D);
  left: calc(var(--D) / -2); top: calc(var(--D) / -2);
  transform: translateY(calc(var(--fh) / 2 + 12px)) rotateX(90deg); pointer-events: none;
}
@media (min-width: 961px) { .dial-pulse { --D: min(calc(var(--fw) * 4.4), 98cqw); } }
.dial-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(199,166,255,0.8); opacity: 0; }
.hero.is-locked .dial-pulse::after { animation: dialPulse 1.3s var(--ease-out) both; }
.hero.is-locked .dial-pulse::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(147,51,234,0.9); opacity: 0; animation: dialPulse 1.3s var(--ease-out) 0.18s both; }
@keyframes dialPulse { from { scale: 0.35; opacity: 0.95; } to { scale: 1.45; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-ticker { opacity: 1; transform: none; animation: none; }
  .hero.is-locked .dial-pulse::after, .hero.is-locked .dial-pulse::before { animation: none; }
}

/* return visit in the same session: same build, about twice as fast */
html.build-fast .hero-word, html.build-fast .hero-scrub { animation-delay: 0.3s; animation-duration: 0.6s; }
html.build-fast .hero-line:nth-child(1) > span { animation-delay: 0.85s; }
html.build-fast .hero-line:nth-child(2) > span { animation-delay: 0.95s; }
html.build-fast .clip { animation-delay: 1.3s; }
html.build-fast .hero-sub { animation-delay: 1.1s; }
html.build-fast .hero-cta { animation-delay: 1.2s; }
html.build-fast .hero-ticker { animation-delay: 1.3s; }
html.build-fast .stage-rec { animation-delay: 1.5s; }
html.build-fast .hdr .logo, html.build-fast .hdr-nav a, html.build-fast .hdr-inner > .btn, html.build-fast .burger { animation-delay: calc(0.3s + var(--n, 0) * 0.04s); }

/* ---------- phones (regular height): bigger reels, no dead band between the ring and the headline ---------- */
@media (max-width: 599px) and (min-height: 701px) {
  .hero { --fw: clamp(96px, min(33vw, 15.6svh), 136px); --ring-drop: 46px; }
  .hero-stage { height: calc(var(--fh) + 72px + var(--ring-drop)); }
  .hero-track { bottom: 24px; }
  .stage-hint { bottom: 0; }
  .ring-dial { --D: calc(var(--fw) * 3.9); }
  .dial-pulse { --D: calc(var(--fw) * 3.9); }
  .hero-copy { padding-top: 10px; }
}