/* ============================================================
   STARFOREST STUDIO — the observatory
   one living night sky · films as star-framed foreground screens
   no decorative boxes: type scale, hairlines, dotted leaders
   ============================================================ */

:root {
  --stage: #0A0C0D;
  --bone: #F0EEE9;
  --bone-dim: rgba(237, 233, 223, 0.55);
  --green: #46D3CC;
  --green-dim: rgba(70, 211, 204, 0.55);
  --amber: #F2A445;
  --red: #FF4D5E;
  --line: rgba(237, 233, 223, 0.14);
  --font-display: "Anton", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--bone);
  background: var(--stage);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; padding: 0; }

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.green { color: var(--green); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.dim { color: var(--bone-dim); }
.up { color: var(--green); }
.down { color: var(--red); }
.center { text-align: center; }

/* ============================================================
   CUTTING-ROOM LAYERS
   ============================================================ */

#board { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 105% 88% at 50% 44%, transparent 44%, rgba(0, 0, 0, 0.66) 100%);
}
.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   HUD
   ============================================================ */

.hud-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 3vw, 40px);
  background: linear-gradient(to bottom, rgba(10, 9, 8, 0.7), transparent);
}
.wordmark { color: var(--bone); letter-spacing: 0.18em; }
.wordmark .spark { color: var(--green); }
.cta-pill {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 22px; border-radius: 999px;
  background: var(--bone); color: #141210;
  font-weight: 600; font-size: 0.9rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
}
.cta-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(237, 233, 223, 0.35); }

.hud-progress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 20;
  background: rgba(237, 233, 223, 0.08);
}
.hud-progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--green), var(--amber));
  transform-origin: left center; transform: scaleX(0);
}

/* ============================================================
   SCENES
   ============================================================ */

main { position: relative; z-index: 5; }
.scene { position: relative; }
#sc-hero      { height: 170vh; }
#sc-signal    { height: 470vh; }
#sc-jaguar    { height: 300vh; }
#sc-letstrack { height: 300vh; }
#sc-gucci     { height: 300vh; }
#sc-score     { height: 300vh; }
#sc-pilot     { height: 300vh; }
#sc-dawn      { height: 220vh; }

.scene .pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  display: grid; place-items: center;
}
.beat {
  grid-area: 1 / 1;
  width: min(1080px, calc(100% - 48px));
  margin-inline: auto;
  text-align: center;
  will-change: transform, opacity;
  /* separation from the footage behind */
  text-shadow: 0 1px 3px rgba(5, 6, 7, 0.6), 0 4px 28px rgba(5, 6, 7, 0.55);
}
.film-narrate, .film-copy { text-shadow: 0 1px 3px rgba(5, 6, 7, 0.6), 0 4px 28px rgba(5, 6, 7, 0.55); }
html.js .beat { opacity: 0; }

/* ---------- type ---------- */
.mega {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  line-height: 1.02; letter-spacing: 0.005em;
}
.big {
  font-weight: 650;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.3; letter-spacing: -0.015em;
  max-width: 21em; margin-inline: auto;
}
.sub {
  margin-top: 26px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--bone-dim);
  max-width: 520px; margin-inline: auto;
}
.kicker { color: var(--green); margin-bottom: 30px; }
.scene-kicker { margin-bottom: 40px; opacity: 0.9; }
.narrate {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  letter-spacing: -0.005em;
  color: var(--bone-dim);
  margin-bottom: 44px;
}
.btn-bone {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 38px; padding: 16px 34px; min-height: 44px;
  border-radius: 999px; background: var(--bone); color: #141210;
  font-weight: 650; font-size: 1rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
}
.btn-bone:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(237, 233, 223, 0.4); }
.proof { margin-top: 28px; font-size: 0.9rem; color: var(--bone-dim); }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: var(--green-dim);
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); }
}

/* ============================================================
   THE SIGNAL — editorial leaderboard, no boxes
   ============================================================ */

