/* Landing page. Tokens from site.css. */
/* ---------- hero: the night desk photograph, the headline in its dark, the live chart on glass ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
@media (min-width: 861px) { .hero { margin-top: -69px; padding-top: calc(69px + clamp(36px, 4.4vw, 64px)); min-height: min(100svh, 940px); display: flex; align-items: center; } .hero > .wrap { width: 100%; } }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; animation: settle 1.6s var(--ease) both; }
.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--scrim-0) 0%, var(--scrim-1) 30%, var(--scrim-2) 58%, var(--scrim-1) 100%),
  linear-gradient(180deg, var(--clear) 55%, var(--ground) 100%); }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.hero .ln, .hero .rise { animation: rise .9s var(--ease) both; animation-delay: var(--d, 0s); }
.hero-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); column-gap: clamp(40px, 4vw, 72px); } }
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.hero-h { font-size: var(--s-hero); line-height: .98; }
.hero-h .ln { display: block; }
.hero-copy .lead { max-width: 30ch; color: var(--ink); opacity: .82; }
.hero-copy .lead b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.hero-copy .lead b.loss { color: var(--loss); }
.lead .tag { display: block; color: var(--ink); margin-bottom: 6px; }
.season { display: grid; gap: 6px; justify-items: start; }
.season p { margin: 0; }
.clock-label { font-size: var(--s14); color: var(--muted); }
.clock-label #season-name { color: var(--ink); }
.clock { font-size: var(--s28); color: var(--accent); letter-spacing: .02em; margin-bottom: 14px !important; line-height: 1.1; white-space: nowrap; min-height: 1.1em; }   /* the line is held before /config arrives: no shift */
.clock small { font-size: var(--s14); color: var(--muted); margin: 0 6px 0 2px; }
.clock:empty { display: none; }
.season .dates { font-size: var(--s12); color: var(--muted); margin: -8px 0 14px; }

/* the live chart panel (illustration) */
.lv { margin: 0; padding: 20px 22px 14px; display: grid; gap: 6px; animation: slide 1s var(--ease) .48s both; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.live-head p { margin: 0; font-size: var(--s14); color: var(--muted); }
.live-tag { color: var(--ink) !important; }
.live-left b { font-weight: 400; color: var(--accent); }
.live-read { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; }
.live-read p { margin: 0; }
.live-bal { font-size: var(--s38); line-height: 1.1; color: var(--ink); }
.live-chg { font-size: var(--s18); color: var(--accent); }
.live-chg.neg { color: var(--down); }
.live-hour { font-size: var(--s14); color: var(--muted); margin-left: auto !important; }
.live-box { position: relative; height: clamp(300px, 31vw, 440px); margin: 6px -8px 0; }
.live-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 600px) { .lv { padding: 16px 14px 10px; } .live-box { height: 300px; margin: 4px -4px 0; } .live-bal { font-size: var(--s28); } .live-hour { display: none; } }
@media (max-width: 1099px) { .hero-copy .lead { max-width: 40ch; } }

