/* The story: the sky, street and clock stay pinned while the chapters scroll over them. js/story.js adds .is-live,
   sets --t (0 to 1, the scene's middle crossing the screen) on each scene and the sky (--sky-top, --sky-bot, --night,
   --sun, --doors, --g) on the story. Without .is-live (no JS, reduced motion) the scenes are a plain stack and every
   --t rests at 1. */

.scene { --t: 1; position: relative; padding: 72px 0; }
.scene[data-tone="dark"] { --mf: var(--lit); --mf-2: var(--lit-2); --ml: rgba(255, 255, 255, 0.14); --ml-2: rgba(255, 255, 255, 0.32); background: var(--dusk-1); color: var(--lit); }
.scene[data-tone="light"] { --mf: var(--ink); --mf-2: var(--ink-2); --ml: rgba(17, 19, 43, 0.12); --ml-2: rgba(17, 19, 43, 0.28); background: var(--paper); color: var(--ink); }
.scene :focus-visible { outline-color: currentColor; }
.scene--intro { --hf: #fff; --hf-2: var(--lit-2); --hf-3: #e4e0ff; --hl: rgba(255, 255, 255, 0.16); --hb: #fff; --hbf: var(--dusk-1); background: var(--dusk-2); padding-top: 48px; }
.scene--call { --ma-text: var(--a-call); }
.scene--bridge { --ma-text: var(--a-bridge); }
.scene--camp { --ma-text: var(--a-camp); }
.scene--dash { --ma-text: var(--a-dash); }
.scene--portal { --ma-text: #5b4ce8; }
/* The story's last frame is the same colour as the page after it, so the stage scrolls away with no seam. */
.story + .team { background: var(--bg); }

/* After the story the clock lives on in the header: Thu 9:00am, then 5:30pm Tonight at the form. */
.hdr-clock { display: flex; align-items: flex-end; gap: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; }
.hdr-clock.is-on { opacity: 1; transform: none; }
.flip--sm { font-size: 18px; }
.hdr-clock .flip i { color: var(--tf); }
.hdr-clock .flip em, .hdr-day { color: var(--tf-2); }
.hdr-day { padding-bottom: 2px; font: 600 12.5px/1 var(--font-display); }

.sc-grid { display: grid; gap: 28px; align-items: center; }
.sc-copy { max-width: 36em; }
.scene h1 { font-size: clamp(30px, 8vw, 34px); line-height: 1.05; font-weight: 700; text-wrap: balance; }
.scene h2 { font-size: 28px; line-height: 1.08; font-weight: 700; text-wrap: balance; }
.sc-mod { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ma-text); }
.sc-lede { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--mf-2); }
.scene .btn-ask { margin-top: 20px; }
.sc-then { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--ma-text); font-size: 15px; line-height: 1.5; color: var(--mf); max-width: 32em; }
.scene--intro .lede { margin-top: 14px; color: var(--hf-3); }
.scene--intro .ctas { margin-top: 20px; }
.sc-hint { margin-top: 22px; font-size: 14px; color: var(--lit-2); }
.sc-hint::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }

.story { --st-h: 68px; }
.stage > .st-sky, .stage > .street, .story > .st-top { display: none; }

/* Live: the backdrop (sky, street) and the clock bar stay pinned; the chapters scroll over them like any page.
   It starts under the sticky header, so the backdrop fills the screen from the first frame. All three share one grid
   cell rather than pulling up with negative margins, so the pinned layers stop where the story ends. */
