/*
  Optletics showcase stylesheet.

  How it is organised
  1. Fonts and registered custom properties
  2. Tokens (light, dark, ink band) built on the brand kit in assets/tokens/tokens.css
  3. Base elements and shared pieces (buttons, jersey tags, kickers)
  4. Fixed furniture: progress line, Reduce motion toggle, camera iris
  5. Scenes: opening, play (watch live, film, focus, count), confirm, gates, close
  6. Footer
  7. Simple fades, view transitions, print

  The golden rule: every rule outside an html[data-motion="full"] selector describes
  the finished, still page. That still page is what people get with reduced motion,
  with the Reduce motion toggle on, or with JavaScript off. Everything that moves
  lives under html[data-motion="full"].

  Scenes are driven by two numbers:
    --p  0 to 1 while a pinned scene is stuck to the screen
    --c  0 to 1 while an element crosses the screen
  CSS scroll-driven animations set them where the browser supports that
  (html[data-timeline="css"]). Otherwise js/main.js sets the same properties.
*/

/* ---------- 1. Fonts and registered properties ---------- */

/* BRAND FONTS: self-hosted from assets/fonts/ (SIL Open Font License, licence text beside
   each file). Latin subset, weight axis only, from the Fontsource variable packages
   @fontsource-variable/bricolage-grotesque@5.3.0 and @fontsource-variable/figtree@5.3.0.
   index.html preloads the display face. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/Figtree-Variable.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --c { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --intro { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --page { syntax: '<number>'; inherits: false; initial-value: 0; }

/* Starting values for browsers that do not know @property (js/main.js then sets the numbers) */
:root { --p: 0; --c: 0; --intro: 0; --page: 0; }

@keyframes scene-p { from { --p: 0; } to { --p: 1; } }
@keyframes scene-c { from { --c: 0; } to { --c: 1; } }
@keyframes iris-intro { from { --intro: 0; } to { --intro: 1; } }
@keyframes page-progress { from { --page: 0; } to { --page: 1; } }

/* Where the browser supports scroll-driven animations, the scroll position itself plays these.
   A pinned scene runs 0 to 1 while it covers the screen; a passing element while it crosses it. */
html[data-motion="full"][data-timeline="css"] [data-scene="pin"] {
  animation: scene-p linear both;
  animation-timeline: view(block);
  animation-range: contain 0% contain 100%;
}
html[data-motion="full"][data-timeline="css"] .season[data-scene="pass"] {
  animation: scene-c linear both;
  animation-timeline: view(block);
  animation-range: cover 0% cover 100%;
}

/* ---------- 2. Tokens ---------- */