/* ---------- prize stage: three devices on lit pedestals, each name above its device ---------- */
.stage-band { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 40px; flex-wrap: wrap; }
.stage-head .h { margin-bottom: 12px; }
.stage-head p { max-width: 46ch; margin: 0 0 12px; }
.stage { position: relative; margin-top: 8px; }
.stage-art { position: relative; overflow: hidden; border-radius: var(--r2); background: var(--ground); }
.stage-img { width: 100%; height: auto; aspect-ratio: 160 / 89; object-fit: cover; }
.podium { list-style: none; margin: 0; padding: 0; }
.podium li { position: absolute; transform: translate(-50%, -100%); text-align: center; display: grid; justify-items: center; gap: 4px; width: 26%; }
.podium li.p1 { left: 48%; top: 25%; width: 40%; }
.podium li.p2 { left: 21.6%; top: 43%; }
.podium li.p3 { left: 76.6%; top: 46%; }
.podium .pl { font-size: var(--s14); color: var(--muted); }
.podium .name { font-family: var(--f-display); font-weight: 400; font-size: var(--s21); line-height: 1.15; }
.podium li.p1 .name { font-size: var(--s38); }
.podium li.p1 .pl { color: var(--accent); }
.podium .shot { width: 70%; aspect-ratio: 1; margin-top: 8px; }
.podium .shot img { width: 100%; height: 100%; object-fit: contain; }
.stage-cap { margin-top: 12px; }
@media (max-width: 700px) {
  .stage-img { aspect-ratio: 7 / 5; } /* phone: trims the empty sides so the devices read larger */
  .podium { border-top: 1px solid var(--line); margin-top: 16px; }
  .podium li, .podium li.p1, .podium li.p2, .podium li.p3 { position: static; transform: none; width: 100%; text-align: left; grid-template-columns: 8ch minmax(0, 1fr); justify-items: start; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .podium li.p1 .name { font-size: var(--s21); }
  .podium .name { font-size: var(--s18); }
  .podium .shot { grid-column: 1 / -1; width: 60%; }
}

/* the rule chart */
.rule-chart { margin: 0 0 56px; }
.chart-box { position: relative; overflow: hidden; height: clamp(240px, 26vw, 340px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chart-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rule-chart figcaption { margin-top: 10px; max-width: 80ch; }
#chart text { font-family: var(--f-mono); font-size: var(--s12); fill: var(--muted); }
#chart .lbl-loss { fill: var(--loss); }
#chart .lbl-ink { fill: var(--ink); }
#chart .grid { stroke: var(--line); stroke-width: 1; }
#chart .start { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 5; }
#chart .zone { fill: var(--loss-soft); }
#chart .floor { stroke: var(--loss); stroke-width: 1.5; stroke-dasharray: 7 6; }
#chart .path-a { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
#chart .path-b { fill: none; stroke: var(--loss); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
#chart .area-a { stroke: none; }
#chart .ga0 { stop-color: var(--accent); stop-opacity: .16; }
#chart .ga1 { stop-color: var(--accent); stop-opacity: 0; }
#chart .x { stroke: var(--loss); stroke-width: 3; stroke-linecap: round; }
#chart .dot { fill: var(--accent); }
#chart .halo { fill: var(--accent); opacity: .25; transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.6); opacity: 0; } }
#chart .late { opacity: 0; transition: opacity .5s; }
#chart.drawn .late { opacity: 1; }

/* leaderboard + prizes */
.board-grid { display: grid; gap: 56px; }
@media (min-width: 1000px) { .board-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.live { margin: 0 0 28px; }
.lb { margin-bottom: 18px; }
.lb td:first-child { font-family: var(--f-mono); color: var(--muted); width: 3ch; }
.lb tr.top td:first-child { color: var(--ink); }
.lb .bal { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.lb .res { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* eliminated column beside the leaderboard */
.out-h { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.3vw, 50px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
.out-x { width: .62em; height: .62em; flex: none; position: relative; }
.out-x::before, .out-x::after { content: ""; position: absolute; left: -10%; top: 45%; width: 120%; height: 3px; background: var(--loss); border-radius: var(--r1); transform: rotate(45deg); }
.out-x::after { transform: rotate(-45deg); }
.out-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.out-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--s14); }
.out-list .xmark { width: 14px; height: 14px; color: var(--loss); }
.out-list .who { display: flex; gap: 10px; align-items: center; min-width: 0; color: var(--muted); }
.out-list .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-list .fb { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--loss); white-space: nowrap; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); } .steps li { padding: 28px 22px 0 0; border-right: 1px solid var(--line); margin-right: 22px; } .steps li:last-child { border-right: 0; margin-right: 0; } }
.steps .n { display: block; color: var(--muted); font-size: var(--s14); margin-bottom: 22px; }
.steps p { font-size: var(--s16); }

/* faq */
.faq-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 36px 20px 0; font-size: var(--s18); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--f-mono); color: var(--muted); font-size: var(--s21); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 20px; max-width: 64ch; margin: 0; }