.board {
  list-style: none; padding: 0;
  width: min(760px, 100%); margin-inline: auto;
  text-align: left;
}
.brow {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 84px auto;
  gap: 18px; align-items: baseline;
  padding: 17px 2px 15px;
  opacity: 0; transform: translateY(20px);
  will-change: transform, opacity;
}
.bidx { color: var(--bone-dim); font-size: 0.66rem; }
.bname {
  font-weight: 650;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bname em { font-style: normal; font-size: 0.56rem; letter-spacing: 0.16em; color: var(--bone-dim); margin-left: 10px; }
.bmom { font-size: 0.72rem; }
.bval {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  letter-spacing: 0.01em;
  text-align: right;
}
.bline {
  position: absolute; left: 0; bottom: 0;
  width: var(--w); height: 2px;
  background: linear-gradient(90deg, rgba(70, 211, 204, 0.25), var(--green));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.brow.is-in .bline { transform: scaleX(1); }
.brow { border-bottom: 1px solid rgba(237, 233, 223, 0.07); }
.brow:not(.is-hot) .bname, .brow:not(.is-hot) .bval { color: var(--bone-dim); }
.brow.is-hot .bname { color: var(--bone); }
.brow.is-hot .bval { color: var(--green); text-shadow: 0 0 22px rgba(70, 211, 204, 0.4); }
.board-payoff {
  margin-top: 36px; text-align: center;
  font-weight: 650;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  letter-spacing: -0.015em;
}

/* ---------- the field ---------- */
.ghosts { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.ghost {
  position: absolute;
  width: clamp(120px, 14vw, 200px); aspect-ratio: 9 / 14;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--g1), var(--g2));
  opacity: 0.45; will-change: transform;
}
.ghost .tag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 9px; font-size: 0.56rem; border-radius: 8px;
  background: rgba(5, 5, 6, 0.8); color: var(--bone); white-space: nowrap;
}
.g1 { left: 6%; top: 9%; } .g2 { right: 8%; top: 5%; }
.g3 { left: 15%; bottom: 7%; } .g4 { right: 15%; bottom: 11%; }
.dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot-green { background: var(--green); }
.dot-red { background: var(--red); }

/* ---------- the gap — choreographed typography ---------- */
.dead { display: flex; flex-direction: column; gap: 14px; align-items: center; will-change: transform, opacity; }
.strike {
  position: relative;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  letter-spacing: 0.22em;
  color: var(--bone-dim);
}
.strike::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 2px;
  background: var(--red);
  transform: scaleX(var(--sx, 0));
  transform-origin: left center;
}
html.js .b-gap .strike, html.js .b-gap .script-quote, html.js .b-gap .script-tags,
html.js .b-gap .script-rev, html.js .b-gap .script-slug { opacity: 0; }
.brief-quote {
  margin-top: 40px;
  font-weight: 650; font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.25; letter-spacing: -0.015em;
  max-width: 18em; margin-inline: auto;
  will-change: transform, opacity;
}
.underline-green {
  color: var(--green);
  background-image: linear-gradient(var(--green-dim), var(--green-dim));
  background-repeat: no-repeat;
  background-size: var(--uw, 0%) 3px;
  background-position: 0 96%;
}
.brief-tags { margin-top: 26px; color: var(--bone-dim); will-change: transform, opacity; }
.gap-big { margin-top: 44px; will-change: transform, opacity; }
html.js .b-gap .gap-big { opacity: 0; }

/* ---------- stats ---------- */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
.stat {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1;
  text-shadow: 0 0 50px rgba(70, 211, 204, 0.25);
}
.stat-line { margin-top: 14px; font-size: clamp(0.94rem, 1.3vw, 1.1rem); color: var(--bone-dim); max-width: 24ch; margin-inline: auto; }
.stats-note {
  margin-top: clamp(40px, 5vw, 64px);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 550; color: var(--bone-dim);
  max-width: 46ch; margin-inline: auto;
}
.stats-note .green { font-weight: 650; }

/* ============================================================
   FILM SCENES — star-framed foreground screens
   ============================================================ */

.film-stage {
  grid-area: 1 / 1;
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 30px;
}
.film-narrate { margin-bottom: 0; }
html.js .film-narrate { opacity: 0; }