.story.is-live { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: calc(-1 * var(--hdr-h)); --hf: #fff; --hf-2: var(--lit-2); }
.story.is-live > * { grid-area: 1 / 1; }
.story.is-live[data-tone="light"] { --hf: var(--ink); --hf-2: #5b3fe0; }
.is-live .stage {
  position: sticky; top: 0; align-self: start; height: 100svh; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top, #2a2170), var(--sky-bot, #3b2f86));
}
.is-live .stage > .st-sky, .is-live .stage > .street { display: block; }
/* The clock bar sits above the chapters; a fade of sky behind it keeps content passing underneath tidy. */
.is-live > .st-top {
  display: block; position: sticky; top: var(--hdr-h); z-index: 3; align-self: start; height: var(--st-h);
  color: var(--lit); background: linear-gradient(180deg, var(--sky-top, #2a2170) 0 70%, transparent);
}
.story[data-tone="light"] > .st-top { color: var(--ink); }
.is-live > .st-top { transition: opacity 0.3s ease, transform 0.3s ease; }
.is-live.at-hero > .st-top { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.is-live .scenes { position: relative; z-index: 1; }
.is-live .scene { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr-h) + var(--st-h) + 24px) 0 96px; background: none; }
.is-live .scene > .wrap { width: 100%; }
.is-live .sc-hint { opacity: calc(1 - clamp(0, (var(--t) - 0.5) * 8, 1)); }

.st-top { padding-top: 10px; }
.st-top-in { display: flex; align-items: center; gap: 16px; }
.st-clock { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.st-clock .flip--md { font-size: 28px; }
.st-day { padding-bottom: 3px; font: 600 14px/1 var(--font-display); color: var(--hf-2); }
.st-rail { flex: 1; min-width: 0; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.st-rail a { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 44px; color: inherit; text-decoration: none; font: 600 0/1.1 var(--font-display); opacity: 0.7; }
.st-rail a[aria-current] { opacity: 1; }
.st-rail i { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
.st-rail b { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); border-radius: 4px; background: currentColor; }
.st-rail span { display: none; }

.st-sky { position: absolute; inset: 0; pointer-events: none; }
.st-sky .sky-stars { opacity: calc(var(--night, 0.7) * 0.75); transform: translateY(calc(var(--g, 0) * -240px)); }
.st-moon {
  position: absolute; top: calc(var(--hdr-h) + 96px); right: calc(6% + var(--g, 0) * 50%); width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset -10px 5px 0 0 #e9e4ff; filter: drop-shadow(0 0 16px rgba(201, 190, 255, 0.45)); opacity: var(--night, 0.7);
}
.st-sun {
  position: absolute; right: 4%; top: calc(80% - var(--sun, 0) * 60%); width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, #ffd9a8 0 30%, rgba(255, 190, 130, 0.45) 31%, rgba(255, 170, 120, 0) 70%); opacity: clamp(0, var(--sun, 0) * 1.6, 1);
}

.stage > .street--stage { position: absolute; left: 0; bottom: 0; width: 100%; height: 56px; }
.street--stage .st-bld { fill: color-mix(in srgb, #0d0b27 calc(var(--night, 0.7) * 100%), #e6dcf3); transition: none; }
.street--stage .st-bay { fill: color-mix(in srgb, #1a1740 calc(var(--night, 0.7) * 100%), #3d3550); transition: none; }
.street--stage .st-door { fill: color-mix(in srgb, #1a1740 calc(var(--night, 0.7) * 100%), #cfc3e8); transform: scaleY(calc(1 - var(--doors, 0) * 0.72)); transition: none; }
.street--stage .st-sign { fill: color-mix(in srgb, #1d1752 calc(var(--night, 0.7) * 100%), #d8cdee); transition: none; }
.street--stage .st-sign-t { fill: color-mix(in srgb, #a59fdc calc(var(--night, 0.7) * 100%), #5a3b8a); transition: none; }
.street--stage .st-off { fill: color-mix(in srgb, #2a2170 calc(var(--night, 0.7) * 100%), #d8cdee); transition: none; }
.street--stage .st-win { opacity: var(--night, 0.7); transition: none; }

@media (max-width: 899px) {
  .hdr-actions { display: flex; }
  .hdr-actions .btn-night { display: none; }
  .is-live .scene { padding-bottom: 72px; }
}

@media (min-width: 900px) {
  .scene { padding: 120px 0; }
  .scene h1 { font-size: 60px; }
  .scene h2 { font-size: 46px; }
  .sc-lede { margin-top: 18px; font-size: 18px; }
  .sc-then { margin-top: 18px; font-size: 16px; }
  .sc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; }
  .scene--intro .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .scene--intro .sc-copy { max-width: 820px; }
  .scene--intro .lede { font-size: 19px; margin-top: 24px; max-width: 34em; }
  .scene--intro .ctas { margin-top: 34px; }
  .scene .btn-ask { margin-top: 28px; }

  .story { --st-h: 104px; }
  .is-live .scene { padding-bottom: 130px; }
  /* Desktop chapters hold far less than a screen, so they size to their content; goTo still centres each one. */
  .is-live .scene:not(.scene--intro) { min-height: 0; padding: 136px 0; }
  .st-top { padding-top: 18px; }
  .st-top-in { gap: 36px; }
  .st-clock .flip--md { font-size: 44px; }
  .st-day { font-size: 17px; padding-bottom: 6px; }
  .st-rail { gap: 10px; }
  .st-rail a { font-size: 13px; }
  .st-rail span { display: block; font-size: 12px; font-weight: 500; }
  .st-moon { width: 60px; height: 60px; box-shadow: inset -14px 6px 0 0 #e9e4ff; top: calc(var(--hdr-h) + 140px); }
  .st-sun { width: 360px; height: 360px; right: 8%; }
  .stage > .street--stage { height: 110px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hdr-day { display: none; }
}