/* closing call */
.closing .wrap { display: grid; gap: 26px; justify-items: start; }
.closing .h { margin: 0; max-width: 18ch; }

@media (max-width: 600px) {
  .lb td, .lb th { padding-left: 6px; padding-right: 6px; }
  .lb td { font-size: var(--s14); }
  .lb .who { gap: 8px; }
}

/* rule chart drawn by scroll: a ground cover with a cyan leading edge slides off to the right */
.draw-cover { position: absolute; inset: 0 -2px 0 0; z-index: 2; background: var(--ground); transform-origin: 100% 50%; transform: scaleX(var(--cover, 1)); border-left: 1px solid var(--accent); box-shadow: -8px 0 24px -10px var(--accent-glow); will-change: transform; }
.draw-cover.done { display: none; }

/* leaderboard band: glass panels on the ground (the desk photo is not repeated here) */
.board-band { position: relative; overflow: hidden; isolation: isolate; }
.board, .out { padding: clamp(20px, 2.4vw, 32px); }
.board-grid { align-items: start; }
.board .table td { border-bottom-color: var(--glass-line); }
.board .table th { border-bottom-color: var(--glass-line); }
@media (max-width: 860px) { .hero-scrim { background: linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-1) 62%, var(--ground) 100%); } }

/* closing: the same night desk, seen from the window side, bookends the hero */
section.band.closing { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 12vw, 176px) 0; }
.closing-media { position: absolute; inset: 0; z-index: -1; }
.closing-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; opacity: .75; }
.closing-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--scrim-0) 0%, var(--scrim-1) 45%, var(--scrim-2) 100%), linear-gradient(180deg, var(--ground) 0%, var(--clear) 30%, var(--clear) 70%, var(--ground) 100%); }
.closing .lead { color: var(--ink); opacity: .82; }

/* the prize line under the hero CTA: the prizes are on the first screen at every width */
.hero-prizes { margin: 2px 0 0 !important; font-size: var(--s14); color: var(--muted); }
.hero-prizes a { color: var(--ink); text-decoration-color: var(--glass-line); }
.hero-prizes a:hover { text-decoration-color: var(--accent); }
/* phones: the full chart label stays (it says the account is not real), the timer stays on one line */
@media (max-width: 600px) { .live-left { white-space: nowrap; } }
/* FAQ: a way to the full rules beside the questions */
.faq-side .h { margin-bottom: 14px; }

/* ================= motion pass (2026-10-22, Surush asked for "крутые анимации") =================
   Transform and opacity only, plus one masked light layer during the stage entrance.
   prefers-reduced-motion: site.css stops every animation and transition, and landing.js never arms
   the stage scene, the counters or the chart hit, so the page shows its finished state. */

/* ---- ticker strip under the header: the leaderboard moving (or a labelled example) ---- */
.hero { padding-top: calc(clamp(36px, 5vw, 72px) + 36px); }
@media (min-width: 861px) { .hero { padding-top: calc(69px + 36px + clamp(36px, 4.4vw, 64px)); } }
.ticker { position: absolute; left: 0; right: 0; top: 0; height: 36px; z-index: 1; display: flex; align-items: center;
  background: var(--scrim-1); border-bottom: 1px solid var(--glass-line); overflow: hidden; }
@media (min-width: 861px) { .ticker { top: 69px; } }
/* the label sits over the strip, so a change of its text (example to real rows, RU to EN) never moves the strip */
.tk-tag { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; padding: 0 16px 0 var(--gut); height: 100%; display: flex; align-items: center; font-size: var(--s12); color: var(--muted);
  border-right: 1px solid var(--glass-line); white-space: nowrap; background: var(--ground); }