.screen {
  margin: 0;
  aspect-ratio: var(--ar);
  background: #050505;
  position: relative;
  will-change: transform, opacity;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.85);
}
html.js .screen { opacity: 0; }
.film-wide .screen { width: min(880px, 100%); }
.film-tall .screen { height: min(64vh, 560px); }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.film-copy { position: relative; width: 100%; min-height: 110px; }
.film-copy .beat { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.film-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.1; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.sig { margin-bottom: 12px; letter-spacing: 0.22em; }
.caption { margin-top: 16px; color: var(--bone-dim); font-size: 0.6rem; }

/* gucci: monolith + side copy on desktop */
.film-tall { flex-direction: column; }
@media (min-width: 961px) {
  .film-tall { display: grid; grid-template-columns: auto minmax(0, 460px); gap: 20px 72px; align-items: center; justify-content: center; }
  .film-tall .film-copy { min-height: 160px; text-align: left; }
  .film-tall .film-copy .beat { align-items: flex-start; text-align: left; }
}

/* ============================================================
   SCOREBOARD — end-credits ledger, no box
   ============================================================ */

.ledger { width: min(640px, 100%); margin-inline: auto; text-align: left; }
.l-row {
  display: flex; align-items: baseline;
  padding: 13px 0;
  font-size: 0.74rem; color: var(--bone-dim);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.l-row b { color: var(--bone); font-weight: 600; white-space: nowrap; }
.l-row b.green { color: var(--green); }
.l-row b.red { color: var(--red); }
.l-row .dots {
  flex: 1; margin: 0 16px;
  border-bottom: 2px dotted rgba(237, 233, 223, 0.22);
  transform: translateY(-4px);
}
.b-readout .big { margin-top: 44px; }

.founder-line {
  font-weight: 550; font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.3rem);
  line-height: 1.4; letter-spacing: -0.01em;
  max-width: 24em; margin-inline: auto;
}
.founder-name { margin-top: 36px; font-weight: 700; font-size: 1.05rem; }
.founder-meta { margin-top: 8px; color: var(--bone-dim); }

/* ============================================================
   PILOT — the rail, no boxes
   ============================================================ */

.pilot-wrap {
  grid-area: 1 / 1;
  width: min(1060px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 40px clamp(48px, 6vw, 96px);
  align-items: center;
  text-align: left;
}
.pilot-qualifier { margin-top: 14px; color: var(--bone-dim); font-size: 0.6rem; }
.pilot-wrap .narrate { margin-bottom: 22px; }
.pilot-wrap .big { font-size: clamp(1.3rem, 2.3vw, 1.9rem); max-width: none; margin: 0; }
.pilot-cta .btn-bone { margin-top: 30px; }
html.js .pilot-wrap .narrate, html.js .pilot-wrap .big, html.js .pilot-qualifier,
html.js .rail-node, html.js .pilot-cta { opacity: 0; }
.pilot-wrap .narrate, .pilot-wrap .big, .pilot-qualifier, .rail-node, .pilot-cta { will-change: transform, opacity; }

.rail { position: relative; margin: 0; text-align: left; padding-left: 34px; }
.rail-line {
  position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--green), rgba(70, 211, 204, 0.15));
  transform: scaleY(0); transform-origin: top center;
  will-change: transform;
}
.rail-node { position: relative; padding: 0 0 26px; }
.rail-node:last-child { padding-bottom: 0; }
/* clip-marker styling: little timeline clips instead of dots */
.node-dot {
  position: absolute; left: -37px; top: 6px;
  width: 18px; height: 12px; border-radius: 3px;
  background: rgba(70, 211, 204, 0.14);
  border: 1.5px solid var(--green);
  box-shadow: 0 0 14px rgba(70, 211, 204, 0.45);
}
.node-dot::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 1.5px; background: var(--green); opacity: 0.7;
  transform: translateY(-50%);
}
.rail-node h4 { font-weight: 650; font-size: 1rem; margin-top: 4px; }
.rail-node p { margin-top: 2px; color: var(--bone-dim); font-size: 0.9rem; max-width: 60ch; }
.pilot-note { margin-top: 10px; color: var(--bone-dim); font-size: 0.84rem; }

/* short viewports: keep the whole rail inside the pin */
@media (max-height: 700px) {
  .rail-node { padding-bottom: 14px; }
  .rail-node p { font-size: 0.84rem; }
  .pilot-wrap .narrate { margin-bottom: 12px; }
}

/* ============================================================
   FAQ — hairlines only
   ============================================================ */