:root {
  --ink: var(--opt-ink, #0F1E2E);
  --field: var(--opt-field, #2E6E58);
  --cone: var(--opt-cone, #F07F2B);
  --slate: var(--opt-slate, #3B4A58);
  --mist: var(--opt-mist, #EEF2EF);
  --chalk: var(--opt-chalk, #FFFFFF);

  --bg: var(--mist);
  --surface: var(--chalk);
  --surface-2: #E1E8E4;
  --text: var(--ink);
  --text-2: var(--slate);
  --line: rgba(15, 30, 46, .16);
  --ok-text: var(--field);
  --focus: var(--ink);
  --tint: rgba(46, 110, 88, .1);
  --shadow: 0 1px 2px rgba(15, 30, 46, .06), 0 14px 36px -10px rgba(15, 30, 46, .22);
  --shadow-lift: 0 2px 4px rgba(15, 30, 46, .08), 0 34px 70px -18px rgba(15, 30, 46, .45);
  --iris-blade: #0F1E2E;
  --iris-edge: rgba(255, 255, 255, .16);

  --font-display: var(--opt-font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  --font-body: var(--opt-font-body, 'Figtree', system-ui, sans-serif);
  --r-card: var(--opt-radius-card, 20px);
  --r-btn: var(--opt-radius-button, 999px);

  --gutter: clamp(20px, 5vw, 64px);
  --step-0: clamp(1rem, .95rem + .25vw, 1.1875rem);
  --step-1: clamp(1.125rem, 1.02rem + .5vw, 1.4375rem);
  --step-h2: clamp(1.75rem, 1.15rem + 2.6vw, 3.375rem);
  --step-h1: clamp(2.125rem, 1.1rem + 5vw, 5.5rem);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.3, 1.5, .5, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --surface: #182B3F;
    --surface-2: #233A52;
    --text: var(--chalk);
    --text-2: #C9D3DA;
    --line: rgba(255, 255, 255, .2);
    --ok-text: #8FD1B7;
    --focus: var(--chalk);
    --tint: rgba(143, 209, 183, .12);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -10px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 34px 70px -18px rgba(0, 0, 0, .8);
    --iris-blade: #0A1622;
    --iris-edge: rgba(255, 255, 255, .2);
  }
}

/* A dark band inside the light page. In dark mode it steps one shade deeper than the page. */
.band-ink {
  --bg: var(--ink);
  --surface: #182B3F;
  --surface-2: #233A52;
  --text: var(--chalk);
  --text-2: #C9D3DA;
  --line: rgba(255, 255, 255, .2);
  --ok-text: #8FD1B7;
  --focus: var(--chalk);
}
@media (prefers-color-scheme: dark) {
  .band-ink { --bg: #0A1622; }
}

/* ---------- 3. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-1); letter-spacing: -.015em; line-height: 1.15; }
p { text-wrap: pretty; }
strong { font-weight: 700; }
abbr[title] { text-decoration: none; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100%, 1240px); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  background: var(--cone); color: var(--ink); font-weight: 700; text-decoration: none;
  padding: 12px 18px; border-radius: var(--r-btn);
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

.scene { position: relative; background: var(--bg); color: var(--text); }

.kicker {
  display: flex; align-items: center; gap: .65em;
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  margin-bottom: 1.1em;
}
.kicker-num {
  display: inline-grid; place-items: center; min-width: 2.3em; height: 1.75em; padding-inline: .45em;
  background: var(--cone); color: var(--ink); border-radius: 8px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.jersey {
  display: inline-grid; place-items: center; min-width: 1.85em; height: 1.6em; padding-inline: .3em;
  background: var(--cone); color: var(--ink); border-radius: .45em;
  font-family: var(--font-display); font-weight: 800; font-size: .92em; line-height: 1;
  font-variant-numeric: tabular-nums; vertical-align: .05em;
}
.jersey-lg { font-size: 1.75rem; border-radius: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.35em;
  border: 2px solid transparent; border-radius: var(--r-btn);
  font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--cone); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn-quiet { background: var(--surface-2); color: var(--text); }
/* Hover looks only where there is a real pointer: on a touch screen they stick after a tap */
@media (hover: hover) {
  .btn-primary:hover { background: #F58E42; }
  .btn-ghost:hover, .btn-quiet:hover { background: var(--tint); }
}
/* No double-tap zoom delay on the things people tap */
.btn, .pick, .motion-toggle, .sport-opt, summary { touch-action: manipulation; }

.svg-num { font-family: var(--font-display); font-weight: 800; fill: #0F1E2E; }

/* ---------- 4. Fixed furniture ---------- */

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; display: none;
  /* stays clear of a notch or rounded corner if the page is ever shown edge to edge */
  left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
}
.progress-bar { display: block; height: 100%; background: var(--cone); transform-origin: 0 50%; scale: var(--page) 1; }
html[data-motion="full"] .progress { display: block; }
html[data-motion="full"][data-timeline="css"] .progress-bar {
  animation: page-progress linear both;
  animation-timeline: scroll(root block);
}

.motion-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 70;
  top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 14px 4px 6px;
  -webkit-tap-highlight-color: transparent;
  background: var(--chalk); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-btn);
  font: 700 .875rem/1 var(--font-body); cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(15, 30, 46, .4);
}
html.js .motion-toggle { display: inline-flex; }
.motion-toggle:focus-visible { outline-color: var(--cone); outline-offset: 3px; border-radius: var(--r-btn); box-shadow: 0 0 0 3px var(--ink), 0 6px 18px -6px rgba(15, 30, 46, .4); }
.motion-toggle-track { position: relative; width: 40px; height: 26px; border-radius: 999px; background: #C7D0CB; border: 2px solid var(--ink); }
.motion-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: translate .2s ease; }
.motion-toggle[aria-pressed="true"] .motion-toggle-track { background: var(--cone); }
.motion-toggle[aria-pressed="true"] .motion-toggle-knob { translate: 14px 0; }
.motion-toggle-label::after { content: ': off'; font-weight: 500; }
.motion-toggle[aria-pressed="true"] .motion-toggle-label::after { content: ': on'; }

/* Camera iris. Six wedge blades whose inner edges always form a hexagon. */
.iris { display: none; }
html[data-motion="full"] .iris {
  display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; overflow: clip;
  /* 1 while the blades are shut around the join between the opening and the play scene.
     The join is 130 units of scroll long: 45 to close, 40 shut, 45 to open (130 / 45 = 2.889). */
  --shut: clamp(0, min(var(--c) * 2.889, (1 - var(--c)) * 2.889), 1);
  --open: min(var(--intro), calc(1 - var(--shut)));
  animation: iris-intro 1.5s cubic-bezier(.5, 0, .2, 1) .3s both;
}
html[data-motion="full"][data-timeline="css"] body { timeline-scope: --joint; }
html[data-motion="full"][data-timeline="css"] .joint { view-timeline-name: --joint; view-timeline-axis: block; }
html[data-motion="full"][data-timeline="css"] .iris {
  animation: iris-intro 1.5s cubic-bezier(.5, 0, .2, 1) .3s both, scene-c linear both;
  animation-timeline: auto, --joint;
  animation-range: normal, cover 0% cover 100%;
}
/* Without typed custom properties the stylesheet cannot run the opening: main.js does (see boot.js) */
html.no-typed[data-motion="full"] .iris { animation: none; }
.iris-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.iris-rotor { rotate: calc((1 - var(--open)) * -70deg + var(--c) * 150deg); will-change: transform; }
.iris-blade {
  fill: var(--iris-blade); stroke: var(--iris-edge); stroke-width: 2; vector-effect: non-scaling-stroke;
  translate: 0 calc((60 + 880 * var(--open) * var(--open)) * -1px);
  will-change: transform;
}
.iris-lens { fill: #F07F2B; opacity: clamp(0, calc(1 - var(--open) * 5), 1); }
.iris-ring { stroke: #FFFFFF; stroke-width: 30; opacity: clamp(0, calc(1 - var(--open) * 5), 1); scale: calc(1 + var(--open) * 5); }
.iris-slate {
  position: absolute; left: 0; right: 0; top: calc(50% + min(26vw, 26vh) + 28px); text-align: center;
  padding-inline: var(--gutter);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: #FFFFFF;
  opacity: clamp(0, calc((var(--shut) - .8) * 6), 1);
}

/* ---------- 5a. Scene 1: opening ---------- */

.hero .stage { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; overflow: clip; padding-block: 88px 56px; }
.hero-rings { position: absolute; inset: 0; pointer-events: none; }
.hero-rings svg { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: max(120vw, 120vh); height: max(120vw, 120vh); max-width: none; }
.hero-ring { fill: none; stroke: var(--text); stroke-opacity: .09; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hero-ring-b { stroke-dasharray: 2 14; stroke-opacity: .2; stroke-linecap: round; stroke-width: 2.5; }
.hero-inner { position: relative; display: grid; justify-items: center; text-align: center; gap: clamp(14px, 2.2vh, 26px); }

.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.hero-title { display: grid; justify-items: center; font-size: var(--step-h1); line-height: 1; letter-spacing: -.035em; }
.hero-logo { display: block; width: clamp(210px, 34vw, 430px); margin-bottom: clamp(18px, 3.4vh, 44px); color: var(--text); }
.wordmark { width: 100%; height: auto; overflow: visible; }
.hero-line { display: block; overflow: hidden; overflow: clip; padding-block: .04em .14em; margin-bottom: -.14em; }
.hero-line-in { display: block; }
.hero-line-two { color: var(--text); }
.rack { display: inline-block; position: relative; }
.rack::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.02em; height: .09em; background: var(--cone); border-radius: 99px; transform-origin: 0 50%; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--text-2); max-width: 36em; }
.lede strong { color: var(--text); }
.hero-lede { margin-top: clamp(10px, 1.6vh, 20px); }
.hero-meta { font-weight: 600; color: var(--text); }
.hero-cue { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--text); margin-top: clamp(4px, 1.5vh, 18px); }
html:not([data-motion="full"]) .hero-cue { display: none; }
.sample-note { font-size: .8125rem; color: var(--text-2); max-width: 34em; }
@media (max-width: 600px) {
  .hero .stage { padding-block: 68px 24px; }
  .hero-inner { gap: 10px; }
  .hero-logo { margin-bottom: 14px; }
}
.joint { display: none; }

/* The opening is pinned for 70 units of scroll (1 unit = 1% of the screen height). The play
   scene starts underneath it (see .play), so when the iris has shut, main.js switches the
   opening off (.is-covered) and the play scene is already there when the iris opens again.
   The joint is the stretch of scroll that closes and reopens the iris. */
html[data-motion="full"] .hero { height: 170vh; height: 170svh; z-index: 2; }
html[data-motion="full"] .hero.is-covered { visibility: hidden; }
html[data-motion="full"] .hero .stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
html[data-motion="full"] .joint { display: block; position: absolute; left: 0; width: 1px; bottom: 15vh; bottom: 15svh; height: 30vh; height: 30svh; pointer-events: none; }
html[data-motion="full"] .hero-inner { scale: calc(1 + var(--p) * .12); will-change: transform; }
html[data-motion="full"] .hero-rings svg { rotate: calc(var(--p) * 90deg); scale: calc(1 + var(--p) * .45); will-change: transform; }

@keyframes rise { from { translate: 0 115%; } to { translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; scale: 1.14; } to { opacity: 1; scale: 1; } }
@keyframes blades-turn { from { rotate: -120deg; } to { rotate: 0deg; } }
@keyframes play-beat { 0% { scale: 0; } 50% { scale: 1.5; } 72% { scale: .88; } 100% { scale: 1; } }
@keyframes rack-focus { from { filter: blur(.16em); opacity: .25; } to { filter: blur(0); opacity: 1; } }
@keyframes underline-in { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }

html[data-motion="full"] .hero-logo { animation: settle 1.1s var(--ease-out) .75s both; }
html[data-motion="full"] .wm-blades { transform-box: fill-box; transform-origin: 50% 50%; animation: blades-turn 1.5s cubic-bezier(.3, 0, .1, 1) .75s both; }
html[data-motion="full"] .wm-play { transform-box: fill-box; transform-origin: 50% 50%; animation: play-beat .7s cubic-bezier(.3, 0, .3, 1) 1.9s both; }
html[data-motion="full"] .hero-eyebrow { animation: fade-in .8s ease 1.1s both; }
html[data-motion="full"] .hero-line-in { animation: rise .95s var(--ease-out) 1.2s both; }
html[data-motion="full"] .hero-line-two { animation-delay: 1.36s; }
html[data-motion="full"] .rack { animation: rack-focus 1s ease-out 1.5s both; }
html[data-motion="full"] .rack::after { animation: underline-in .7s var(--ease-out) 2.3s both; }
html[data-motion="full"] .hero-lede { animation: fade-in .9s ease 1.8s both; }
html[data-motion="full"] .hero-meta, html[data-motion="full"] .sample-note { animation: fade-in .9s ease 2.1s both; }
html[data-motion="full"] .hero-cue { animation: fade-in .9s ease 2.4s both; }
html[data-motion="full"] .hero-cue .icon { animation: cue-bob 1.6s ease-in-out 3s 6; }

/* ---------- 5b. Scenes 2 to 4: the play ---------- */

.play .stage { padding-block: clamp(56px, 9vh, 120px); }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.beat { max-width: 34em; }
.beat h2 { margin-bottom: .45em; }
.beat p:not(.kicker) { color: var(--text-2); font-size: var(--step-1); line-height: 1.45; }
.layer { min-width: 0; margin-bottom: 40px; }
@media (min-width: 900px) {
  .stage-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(72px, 12vh, 140px); }
  .layer { margin-bottom: 0; }
}

/* The sport switch: three radio buttons drawn as pills. Hidden without JavaScript. */
.sport-switch { display: none; }
html.js .sport-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; grid-column: 1 / -1; }
.sport-label { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; }
.sport-options { display: inline-flex; gap: 6px; }
.sport-opt { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sport-opt input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sport-pill {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 16px 0 12px;
  border: 2px solid var(--text); border-radius: 999px; background: var(--bg); color: var(--text);
  font: 700 .9375rem/1 var(--font-body); white-space: nowrap;
}
/* the chosen sport is filled and its dot is solid, so it never depends on colour alone */
.sport-pill::before { content: ''; flex: none; width: .7em; height: .7em; border-radius: 50%; border: 2px solid currentColor; }
.sport-opt input:checked + .sport-pill { background: var(--cone); border-color: var(--cone); color: var(--ink); }
.sport-opt input:checked + .sport-pill::before { background: currentColor; }
.sport-opt input:focus-visible + .sport-pill { outline: 3px solid var(--focus); outline-offset: 3px; }
html[data-sport="basketball"] .turf-stripes { display: none; }

/* Watch live: the same field inside a drawn phone */
.phone {
  display: grid; width: 100%; max-width: 680px; margin-inline: auto; aspect-ratio: 2 / 1; padding: 8px;
  border-radius: 28px; background: #0A1622; box-shadow: 0 0 0 2px rgba(255, 255, 255, .26), var(--shadow);
}
.phone-screen { position: relative; min-height: 0; border-radius: 20px; overflow: hidden; background: #2E6E58; }
.phone-screen::after { content: ''; position: absolute; left: 6px; top: 50%; width: 7px; height: 24px; margin-top: -12px; border-radius: 99px; background: #0A1622; }
#live-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; }
.live-hud { position: absolute; left: 20px; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.live-hud-top { top: 8px; }
.live-hud-bottom { bottom: 8px; }
.live-flag { display: inline-grid; }
.live-badge, .live-saved {
  grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 8px; border-radius: 999px;
  font: 800 .6875rem/1 var(--font-display); letter-spacing: .1em;
}
/* The LIVE chip: an ink chip with white text and the red recording dot people expect.
   The word says it too, so the state never depends on colour alone. */
.live-badge { background: #0F1E2E; color: #FFFFFF; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 2px rgba(255, 59, 48, .3); }
.live-saved { display: none; background: var(--chalk); color: var(--ink); letter-spacing: .04em; }
.live-saved .icon { width: 1em; height: 1em; }
.live-chip {
  display: inline-flex; align-items: center; gap: .4em; padding: 5px 9px; border-radius: 999px;
  background: rgba(15, 30, 46, .82); color: #FFFFFF; font: 600 .6875rem/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.live-chip strong { font-weight: 800; }
.live-gap { width: .35em; }
.layer-cell { display: none; }

.field { position: relative; aspect-ratio: 10 / 7; border-radius: var(--r-card); overflow: hidden; background: #2E6E58; box-shadow: var(--shadow); }
#field-canvas { width: 100%; height: 100%; }
.field-hud {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: rgba(15, 30, 46, .82); color: #FFFFFF;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.field-hud-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cone); }

.clip-inner { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.clip-face { background: var(--surface); color: var(--text); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.clip-thumb { width: 100%; height: auto; }
.clip-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.clip-play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cone); color: var(--ink); flex: none; }
.clip-meta { display: grid; line-height: 1.25; font-size: .9375rem; }
.clip-meta span { color: var(--text-2); font-size: .8125rem; }
.clip-back { display: grid; align-content: center; gap: 6px; padding: 22px; border: 2px dashed var(--text); }
.statline-tag { display: inline-flex; align-items: center; gap: .4em; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.statline-stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: .95; letter-spacing: -.03em; }
.statline-who { font-weight: 700; font-size: 1.125rem; }
.statline-when { color: var(--text-2); font-variant-numeric: tabular-nums; }
.statline-note { color: var(--text-2); font-size: .8125rem; margin-top: 6px; }

.sheet { background: var(--surface); color: var(--text); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(12px, 1.4em, 22px); font-size: clamp(.8125rem, .76rem + .25vw, 1rem); }
.sheet-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet-table caption { text-align: left; padding-bottom: .7em; }
.sheet-title { font-family: var(--font-display); font-weight: 800; font-size: 1.3em; letter-spacing: -.02em; margin-right: .5em; }
.sheet-sub { color: var(--text-2); font-size: .9em; }
.sheet-table th, .sheet-table td { padding: .46em .3em; text-align: center; border-bottom: 1px solid var(--line); }
.sheet-table thead th { font-family: var(--font-display); font-weight: 700; font-size: .85em; letter-spacing: .06em; color: var(--text-2); }
.sheet-table .col-name { text-align: left; white-space: nowrap; font-weight: 600; padding-left: 0; }
.sheet-table tbody tr:last-child th, .sheet-table tbody tr:last-child td { border-bottom: 0; }
.sheet-table .col-hi { background: var(--tint); }
.cell { font-family: var(--font-display); font-weight: 800; font-size: 1.08em; }
.cell.is-zero { color: var(--text-2); font-weight: 500; }
.total { text-align: left !important; padding-left: .7em !important; white-space: nowrap; }
.total-num { display: inline-block; min-width: 1.5em; font-family: var(--font-display); font-weight: 800; }
.total-bar { display: inline-block; vertical-align: middle; width: clamp(20px, 4.2em, 76px); height: .5em; border-radius: 99px; background: var(--line); overflow: hidden; }
.total-bar span { display: block; height: 100%; border-radius: 99px; background: var(--text); transform-origin: 0 50%; scale: var(--w, 1) 1; }
.sheet-key { color: var(--text-2); font-size: .82em; margin-top: .9em; }
.sheet-callout { margin-top: .5em; font-size: .95em; }
@media (max-width: 479px) {
  .sheet-table .last { display: none; }
  .total-bar { display: none; }
  .sheet-table th, .sheet-table td { padding-inline: .12em; }
}

/* Motion version: one pinned stage, the four beats share one cell, the four pictures share another.
   The scene starts underneath the opening (margin-top) and the iris opens on it.
   Timings are fractions of the scene's scroll. js/main.js (AT) uses the same numbers: change both together.
     0    to .06   hidden behind the shut iris       .36  to .48   the focus
     .06  to .13   the iris opens on the phone       .48  to .585  the clip lifts off
     .17  to .19   LIVE flips to Saved               .62  to .76   the card flips, the sheet arrives
     .22  to .265  the phone hands off to the film   .745 to .81   the card drops onto the sheet
     .265 to .36   the film plays                    .81  to .97   the numbers count up */
html[data-motion="full"] .play { height: 600vh; height: 600svh; margin-top: -100vh; margin-top: -100svh; }
html[data-motion="full"] .play .stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 0; overflow: hidden; overflow: clip;
  container: stage / size;

  /* LIVE holds for the first half of scene 01 (the iris is open from .13), then Saved */
  --k-saved: clamp(0, calc((var(--p) - .17) / .02), 1);
  --k-hand:  clamp(0, calc((var(--p) - .22) / .045), 1);
  --k-clip:  clamp(0, calc((var(--p) - .48) / .105), 1);
  --k-flip:  clamp(0, calc((var(--p) - .62) / .085), 1);
  --k-sheet: clamp(0, calc((var(--p) - .675) / .085), 1);
  --k-drop:  clamp(0, calc((var(--p) - .745) / .065), 1);
  --k-count: clamp(0, calc((var(--p) - .81) / .16), 1);
  /* smoothstep versions */
  --s-hand:  calc(var(--k-hand) * var(--k-hand) * (3 - 2 * var(--k-hand)));
  --s-clip:  calc(var(--k-clip) * var(--k-clip) * (3 - 2 * var(--k-clip)));
  --s-flip:  calc(var(--k-flip) * var(--k-flip) * (3 - 2 * var(--k-flip)));
  --s-sheet: calc(var(--k-sheet) * var(--k-sheet) * (3 - 2 * var(--k-sheet)));
  --s-drop:  calc(var(--k-drop) * var(--k-drop) * var(--k-drop));
  /* beat copy cross-fades */
  --b0-out: clamp(0, calc((var(--p) - .225) / .025), 1);
  --b1-in:  clamp(0, calc((var(--p) - .25) / .03), 1);
  --b1-out: clamp(0, calc((var(--p) - .35) / .025), 1);
  --b2-in:  clamp(0, calc((var(--p) - .375) / .035), 1);
  --b2-out: clamp(0, calc((var(--p) - .595) / .025), 1);
  --b3-in:  clamp(0, calc((var(--p) - .62) / .035), 1);
  /* hand-over points: 0 before, 1 after. Words fade to .35 at most, then cut to the next beat */
  --h1: clamp(0, calc((var(--p) - .25) * 10000), 1);
  --h2: clamp(0, calc((var(--p) - .375) * 10000), 1);
  --h3: clamp(0, calc((var(--p) - .62) * 10000), 1);
}
html[data-motion="full"] .play .stage-grid {
  position: relative; height: 100%;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  gap: 14px; padding-block: 68px 20px; align-items: start;
}
html[data-motion="full"] .play .beat { grid-area: 1 / 1; will-change: transform, opacity; }
html[data-motion="full"] .play .layer { grid-area: 2 / 1; place-self: center; margin: 0; will-change: transform, opacity; }
html[data-motion="full"] .play .layer-cell { display: block; grid-area: 2 / 1; place-self: stretch; visibility: hidden; pointer-events: none; }
html[data-motion="full"] .play .beat h2 { font-size: clamp(1.5rem, 1rem + 2.6cqw, 3.375rem); }
html[data-motion="full"] .play .beat p:not(.kicker) { font-size: clamp(.9375rem, .85rem + .5cqw, 1.4375rem); }
html[data-motion="full"] .play .kicker { margin-bottom: .7em; }

/* The sport switch keeps its "Show the demo for" label in every layout. In one column it has
   its own row between the words and the picture. */
html[data-motion="full"] .play .stage-grid { grid-template-rows: auto auto minmax(0, 1fr); }
html[data-motion="full"] .play .sport-switch { position: static; grid-area: 2 / 1; justify-self: start; gap: 6px 12px; }
html[data-motion="full"] .play .layer, html[data-motion="full"] .play .layer-cell { grid-area: 3 / 1; }

/* On a phone the row is slim. The pills are drawn 32px high; the radio buttons under them
   reach 6px above and below, so the place to tap is still 44px high. */
@container stage (max-width: 639px) {
  html[data-motion="full"] .play .stage-grid { gap: 10px; padding-block: 66px 16px; }
  html[data-motion="full"] .play .sport-label { font-size: .75rem; }
  html[data-motion="full"] .play .sport-pill { min-height: 32px; padding: 0 10px 0 8px; font-size: .8125rem; }
  html[data-motion="full"] .play .sport-opt input { top: -6px; height: calc(100% + 12px); }
}

@container stage (min-width: 900px) and (min-height: 480px) {
  html[data-motion="full"] .play .stage-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(32px, 5cqw, 80px); padding-block: 84px 44px; align-items: center;
  }
  html[data-motion="full"] .play .beat { grid-area: 1 / 1; }
  html[data-motion="full"] .play .layer, html[data-motion="full"] .play .layer-cell { grid-area: 1 / 2; }
  /* In two columns the switch, with its label, sits at the top of the words column,
     level with the Reduce motion switch */
  html[data-motion="full"] .play .sport-switch { position: absolute; grid-area: auto; top: 14px; left: var(--gutter); z-index: 6; }
}

html[data-motion="full"] .beat-0 { opacity: calc(max(.35, 1 - var(--b0-out)) * (1 - var(--h1))); translate: 0 calc(var(--b0-out) * -28px); }
html[data-motion="full"] .beat-1 { opacity: calc(max(.35, var(--b1-in) - var(--b1-out)) * var(--h1) * (1 - var(--h2))); translate: 0 calc((1 - var(--b1-in)) * 28px - var(--b1-out) * 28px); }
html[data-motion="full"] .beat-2 { opacity: calc(max(.35, var(--b2-in) - var(--b2-out)) * var(--h2) * (1 - var(--h3))); translate: 0 calc((1 - var(--b2-in)) * 28px - var(--b2-out) * 28px); }
html[data-motion="full"] .beat-3 { opacity: calc(max(.35, var(--b3-in)) * var(--h3)); translate: 0 calc((1 - var(--b3-in)) * 28px); }

/* The phone: LIVE flips to Saved, then the phone shrinks away as the film takes its place */
html[data-motion="full"] .play .live {
  width: min(100%, 680px); z-index: 4;
  opacity: calc(1 - clamp(0, calc((var(--k-hand) - .4) / .6), 1));
  scale: calc(1 - .2 * var(--s-hand));
}
html[data-motion="full"] .live-saved { display: inline-flex; scale: 1 clamp(0, calc(var(--k-saved) * 2 - 1), 1); }
html[data-motion="full"] .live-badge { scale: 1 clamp(0, calc(1 - var(--k-saved) * 2), 1); }
@keyframes live-pulse { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .25; scale: .7; } }
html[data-motion="full"] .live.is-streaming .live-dot { animation: live-pulse 1.3s ease-in-out infinite; }

html[data-motion="full"] .play .field {
  width: 100%; max-height: 100%;
  opacity: calc(clamp(0, calc(var(--k-hand) / .7), 1) * (1 - .7 * var(--s-clip) - .3 * var(--s-sheet)));
  scale: calc((.86 + .14 * var(--s-hand)) * (1 - .06 * var(--s-clip)));
}

html[data-motion="full"] .play .clip {
  width: min(300px, 76cqw, 62cqh); perspective: 1200px; z-index: 3;
  opacity: calc(min(1, var(--k-clip) * 5) * (1 - clamp(0, calc((var(--k-drop) - .7) * 3.4), 1)));
  scale: calc((.3 + .7 * var(--s-clip)) * (1 - .86 * var(--s-drop)));
  translate: calc(var(--s-drop) * var(--drop-x, 0px)) calc(var(--s-drop) * var(--drop-y, -12cqh) - var(--s-clip) * 1.5cqh);
}
html[data-motion="full"] .clip-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; transform-style: preserve-3d; rotate: y calc(var(--s-flip) * 180deg); }
html[data-motion="full"] .clip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow-lift); }
html[data-motion="full"] .clip-back { rotate: y 180deg; }

html[data-motion="full"] .play .sheet {
  width: min(100%, 640px); z-index: 2;
  /* main.js sets --sheet-fs so the whole sheet fits the room it has; the clamp is the starting guess */
  font-size: var(--sheet-fs, clamp(.625rem, 1.7cqh, 1rem)); padding: clamp(10px, 1.2em, 22px);
  opacity: var(--k-sheet);
  translate: 0 calc((1 - var(--s-sheet)) * 34cqh);
}
html[data-motion="full"] .play .sheet-table th, html[data-motion="full"] .play .sheet-table td { padding-block: clamp(.24em, .7cqh, .46em); }
html[data-motion="full"] .sheet-callout { opacity: clamp(0, calc((var(--k-count) - .82) * 8), 1); }
html[data-motion="full"] .sheet .col-hi { background: color-mix(in srgb, var(--tint) calc(var(--k-count) * 100%), transparent); }
@keyframes landed { 0% { scale: 1; } 35% { scale: 1.9; } 100% { scale: 1; } }
html[data-motion="full"] .sheet tr.is-landed #cell-12-g { animation: landed .55s var(--ease-pop) both; }
html[data-motion="full"] .sheet tr.is-landed th { animation: fade-in .4s ease both; }

/* main.js adds this for one measurement so transforms do not skew the reading */
.is-measuring .layer, .is-measuring .clip-inner { translate: none !important; scale: none !important; rotate: none !important; }

@media (max-height: 600px) {
  html[data-motion="full"] .play .beat p:not(.kicker) { display: none; }
}

/* ---------- 5c. Scene 5: confirm ---------- */

.confirm { padding-block: clamp(48px, 8vh, 96px); min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
/* Straight after the pinned play scene: no extra screen of empty space before the check */
html[data-motion="full"] .confirm { min-height: 0; padding-top: clamp(16px, 3vh, 40px); }
.confirm-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.confirm-copy { max-width: 34em; }
.confirm-copy h2 { margin-bottom: .45em; }
.confirm-copy p:not(.kicker) { color: var(--text-2); font-size: var(--step-1); line-height: 1.45; }
.confirm-copy .try-it { margin-top: 1em; color: var(--text); }
@media (min-width: 1040px) {
  .confirm-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .confirm-copy { position: sticky; top: 96px; }
}
.review { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) and (max-width: 1039px), (min-width: 1200px) { .review { grid-template-columns: minmax(0, 310px) minmax(0, 1fr); } }

.review-card { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; }
.review-top { display: flex; justify-content: space-between; align-items: center; font-size: .8125rem; font-weight: 700; }
.review-view { letter-spacing: .1em; text-transform: uppercase; }
.review-count { color: var(--text-2); }
.review-clip { width: 100%; height: auto; border-radius: 14px; }
.suggest { display: grid; gap: 2px; }
.suggest-label { display: inline-flex; align-items: center; gap: .4em; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.suggest-stat { font-size: 1.125rem; line-height: 1.35; }
.suggest-stat strong { font-family: var(--font-display); font-weight: 800; }
.suggest-time { color: var(--text-2); font-size: .875rem; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Each label stays on one line. When two do not fit side by side they stack, each full width. */
.actions .btn { flex: 1 1 auto; padding-inline: .9em; white-space: nowrap; }
.btn[aria-expanded="true"] { background: var(--text); color: var(--bg); }
.btn:disabled { opacity: .45; cursor: default; }
.picker legend { font-weight: 700; margin-bottom: 8px; }
.picker-list { display: grid; gap: 8px; }
.pick {
  display: flex; align-items: center; gap: .6em; width: 100%; min-height: 46px; padding: 6px 12px;
  background: var(--surface-2); color: var(--text); border: 2px solid transparent; border-radius: 14px;
  font: 600 1rem/1.2 var(--font-body); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .pick:hover { border-color: var(--text); } }
.pick-unsure { background: transparent; border-color: var(--line); }
.review-status { font-weight: 600; line-height: 1.4; }
.review-status:empty { display: none; }
#btn-reset { justify-self: start; }

.mini { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 18px; }
.mini-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.mini-table th:nth-child(1) { width: 46%; }
.mini-table th:nth-child(2) { width: 12%; }
.mini-table caption { text-align: left; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; padding-bottom: 8px; }
.mini-table th, .mini-table td { text-align: left; padding: 8px 6px 8px 0; border-bottom: 1px solid var(--line); height: 54px; }
.mini-table thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); height: auto; }
.mini-table tbody th { font-weight: 600; white-space: nowrap; }
.mini-count { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; }
.mini-table .slot { text-align: right; padding-right: 0; }
.mini-table tr.is-target th, .mini-table tr.is-target td { background: var(--tint); }
.tray { margin-top: 14px; padding: 12px; border: 2px dashed var(--line); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 60px; }
.tray-label { display: inline-flex; align-items: center; gap: .4em; font-size: .8125rem; font-weight: 700; color: var(--text-2); }

.chip {
  display: inline-flex; align-items: center; gap: .4em; padding: 6px 10px 6px 8px; border-radius: 999px;
  font: 700 .75rem/1.1 var(--font-body); white-space: nowrap;
  border: 2px dashed var(--text); color: var(--text); background: transparent;
}
.chip .icon { display: none; }
.chip[data-state="suggested"] .chip-icon-suggested,
.chip[data-state="confirmed"] .chip-icon-confirmed,
.chip[data-state="coach"] .chip-icon-coach { display: block; }
.chip[data-state="confirmed"] { background: #2E6E58; border: 2px solid #2E6E58; color: #FFFFFF; }
.chip[data-state="coach"] { border-style: solid; background: var(--surface-2); }

/* The little drawn clip. Still frame by default: number 15 has the ball. */
.rc-ball { translate: 201px 84px; }
.rc-ring { translate: 201px 84px; }
.rc-fifteen { translate: 190px 94px; }
.rc-seven { translate: 232px 118px; }
.rc-def { translate: 150px 122px; }
@keyframes rc-ball { 0% { translate: 52px 132px; } 46% { translate: 184px 100px; } 52% { translate: 201px 84px; } 80%, 100% { translate: 128px 42px; } }
@keyframes rc-fifteen { 0% { translate: 262px 30px; } 46%, 52% { translate: 190px 94px; } 80%, 100% { translate: 117px 52px; } }
@keyframes rc-seven { 0% { translate: 306px 150px; } 52% { translate: 232px 118px; } 80%, 100% { translate: 176px 84px; } }
@keyframes rc-def { 0% { translate: 40px 96px; } 52% { translate: 150px 122px; } 80%, 100% { translate: 150px 78px; } }
html[data-motion="full"] .review-clip .rc-ball,
html[data-motion="full"] .review-clip .rc-ring { animation: rc-ball 5s cubic-bezier(.4, 0, .4, 1) infinite; }
html[data-motion="full"] .review-clip .rc-fifteen { animation: rc-fifteen 5s cubic-bezier(.4, 0, .4, 1) infinite; }
html[data-motion="full"] .review-clip .rc-seven { animation: rc-seven 5s cubic-bezier(.4, 0, .4, 1) infinite; }
html[data-motion="full"] .review-clip .rc-def { animation: rc-def 5s cubic-bezier(.4, 0, .4, 1) infinite; }
html[data-motion="full"] .review-clip:not(.is-live) * { animation-play-state: paused; }

@keyframes bump { 0% { scale: 1; } 40% { scale: 1.45; } 100% { scale: 1; } }
html[data-motion="full"] .mini-count.is-bumped { animation: bump .5s var(--ease-pop) both; transform-origin: 20% 60%; }
html[data-motion="full"] .btn { transition: scale .18s var(--ease-out), background-color .18s ease; }
html[data-motion="full"] .btn:active { scale: .96; }
html[data-motion="full"] .pick { transition: translate .18s var(--ease-out), border-color .18s ease; }
@media (hover: hover) { html[data-motion="full"] .pick:hover { translate: 4px 0; } }
@keyframes pop-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
html[data-motion="full"] .picker:not([hidden]) .pick { animation: pop-in .4s var(--ease-out) both; }
html[data-motion="full"] .picker .pick:nth-child(2) { animation-delay: .05s; }
html[data-motion="full"] .picker .pick:nth-child(3) { animation-delay: .1s; }
html[data-motion="full"] .picker .pick:nth-child(4) { animation-delay: .15s; }
html[data-motion="calm"] .chip.is-fresh { animation: fade-in .4s ease both; }

/* ---------- 5d. Scene 6: gates ---------- */

.gates .stage { padding-block: clamp(72px, 14vh, 160px); }
.gates-grid { display: grid; gap: clamp(28px, 5vh, 56px); }
.gates-copy { max-width: 36em; }
.gates-copy h2 { margin-bottom: .45em; }
.gates-copy p:not(.kicker) { color: var(--text-2); font-size: var(--step-1); line-height: 1.45; }
.gate-list { display: grid; gap: 16px; }
@media (min-width: 860px) { .gate-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 20px; border: 1px solid var(--line); }
.gate-icon { width: 84px; height: 84px; overflow: visible; }
.gate-track { fill: none; stroke: var(--line); stroke-width: 6; }
.gate-ring { fill: none; stroke: #F07F2B; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.gate-shackle { fill: none; stroke: #FFFFFF; stroke-width: 8; stroke-linecap: round; }
.gate-body { fill: #FFFFFF; }
.gate-check { fill: none; stroke: #0F1E2E; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.gate-step { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.gate-text { display: grid; gap: 4px; }
.gate-text p { color: var(--text-2); font-size: .9375rem; line-height: 1.4; }
.gate-state { display: grid; margin-top: 6px; font-weight: 700; font-size: .875rem !important; }
.gate-state span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .35em; }
.state-wait { opacity: 0; color: var(--text-2); }
.state-done { color: var(--text); }
.gates-final-line { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.125rem, 1.2rem + 4.6vw, 5rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.gates-final-sub { color: var(--text-2); font-size: var(--step-1); margin-top: .6em; }
.tracker { display: none; }

/* A gate that has not locked yet (only happens in the motion version) */
.gate:not(.is-locked) .gate-shackle { translate: 0 -11px; }
.gate:not(.is-locked) .gate-check { stroke-dashoffset: 100px; }
.gate:not(.is-locked) .state-wait { opacity: 1; }
.gate:not(.is-locked) .state-done { opacity: 0; }

/* The first gate is already there when the scene arrives, so the screen is never bare.
   js/main.js (GATE_LOCK) closes each lock when its ring is full: .16, .44, .72. */
html[data-motion="full"] .gates { height: 320vh; height: 320svh; }
html[data-motion="full"] .gates .stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 0; overflow: hidden; overflow: clip;
  container: gstage / size;
  --r0: clamp(0, calc((var(--p) - .02) / .14), 1);
  --r1: clamp(0, calc((var(--p) - .30) / .14), 1);
  --r2: clamp(0, calc((var(--p) - .58) / .14), 1);
  --fin: clamp(0, calc((var(--p) - .82) / .08), 1);
  /* hand-over points, as in the play scene: nothing fades below .35 before it is cut */
  --g1: clamp(0, calc((var(--p) - .26) * 10000), 1);
  --g2: clamp(0, calc((var(--p) - .54) * 10000), 1);
  --g3: clamp(0, calc((var(--p) - .82) * 10000), 1);
}
html[data-motion="full"] .gates-grid {
  height: 100%; padding-block: 68px 24px; gap: 14px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
}
html[data-motion="full"] .gates-copy { grid-area: 1 / 1; }
html[data-motion="full"] .gates-copy h2 { font-size: clamp(1.5rem, 1rem + 2.6cqw, 3.375rem); }
html[data-motion="full"] .gates-copy p:not(.kicker) { font-size: clamp(.9375rem, .85rem + .5cqw, 1.4375rem); }
html[data-motion="full"] .gate-list { grid-area: 2 / 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; place-self: stretch; }
html[data-motion="full"] .gates-final { grid-area: 2 / 1; place-self: center; text-align: center; opacity: calc(max(.35, var(--fin)) * var(--g3)); translate: 0 calc((1 - var(--fin)) * 36px); will-change: transform, opacity; }
html[data-motion="full"] .tracker { grid-area: 3 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 520px); justify-self: center; }

html[data-motion="full"] .gate {
  grid-area: 1 / 1; width: min(100%, 440px);
  grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(8px, 2cqh, 20px);
  padding: clamp(10px, 2.2cqh, 36px) 20px;
  opacity: calc(max(.35, var(--in) - var(--out)) * var(--show));
  translate: calc((1 - var(--in)) * 64px - var(--out) * 64px) 0;
  scale: calc(.94 + .06 * var(--in));
  will-change: transform, opacity;
}
html[data-motion="full"] .gate[data-gate="0"] { --in: 1; --out: clamp(0, calc((var(--p) - .22) / .05), 1); --ring: var(--r0); --show: calc(1 - var(--g1)); }
html[data-motion="full"] .gate[data-gate="1"] { --in: clamp(0, calc((var(--p) - .26) / .06), 1); --out: clamp(0, calc((var(--p) - .50) / .05), 1); --ring: var(--r1); --show: calc(var(--g1) * (1 - var(--g2))); }
html[data-motion="full"] .gate[data-gate="2"] { --in: clamp(0, calc((var(--p) - .54) / .06), 1); --out: clamp(0, calc((var(--p) - .78) / .05), 1); --ring: var(--r2); --show: calc(var(--g2) * (1 - var(--g3))); }
html[data-motion="full"] .gate-icon { width: clamp(64px, 16cqh, 190px); height: clamp(64px, 16cqh, 190px); }
html[data-motion="full"] .gate-ring { stroke-dashoffset: calc((1 - var(--ring)) * 100px); }
html[data-motion="full"] .gate-text { justify-items: center; }
html[data-motion="full"] .gate-text p { font-size: clamp(.875rem, .8rem + .3cqw, 1.0625rem); max-width: 26em; }
html[data-motion="full"] .gate h3 { font-size: clamp(1.25rem, 1rem + 1.4cqw, 2rem); }
html[data-motion="full"] .gate-state span { justify-self: center; }
html[data-motion="full"] .gate-shackle { transition: translate .38s var(--ease-pop); }
html[data-motion="full"] .gate-check { transition: stroke-dashoffset .35s ease .12s; }
html[data-motion="full"] .gate-state span { transition: opacity .25s ease; }
@keyframes lock-thud { 0% { scale: 1; } 30% { scale: .93; } 100% { scale: 1; } }
html[data-motion="full"] .gate.is-locked .gate-icon { animation: lock-thud .45s var(--ease-pop) both; }

.track { position: relative; display: grid; justify-items: center; gap: 6px; font-size: .75rem; font-weight: 700; text-align: center; color: var(--text-2); }
.track::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--line); }
.track::after { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: #F07F2B; transform-origin: 0 50%; scale: var(--fill, 1) 1; }
.track:first-child::before, .track:first-child::after { display: none; }
.track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); border: 3px solid var(--line); color: var(--text-2); }
.track-dot .icon { width: 16px; height: 16px; }
.track.is-locked .track-dot { background: #F07F2B; border-color: #F07F2B; color: #0F1E2E; }
.track.is-locked .track-label { color: var(--text); }
html[data-motion="full"] .track[data-track="0"] { --fill: 0; }
html[data-motion="full"] .track[data-track="1"] { --fill: var(--r1); }
html[data-motion="full"] .track[data-track="2"] { --fill: var(--r2); }
html[data-motion="full"] .track-dot { transition: background-color .25s ease, border-color .25s ease, scale .35s var(--ease-pop); }
html[data-motion="full"] .track.is-locked .track-dot { scale: 1.12; }

@container gstage (min-width: 900px) and (min-height: 480px) {
  html[data-motion="full"] .gates-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 5cqw, 80px); padding-block: 84px 44px; align-items: center;
  }
  html[data-motion="full"] .gates-copy { grid-area: 1 / 1 / 3 / 2; }
  html[data-motion="full"] .gate-list, html[data-motion="full"] .gates-final { grid-area: 1 / 2; }
  html[data-motion="full"] .tracker { grid-area: 2 / 2; }
  html[data-motion="full"] .gate-icon { width: clamp(84px, 24cqh, 190px); height: clamp(84px, 24cqh, 190px); }
  html[data-motion="full"] .gate { padding: clamp(16px, 3.4cqh, 36px) 24px; }
}
@media (max-height: 600px) {
  html[data-motion="full"] .gates-copy p:not(.kicker) { display: none; }
}

/* ---------- 5e. Scene 7: close ---------- */

.close { padding-block: clamp(56px, 10vh, 120px) clamp(56px, 10vh, 120px); }
.close-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .close-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.close-copy { max-width: 34em; }
.close-copy h2 { margin-bottom: .45em; }
.close-copy p:not(.kicker) { color: var(--text-2); font-size: var(--step-1); line-height: 1.45; }

.season { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px); display: grid; gap: 20px; container: season / inline-size; }
.season-head { display: flex; align-items: center; gap: 14px; }
.season-name { display: grid; line-height: 1.25; }
.season-name strong { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; }
.season-name span { color: var(--text-2); font-size: .9375rem; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container season (min-width: 520px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column-reverse; gap: 2px; background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.tile dt { color: var(--text-2); font-size: .8125rem; font-weight: 600; }
.tile dd { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chart figcaption { font-weight: 700; margin-bottom: 6px; }
.chart-svg { width: 100%; height: auto; overflow: visible; }
.chart-grid path { stroke: var(--line); stroke-width: 1; fill: none; }
.chart-axis text { fill: var(--text-2); font-family: var(--font-body); font-size: 13px; font-variant-numeric: tabular-nums; }
/* field green, light enough that the line and dots stay in front */
.chart-area { fill: #2E6E58; fill-opacity: .25; }
.chart-line { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.chart-dot { fill: var(--surface); stroke: var(--text); stroke-width: 2.5; }
.chart-dot-last { fill: #F07F2B; stroke: var(--surface); stroke-width: 3; }
.chart-label { fill: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.chart-table summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text-2); width: fit-content; padding: 12px 2px; }
.chart-table table { margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.chart-table th, .chart-table td { text-align: left; padding: 4px 18px 4px 0; border-bottom: 1px solid var(--line); }

@container season (max-width: 519px) {
  .chart-axis text { font-size: 23px; }
  .chart-axis .chart-axis-title { display: none; }
  .chart-label { font-size: 25px; }
}
html[data-motion="full"] .season { --draw: clamp(0, calc((var(--c) - .14) / .24), 1); }
html[data-motion="full"] .chart-line { stroke-dashoffset: calc((1 - var(--draw)) * 100px); }
html[data-motion="full"] .chart-area { fill-opacity: calc(.25 * clamp(0, calc((var(--draw) - .6) * 2.5), 1)); }
html[data-motion="full"] .d0 { opacity: clamp(0, calc(var(--draw) * 14 + .001), 1); }
html[data-motion="full"] .d1 { opacity: clamp(0, calc((var(--draw) - .143) * 14), 1); }
html[data-motion="full"] .d2 { opacity: clamp(0, calc((var(--draw) - .286) * 14), 1); }
html[data-motion="full"] .d3 { opacity: clamp(0, calc((var(--draw) - .429) * 14), 1); }
html[data-motion="full"] .d4 { opacity: clamp(0, calc((var(--draw) - .571) * 14), 1); }
html[data-motion="full"] .d5 { opacity: clamp(0, calc((var(--draw) - .714) * 14), 1); }
html[data-motion="full"] .d6 { opacity: clamp(0, calc((var(--draw) - .857) * 14), 1); }
html[data-motion="full"] .d7 { opacity: clamp(0, calc((var(--draw) - .93) * 14), 1); }

.finale { display: grid; justify-items: center; text-align: center; gap: clamp(16px, 3vh, 28px); padding-top: clamp(64px, 12vh, 140px); }
.finale-tagline { font-family: var(--font-display); font-weight: 800; font-size: var(--step-h1); line-height: 1; letter-spacing: -.035em; }
.finale-tagline span { display: block; }
.finale-ask { color: var(--text-2); font-size: var(--step-1); max-width: 30em; }
.btn-cta { min-height: 56px; font-size: 1.0625rem; padding-inline: 1.6em; }

/* ---------- 6. Footer ---------- */

.footer { background: var(--bg); border-top: 1px solid var(--line); padding-block: 40px 56px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.footer-logo { width: 212px; height: auto; }
.footer-note { color: var(--text-2); font-size: .875rem; }

/* ---------- 7. Simple fades, view transitions, print ---------- */

/* .reveal fades in once when it scrolls into view (both versions). In the motion version it also rises. */
html.js .reveal { opacity: 0; transition: opacity .7s ease; }
html.js .reveal.is-seen { opacity: 1; }
html.js[data-motion="calm"] .calm-reveal { opacity: 0; transition: opacity .7s ease; }
html.js[data-motion="calm"] .calm-reveal.is-seen { opacity: 1; }
html[data-motion="full"] .reveal { opacity: .35; translate: 0 34px; transition: opacity .8s ease, translate 1s var(--ease-out); }
html[data-motion="full"] .reveal.is-seen { translate: 0 0; }
html[data-motion="full"] .reveal-2 { transition-delay: .12s; }
html[data-motion="full"] .reveal-3 { transition-delay: .24s; }

/* Changing sport. With View Transitions the browser cross-fades the page (the root rule below).
   Without them main.js adds .is-swapping for a moment and the pieces that changed fade in. */
@keyframes swap-in { from { opacity: 0; } to { opacity: 1; } }
html[data-motion="full"] .is-swapping [data-swap] { animation: swap-in .4s ease; }

/* The interactive stat move */
html[data-motion="full"] #stat-chip { view-transition-name: stat-chip; }
::view-transition-group(stat-chip) { animation-duration: .7s; animation-timing-function: cubic-bezier(.3, 1.3, .45, 1); }
::view-transition-old(stat-chip), ::view-transition-new(stat-chip) { animation-duration: .3s; height: 100%; width: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* System setting respected even if scripts fail: nothing here moves without data-motion="full",
   and boot.js never sets that when the system asks for reduced motion (unless the visitor turns motion on). */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after { scroll-behavior: auto !important; }
}

@media print {
  .motion-toggle, .progress, .iris, .skip { display: none !important; }
}

/* ---------------------------------------------------------------------------
   "counted." arriving as running numbers (js/tally.js).
   The word keeps its place in the line; the digits sit on top of it, so nothing
   in the layout moves. Without the script, or in calm mode, only the word shows.
--------------------------------------------------------------------------- */
.tally,
.finale-tagline span.tally { position: relative; display: inline-block; }
.finale-tagline .tally span { display: inline; }
.tally .tally-digits,
.finale-tagline .tally .tally-digits { display: none; position: absolute; left: 0; top: 0; white-space: nowrap; font-variant-numeric: tabular-nums; transform-origin: left center; }
.tally.is-running .tally-word { opacity: 0; }
.tally.is-running .tally-digits,
.finale-tagline .tally.is-running .tally-digits { display: block; }
html[data-motion="calm"] .tally .tally-word { opacity: 1; }
html[data-motion="calm"] .tally .tally-digits { display: none; }