.tk-view { position: absolute; inset: 0; overflow: hidden; }
.tk-run { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; width: max-content; animation: tk var(--tk-dur, 60s) linear infinite; will-change: transform; }
.tk-run > span { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-size: var(--s14); white-space: nowrap; border-right: 1px solid var(--glass-line); }
.tk-run .flag { width: 16px; height: 12px; }
.tk-run .num { font-size: var(--s12); }
.ticker:hover .tk-run, .ticker.off .tk-run { animation-play-state: paused; }
@keyframes tk { to { transform: translateX(-50%); } }

/* ---- hero photograph: a slow camera drift, a few pixels, after it settles ---- */
.hero-media { animation: drift 34s ease-in-out 1.6s infinite alternate; will-change: transform; }
.hero.off .hero-media { animation-play-state: paused; }
@keyframes drift { from { transform: none; } to { transform: translate3d(-10px, -5px, 0) scale(1.025); } }

/* ---- the balance on the live panel rolls digit by digit ---- */
.live-bal .od { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
.live-bal .od-s { display: block; transition: transform .38s cubic-bezier(.2, .7, .2, 1); }
.live-bal .od-s b { display: block; height: 1.1em; font-weight: inherit; }

/* ---- numbers that roll once: a column of cells per digit, moved by transform (the text itself never changes) ---- */
.rl { font-variant-numeric: tabular-nums; }
.rl-c { display: inline-block; height: 1lh; overflow: hidden; vertical-align: top; }
.rl-s { display: block; white-space: pre-line; transition: transform 1s cubic-bezier(.16, .84, .3, 1); }

/* ---- rule chart: the red path hits the floor, a short flash, the X shakes once ---- */
#chart .xg, #chart .xl { opacity: 0; }
#chart.hit .xg, #chart.hit .xl, #chart.hit-done .xg, #chart.hit-done .xl { opacity: 1; }
#chart.hit .xg { transform-box: fill-box; transform-origin: center; animation: xshake .46s cubic-bezier(.36, .07, .19, .97) both; }
#chart.hit .xl { transition: opacity .4s .25s; }
#chart .burst { fill: none; stroke: var(--loss); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
#chart.hit .burst { animation: burst .7s cubic-bezier(.2, .7, .2, 1) both; }
#chart .flash { stroke: var(--loss); stroke-width: 3; opacity: 0; }
#chart.hit .flash { animation: flash .6s ease-out both; }
@keyframes xshake { 0% { transform: scale(.4); } 18% { transform: scale(1.15) translateX(-4px); } 36% { transform: translateX(4px); } 54% { transform: translateX(-3px); } 72% { transform: translateX(2px); } 100% { transform: none; } }
@keyframes burst { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(3.2); } }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---- prize stage: the lights come up 3rd, 2nd, 1st; each device lifts out of its pedestal ---- */
@property --l1 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --l2 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --l3 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.stage-fx { display: none; position: absolute; inset: 0; }
.stage.fx .stage-fx { display: block; }
.stage.fxwait .stage-img, .stage.fx .stage-img { opacity: 0; }   /* the scene replaces the finished picture; it never shows through */
.stage-scene { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 160 / 89; translate: -50% 0; }   /* object-fit: cover, centred, like .stage-img */
.stage-scene > * { position: absolute; }
.plate { inset: 0; width: 100%; height: 100%; transform: translate3d(calc(var(--mx, 0) * -2px), calc(var(--my, 0) * -1.5px), 0); }
.dim { inset: 0; background: var(--ground); opacity: .82;
  -webkit-mask-image: radial-gradient(ellipse calc(var(--l1) * 19%) calc(var(--l1) * 62%) at 48% 52%, var(--clear) 55%, var(--ground) 100%), radial-gradient(ellipse calc(var(--l2) * 14%) calc(var(--l2) * 52%) at 21.6% 62%, var(--clear) 55%, var(--ground) 100%), radial-gradient(ellipse calc(var(--l3) * 17%) calc(var(--l3) * 50%) at 76.9% 62%, var(--clear) 55%, var(--ground) 100%);
  mask-image: radial-gradient(ellipse calc(var(--l1) * 19%) calc(var(--l1) * 62%) at 48% 52%, var(--clear) 55%, var(--ground) 100%), radial-gradient(ellipse calc(var(--l2) * 14%) calc(var(--l2) * 52%) at 21.6% 62%, var(--clear) 55%, var(--ground) 100%), radial-gradient(ellipse calc(var(--l3) * 17%) calc(var(--l3) * 50%) at 76.9% 62%, var(--clear) 55%, var(--ground) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.stage.go .dim { --l1: 1; --l2: 1; --l3: 1; opacity: 0;
  transition: --l3 .9s var(--ease) .15s, --l2 .9s var(--ease) .6s, --l1 .9s var(--ease) 1.05s, opacity 1s ease 1.9s; }
.beam { top: 0; height: 66%; width: 24%; opacity: 0; mix-blend-mode: screen; filter: blur(10px); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(228, 236, 241, 0), rgba(228, 236, 241, .07) 70%, rgba(228, 236, 241, .12)); }
.b1 { left: 36%; height: 58%; } .b2 { left: 9.6%; height: 70%; } .b3 { left: 64.9%; height: 70%; }
.stage.go .beam { animation: beam 2.6s ease both; }
.stage.go .b3 { animation-delay: .15s; } .stage.go .b2 { animation-delay: .6s; } .stage.go .b1 { animation-delay: 1.05s; }
@keyframes beam { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }   /* the cone flares, then the photo's own light remains */
.pool { height: 5%; opacity: 0; mix-blend-mode: screen; border-radius: 50%; background: radial-gradient(closest-side, rgba(228, 236, 241, .5), rgba(228, 236, 241, 0)); }
.o1 { left: 39%; width: 18%; top: 66.6%; } .o2 { left: 14.6%; width: 14%; top: 74.6%; } .o3 { left: 66%; width: 22%; top: 72.6%; }
.stage.go .pool { animation: pool 1.4s ease both; }
.stage.go .o3 { animation-delay: .85s; } .stage.go .o2 { animation-delay: 1.3s; } .stage.go .o1 { animation-delay: 1.75s; }
@keyframes pool { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* each device box is cut at its foot line, so the device lifts out of the pedestal top instead of crossing its front */
.dev { overflow: hidden; transform: translate3d(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 3px), 0); }
.dev img { display: block; width: 100%; height: 100%; transform: translateY(24%); opacity: 0; transition: transform 1.2s cubic-bezier(.16, .8, .24, 1), opacity .5s ease; }
.d1 { left: 42%; top: 27.528%; width: 11.875%; height: 41.798%; }
.d2 { left: 17.375%; top: 45.618%; width: 8.375%; height: 31.461%; }
.d3 { left: 66.75%; top: 47.865%; width: 20.125%; height: 27.416%; }
.stage.go .dev img { transform: none; opacity: 1; }
.stage.go .d3 img { transition-delay: .35s; } .stage.go .d2 img { transition-delay: .8s; } .stage.go .d1 img { transition-delay: 1.25s; }
/* once they stand: their bottom rims and contact shadows (cut from the same photograph), moving with the devices */
.feet { left: 16.9375%; top: 67.4157%; width: 70.5%; height: 10.8989%; opacity: 0; transform: translate3d(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 3px), 0); }
.stage.go .feet { opacity: 1; transition: opacity .5s ease 2.2s; }
/* labels settle after their device lands; on desktop they float a little further than the devices */
.podium li { translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 5px + var(--lift, 0px)); }
.stage.fxwait .podium li, .stage.fx .podium li { opacity: 0; --lift: 10px; }
.stage.fx.go .podium li { opacity: 1; --lift: 0px; transition: opacity .6s ease, --lift .9s var(--ease); }   /* transition only on the way in */
.stage.go .podium li.p3 { transition-delay: .95s; } .stage.go .podium li.p2 { transition-delay: 1.4s; } .stage.go .podium li.p1 { transition-delay: 1.85s; }