.faq-flow {
  position: relative;
  width: min(760px, calc(100% - 48px));
  margin-inline: auto;
  padding: 14vh 0 18vh;
}
.faq-list { margin-top: 40px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; padding: 24px 4px; min-height: 44px;
  font-weight: 650; font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: -0.01em;
}
.faq-icon { position: relative; flex: none; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; background: var(--green);
  transform: translateY(-50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.open .faq-icon::after { transform: translateY(-50%) rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 4px 26px; color: var(--bone-dim); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between;
  width: min(1100px, calc(100% - 48px));
  margin-inline: auto;
  padding: 40px 0 56px;
  color: var(--bone-dim); font-size: 0.62rem;
}
.footer a:hover { color: var(--bone); }

/* ============================================================
   STATIC MODE (prefers-reduced-motion)
   ============================================================ */

html.static-mode #board, html.static-mode .grain, html.static-mode .hud-progress,
html.static-mode .scroll-hint { display: none; }
html.static-mode .scene { height: auto !important; }
html.static-mode .scene .pin { position: static; height: auto; padding: 16vh 0; display: block; }
html.static-mode .beat, html.static-mode .film-narrate, html.static-mode .screen,
html.static-mode .pilot-wrap .narrate, html.static-mode .pilot-wrap .big,
html.static-mode .pilot-qualifier,
html.static-mode .rail-node, html.static-mode .pilot-cta {
  opacity: 1 !important; transform: none !important;
}
html.static-mode .beat { margin-bottom: 10vh; }
html.static-mode .b-gap .strike, html.static-mode .b-gap .script-quote,
html.static-mode .b-gap .script-tags, html.static-mode .b-gap .script-rev,
html.static-mode .b-gap .script-slug, html.static-mode .b-gap .gap-big,
html.static-mode .cr-item, html.static-mode .rival-roll,
html.static-mode .b-dawn .credit-line, html.static-mode .finale-pre,
html.static-mode .title-drop, html.static-mode #finaleSub, html.static-mode #finaleCta,
html.static-mode .pilot-sub { opacity: 1 !important; transform: none !important; letter-spacing: normal !important; }
html.static-mode .strike::after { transform: scaleX(1); }
html.static-mode .underline-green { background-size: 100% 3px; }
html.static-mode .brow { opacity: 1; transform: none; }
html.static-mode .brow .bline { transform: scaleX(1); }
html.static-mode .l-row { clip-path: none !important; }
html.static-mode .rail-line { transform: scaleY(1); }
html.static-mode .film-copy .beat { position: static; margin-bottom: 4vh; }
html.static-mode .ghosts { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .film-tall .film-copy { text-align: center; }
}

@media (max-width: 760px) {
  .hud-top { padding: 14px 16px; }
  .wordmark { font-size: 0.62rem; }
  .cta-pill { padding: 10px 16px; font-size: 0.8rem; }
  .beat { width: calc(100% - 40px); }
  .brow { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
  .bmom { display: none; }
  .ghost { opacity: 0.28; }
  .g3, .g4 { display: none; }
  .stat-row { grid-template-columns: 1fr; gap: 26px; }
  .gap-big { margin-top: 32px; }
  .pilot-wrap { grid-template-columns: 1fr; gap: 30px; }
  .pilot-cta .btn-bone { margin-top: 18px; }
  .film-wide .screen { width: 100%; }
  .film-tall .screen { height: min(56vh, 480px); }
  .film-copy { min-height: 130px; }
  .ledger { font-size: 0.66rem; }
  .l-row .dots { margin: 0 8px; }
  .footer { flex-direction: column; gap: 10px; }
}

@media (max-width: 380px) {
  body { font-size: 15px; }
  .mega { font-size: 2.35rem; }
  .film-line { font-size: 1.3rem; }
  .l-row { flex-wrap: wrap; }
  .l-row .dots { display: none; }
  .l-row b { margin-left: auto; }
}

/* ============================================================
   TITLE-SEQUENCE SCAFFOLDING (A+B blend)
   credits language · screenplay page · end-credits roll
   ============================================================ */

/* ---------- credits voice ---------- */
.credit-line {
  color: var(--bone-dim);
  letter-spacing: 0.34em;
  font-size: 0.66rem;
  margin-bottom: 30px;
}
.credit-line .green { color: var(--green); }
.proof-credit {
  margin-top: 30px;
  color: var(--bone-dim);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
}
.cast-header {
  color: var(--bone-dim);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  margin-bottom: 26px;
}
.cast-header.center { text-align: center; }

/* hero opening-titles entrance (time-based, plays once) */
@keyframes title-in {
  0% { opacity: 0; letter-spacing: 0.5em; }
  100% { opacity: 1; letter-spacing: 0.34em; }
}
@keyframes mega-in {
  0% { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes soft-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.b-hero .enter-1 { animation: title-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.b-hero .enter-2 { animation: mega-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }
.b-hero .enter-3 { animation: soft-in 1s ease 1.5s both; }

/* ---------- asymmetric title-card anchors ---------- */
.anchor-left { text-align: left; padding-left: clamp(0px, 4vw, 60px); }
.anchor-left .board { margin-left: 0; }
.anchor-left .narrate { max-width: 30em; }
.anchor-right { text-align: right; padding-right: clamp(0px, 5vw, 80px); }
.anchor-right .big { margin-right: 0; margin-left: auto; max-width: 15em; }
.anchor-right .narrate { margin-left: auto; max-width: 30em; }

/* ---------- casting board ---------- */
.brole { color: var(--bone-dim); font-size: 0.58rem; letter-spacing: 0.22em; }
.brow.is-hot .brole { color: var(--green); }
.anchor-left .board-payoff { text-align: left; }

/* ---------- rival credits roll ---------- */
.rival-roll {
  position: absolute;
  left: clamp(8px, 6vw, 90px);
  top: 50%;
  width: min(340px, 38vw);
  text-align: left;
  will-change: transform, opacity;
  pointer-events: none;
}
html.js .rival-roll { opacity: 0; }
.rival-roll p {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(240, 238, 233, 0.08);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}
.rival-roll b { font-weight: 500; white-space: nowrap; }
.rival-roll b.up { color: var(--green); }
.rival-roll b.down { color: var(--red); }

/* ---------- the screenplay page ---------- */
.script {
  width: min(620px, 100%);
  margin-inline: auto;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
}
.script-rev {
  color: var(--bone-dim);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}
.script-slug {
  font-weight: 700;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 16px;
}
.script-slug.green-slug { color: var(--green); margin-top: 30px; }
.script .dead { display: block; }
.script-line {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: var(--bone-dim);
  padding: 5px 0 5px 42px;
}
.script-quote {
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  color: var(--bone);
  padding-left: 42px;
  max-width: 24ch;
  will-change: transform, opacity;
}
.script-tags {
  margin-top: 22px;
  padding-left: 42px;
  color: var(--bone-dim);
  will-change: transform, opacity;
}
.b-gap .gap-big { margin-top: 40px; }

/* ---------- billing blocks ---------- */
.stat-bill {
  color: var(--bone-dim);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  margin-bottom: 12px;
}

/* ---------- end-credits roll ---------- */
.credits-roll {
  width: min(560px, 100%);
  margin-inline: auto;
  margin-bottom: 40px;
  will-change: transform;
}
.cr-item { padding: 15px 0; will-change: transform, opacity; }
html.js .cr-item { opacity: 0; }
.cr-label {
  color: var(--bone-dim);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
}
.cr-value {
  margin-top: 6px;
  font-weight: 650;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- the release card (pilot) ---------- */
.release-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.pilot-sub {
  margin-top: 14px;
  font-weight: 550;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--bone-dim);
  will-change: transform, opacity;
}
html.js .pilot-sub { opacity: 0; }
.sched-when { color: var(--green); font-size: 0.6rem; letter-spacing: 0.26em; }
.sched-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.rail-node h4 + p, .rail-node .sched-name + p { margin-top: 4px; }

/* ---------- the title drop (finale) ---------- */
html.js .b-dawn .credit-line, html.js .finale-pre, html.js .title-drop,
html.js #finaleSub, html.js #finaleCta { opacity: 0; }
.b-dawn .credit-line { margin-bottom: 34px; }
.finale-pre {
  font-weight: 650;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing: -0.01em;
  will-change: transform, opacity;
}
.title-drop {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 10vw, 8.4rem);
  line-height: 1;
  margin-top: 18px;
  will-change: transform, opacity, letter-spacing;
  text-shadow: 0 4px 20px rgba(5, 6, 7, 0.5), 0 10px 80px rgba(5, 6, 7, 0.5);
}
.b-dawn .sub { margin-top: 26px; }
.b-dawn .btn-bone, .b-dawn .sub { will-change: transform, opacity; }

/* ---------- responsive for the new scaffolding ---------- */
@media (max-width: 960px) {
  .rival-roll { position: static; width: 100%; margin-bottom: 30px; transform: none !important; }
  .anchor-right { text-align: left; padding-right: 0; }
  .anchor-right .big, .anchor-right .narrate { margin-left: 0; }
}
@media (max-width: 760px) {
  .anchor-left { padding-left: 0; }
  .brow { grid-template-columns: minmax(0, 1fr) auto; }
  .brole { grid-column: 1 / -1; }
  .bmom { display: none; }
  .script-line, .script-quote, .script-tags { padding-left: 16px; }
  .title-drop { font-size: clamp(2.6rem, 13vw, 4rem); }
}