/* ================= motion pass 2 (2026-10-23): smoother hand-offs between the scenes =================
   Scroll-linked values come from landing.js as --hp (hero leaving, 0..1), --cp (closing band arriving, 0..1).
   Individual transform properties (scale, translate) are used so they compose with the running keyframes. */

/* hero headline: each line rises out of its own mask instead of fading in */
.hero .ln { animation-name: lineup; animation-duration: 1.15s; animation-timing-function: var(--e-out); }
@keyframes lineup { from { clip-path: inset(0 -4% 100% -4%); transform: translateY(.55em); } to { clip-path: inset(-14% -4% -26% -4%); transform: none; } }

/* hero leaving: the photograph leans in, the copy and the chart lift away a little slower than the page */
.mo .hero-img { scale: calc(1 + var(--hp, 0) * .07); }
.mo .hero-grid { translate: 0 calc(var(--hp, 0) * -70px); opacity: calc(1 - var(--hp, 0) * .9); }
.mo .ticker { opacity: calc(1 - var(--hp, 0) * 1.4); }

/* rule chart band: the five steps hang from one hairline that draws left to right */
@media (min-width: 900px) {
  .mo .steps { border-top-color: var(--clear); position: relative; }
  .mo .steps::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform-origin: 0 50%; transform: scaleX(0); }
  .mo .steps.drawn::before { transform: none; transition: transform 1.4s var(--e-out); }
}
.steps .n { color: var(--accent); }
.mo .steps li.rv .n { transition: color .6s ease; transition-delay: calc(var(--ri, 0) * 90ms + .5s); }
.mo .steps li.rv:not(.in) .n { color: var(--muted); }

/* FAQ: the plus turns into a cross as the answer opens */
.faq summary::after { transition: transform .45s var(--e-out); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* closing band: the photograph opens from a framed window to full bleed as it arrives, and drifts against the scroll */
.mo section.band.closing { clip-path: inset(0 calc((1 - var(--cp, 1)) * 6%) round calc((1 - var(--cp, 1)) * 16px)); }
.mo .closing-media img { scale: 1.12; translate: 0 calc((var(--cp, 1) - 1) * 60px + var(--cy, 0) * 1px); }

/* ================= futurism (2026-10-23, Albert): the landing as a flight deck =================
   The photographs are screens inset in hairline frames with corner brackets (Anduril's framed film), the headline is
   engineered type, the live chart is an instrument with a telemetry strip, ruler ticks and an altitude tape. */

/* framed pictures: hero desk, closing desk, prize stage */
.hero-media::before, .closing-media::before, .stage-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border: 1px solid var(--tick);
  -webkit-mask: conic-gradient(at var(--cl) var(--cl), transparent 75%, black 0) 0 0 / calc(100% - var(--cl)) calc(100% - var(--cl));
  mask: conic-gradient(at var(--cl) var(--cl), transparent 75%, black 0) 0 0 / calc(100% - var(--cl)) calc(100% - var(--cl)); }
.hero-media::after, .closing-media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--glass-line); pointer-events: none; z-index: 2; }
@media (min-width: 861px) {
  .hero-media { inset: 125px 20px 20px; overflow: hidden; }
  .hero { padding-bottom: clamp(56px, 6vw, 88px); }
  .closing-media { inset: 20px; overflow: hidden; }
}
@media (max-width: 860px) { .hero-media::before, .hero-media::after { content: none; } }
.hero-scrim { background:
  linear-gradient(90deg, var(--scrim-0) 0%, var(--scrim-1) 32%, var(--scrim-2) 62%, var(--scrim-1) 100%),
  linear-gradient(180deg, var(--clear) 70%, var(--scrim-1) 100%); }
@media (max-width: 860px) { .hero-scrim { background: linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-1) 62%, var(--ground) 100%); } }
.hero-img { filter: saturate(.72) brightness(.9); }

/* headline: engineered capitals */
.hero-h { font-size: var(--s-hero); line-height: .92; }
.hero-copy { gap: 28px; }
.hero-copy .lead { font-size: var(--s18); max-width: 34ch; }

/* the countdown: a mission clock */
.season { gap: 4px; }
.clock { font-family: var(--f-display); font-weight: 400; font-variant-numeric: tabular-nums; font-size: var(--s38); letter-spacing: .01em; margin-bottom: 18px !important; }
.clock small { font-family: var(--f-text); }
.clock-label { font-size: var(--s14); }

/* the live chart: one instrument, square, telemetry strip over the candles */
.lv { padding: 0 0 12px; gap: 0; }
.live-head { padding: 14px 18px 12px; align-items: center; }
.live-head p { font-size: var(--s12); }
.live-tag { font-size: var(--s14) !important; }
.live-id { font-family: var(--f-mono); color: var(--muted); }
.lv .tele { display: grid; gap: 0; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); }
.lv .tele > div { padding: 10px 18px 12px; }
.live-read p { margin: 0; }
.live-bal { font-size: var(--s28); line-height: 1.1; }
.live-chg, .live-hour, .live-left { font-size: var(--s18); line-height: 1.55; }
.live-hour { color: var(--ink); margin-left: 0 !important; }
.live-left b { font-weight: 400; color: var(--accent); }
.lv .live-box { margin: 10px 8px 0 18px; }
@media (max-width: 600px) {
  .lv .tele { grid-template-columns: 1fr 1fr; }
  .lv .tele > div { padding: 8px 14px 10px; }
  .lv .tele > div:nth-child(3) { border-left: 0; }
  .lv .tele > div:nth-child(n+3) { border-top: 1px solid var(--glass-line); }
  .live-hour { display: block; }
  .live-bal { font-size: var(--s21); }
  .live-chg, .live-hour, .live-left { font-size: var(--s16); }
  .live-head { padding: 12px 14px 10px; }
  .lv .live-box { margin: 8px 4px 0 10px; height: 260px; }
}

/* section headings stand on the section line; the band's own hairline is the ruler */
.stage-head .h, .board-head .h, .faq-side .h { margin-bottom: 14px; }
.stage-art { border: 0; }
.podium .name { font-family: var(--f-display); font-weight: 500; letter-spacing: .01em; }
.podium .pl { font-family: var(--f-mono); font-size: var(--s12); }

/* leaderboard instrument */
.board-head .h { margin-bottom: 0; }
.board-head { margin-bottom: 22px; }
.out-h { font-family: var(--f-display); font-weight: 500; font-size: var(--s-h2); line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.lb th { font-size: var(--s12); }
.lb .bal { white-space: nowrap; }

/* steps hang from one ruler: a tick where each step begins, the number lit in accent */
.steps h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--s18); text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; }
.steps .n { font-family: var(--f-mono); font-size: var(--s14); }
@media (min-width: 900px) {
  .steps li { position: relative; }
  .steps li::after { content: ""; position: absolute; left: 0; top: -1px; width: 1px; height: 9px; background: var(--tick); }
}

/* rule chart sits on a ruler too */
.chart-box { border-top-color: var(--glass-line); }

/* closing band: the second desk photo framed the same way */
.closing .h { font-size: var(--s-hero); line-height: .92; max-width: 16ch; }

/* the drift moves the picture inside its frame, never the frame */
.hero-media { animation: none; }
.hero-img { animation: settle 1.6s var(--ease) both, drift 34s ease-in-out 1.6s infinite alternate; }
.hero.off .hero-img { animation-play-state: paused; }