/* Landing: one evening session at the track. The page grade runs from dusk to night as you scroll,
   and each section's floodlights come on when it arrives (home.js adds .lights, then .lit per section). */

.home {
  --dusk: #17213A;
  --night: #101218;
  --ember: 201 119 63;
  --lamp: 236 255 196;
  --soft: #A9AFBE;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  overflow-x: clip;
}
.home main {
  background:
    radial-gradient(90% 40% at 80% 0%, rgb(var(--ember) / 0.16), transparent 70%),
    linear-gradient(180deg, var(--dusk) 0, var(--night) 22%, var(--bg) 50%);
}
.home h2 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.home h3 { font-weight: 900; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; }
.home .note { color: var(--soft); }

.home .bar { position: absolute; inset: 0 0 auto; z-index: 3; max-width: none; padding: 20px max(var(--gutter), calc((100vw - 1200px) / 2)); }
.home .brand { font-size: 22px; }

/* Hero: dusk */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 0 clamp(20px, 3vw, 36px); background: var(--dusk); isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgb(11 11 12 / 0.55) 0, transparent 22%),
  linear-gradient(180deg, transparent 38%, rgb(23 33 58 / 0.7) 62%, var(--dusk) 100%); }
@media (max-width: 959px) {
  .hero-photo::after { background:
    linear-gradient(180deg, rgb(11 11 12 / 0.5) 0, rgb(23 33 58 / 0.25) 24%, rgb(23 33 58 / 0.82) 50%, var(--dusk) 78%); }
}
.hero-copy { align-self: end; width: 100%; max-width: 1200px; margin: 0 auto; padding: 96px var(--gutter) 0; }
.hero-copy h1 { font-size: clamp(44px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.035em; }
.hero-copy > p:first-of-type { color: #DADDE4; font-weight: 600; max-width: 36ch; margin: 18px 0 26px; }
.hero-copy .note { margin-top: 12px; }

@media (min-width: 960px) {
  .hero-copy { display: grid; grid-template-columns: 1fr minmax(0, 660px); }
  .hero-copy > p:first-of-type { max-width: 40ch; }
  .hero-copy > * { grid-column: 2; }
  .hero-copy > .button { justify-self: start; }
}

/* The live 4×4: what every phone in the group shows */
.clock { width: 100%; max-width: 1200px; margin: clamp(28px, 5vh, 56px) auto 0; padding: 22px var(--gutter) 0; display: grid; gap: 14px 56px; border-top: 2px solid rgb(245 245 240 / 0.12); box-shadow: 0 -8px 0 -6px rgb(245 245 240 / 0.12); }
@media (min-width: 960px) { .clock { grid-template-columns: auto 1fr; align-items: end; } }
.clock p { margin: 0; }
.clock-phase { display: flex; gap: 12px; align-items: baseline; font-weight: 900; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.clock-effort { color: var(--soft); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.clock-time { font-weight: 900; font-size: clamp(64px, 9vw, 96px); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); }
.clock[data-kind="easy"] .clock-time, .clock[data-kind="warm"] .clock-time { color: var(--text); }
.clock-run { display: grid; gap: 12px; min-width: 0; }
.clock-cue { color: var(--soft); font-weight: 600; font-style: italic; min-height: 1.55em; }

.strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; height: 12px; }
.seg { flex: var(--d) 1 0; position: relative; overflow: hidden; border-radius: 2px; background: rgb(245 245 240 / 0.12); }
.seg.work { background: rgb(200 245 60 / 0.22); }
.seg::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.seg.easy::after, .seg.warm::after { background: var(--text); }
.seg.done::after { transform: scaleX(1); opacity: 0.45; }
.seg.now::after { transform: scaleX(var(--p, 0)); transition: transform 1s linear; }
@media (prefers-reduced-motion: reduce) { .seg.now::after { transition: none; } }
.strip.whole .seg::after { transform: scaleX(1); opacity: 0.45; }
.strip.whole .seg.work::after { opacity: 1; }
.session-strip { margin-top: 36px; display: grid; gap: 10px; }
.session-strip .strip { height: 14px; }
.strip-labels { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--soft); }
.strip-labels b { color: var(--accent); font-weight: 900; }

.clock-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; font-weight: 600; color: var(--soft); }
.clock-name { color: var(--text); }
.phones { display: inline-flex; gap: 4px; }
.phones i { width: 9px; height: 15px; border-radius: 2.5px; border: 1.5px solid var(--soft); background: var(--accent); background-clip: content-box; padding: 2px 1.5px; }
.clock[data-kind="easy"] .phones i, .clock[data-kind="warm"] .phones i { background-color: var(--text); }
.clock-toggle { margin-left: auto; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(245 245 240 / 0.24); background: transparent; color: var(--text); font: inherit; cursor: pointer; transition: background-color 180ms var(--ease), transform 140ms var(--ease); }
.clock-toggle:hover { background: rgb(245 245 240 / 0.08); }
.clock-toggle:active { transform: scale(0.97); }
.clock.paused .clock-time { opacity: 0.55; }

/* Phase change: the clock and every phone flip together */
@keyframes flip-in { from { opacity: 0; transform: translateY(0.18em); filter: blur(4px); } }
@keyframes phone-flash { 30% { border-color: var(--accent); transform: translateY(-2px); } }
.clock.flip .clock-time, .clock.flip .clock-phase { animation: flip-in 520ms var(--ease); }
.clock.flip .clock-cue { animation: flip-in 520ms var(--ease) 120ms both; }
.clock.flip .phones i { animation: phone-flash 600ms var(--ease); }

/* Scenes */
.scene { position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(88px, 13vw, 168px) var(--gutter) 0; display: grid; gap: 48px; }
.scene p { color: var(--soft); max-width: 50ch; margin: 22px 0 0; }
@media (min-width: 900px) {
  .scene { grid-template-columns: 6fr 5fr; align-items: center; gap: 80px; }
  .scene.flip .scene-media { order: -1; }
}
.scene::before { content: ''; position: absolute; inset: 0 0 auto; height: 90%; z-index: -1; pointer-events: none; background: radial-gradient(34% 60% at 50% 0%, rgb(200 245 60 / 0.16), rgb(var(--lamp) / 0.05) 45%, transparent 75%); }
.scene::after { content: ''; position: absolute; top: 0; left: 50%; width: min(240px, 40%); height: 3px; translate: -50% 0; border-radius: 2px; background: var(--accent); pointer-events: none; }
.lights .scene::after { opacity: 0; }
.lights .scene.lit::after { animation: strike 1000ms linear forwards; }

.scene-media { position: relative; padding: 0 18% 48px 0; }
.scene-media .photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; transition: filter 1100ms var(--ease) 150ms; }
.scene-media .screen { position: absolute; right: 0; bottom: 0; width: 38%; border-radius: 20px; border: 1px solid rgb(245 245 240 / 0.18); background: var(--bg); transition: transform 900ms var(--ease) 350ms, opacity 900ms var(--ease) 350ms; }
.scene-media.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0; align-items: start; }
.scene-media.pair .screen { position: static; width: 100%; }
.scene-media.pair .screen + .screen { margin-top: 64px; }

.ways { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.ways li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgb(245 245 240 / 0.12); color: var(--soft); }
.ways li:last-child { border-bottom: 1px solid rgb(245 245 240 / 0.12); }
.ways b { color: var(--accent); font-weight: 900; }

.cues { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; }
.cues li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline; padding: 6px 0; }
.cues time { color: var(--soft); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cues q { quotes: '“' '”'; font-weight: 900; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.cues li:first-child q, .cues li:last-child q { color: var(--accent); }

.scene p a { color: var(--text); }
.scene .button.ghost { margin-top: 28px; }
.plans { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
@media (min-width: 560px) { .plans { grid-template-columns: 1fr 1fr; gap: 0; } .plans > div + div { padding-left: 28px; border-left: 1px solid rgb(245 245 240 / 0.14); } }
.plans ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--soft); }
.plans > div + div h3 { color: var(--accent); }
.plans .note { margin-top: 14px; font-size: 15px; }

/* Questions: a ruled list beside the heading, the same hairlines as the join list */
@media (min-width: 900px) {
  .scene.faq { grid-template-columns: 5fr 7fr; align-items: start; }
  .faq-head { position: sticky; top: 32px; }
}
.qa { margin: 0; display: grid; }
.qa > div { padding: 22px 0; border-top: 1px solid rgb(245 245 240 / 0.12); }
.qa > div:last-child { border-bottom: 1px solid rgb(245 245 240 / 0.12); }
.qa dt { font-weight: 900; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.qa dd { margin: 8px 0 0; max-width: 60ch; color: var(--soft); }
.qa a { color: var(--text); }
.qa a:hover { color: var(--accent); }

/* Finale: floodlights on */
.finale { position: relative; margin-top: clamp(96px, 14vw, 180px); min-height: min(100svh, 980px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.finale-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.finale::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0, transparent 22%, transparent 45%, rgb(11 11 12 / 0.85) 75%, var(--bg) 100%); }
.finale::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: 0; pointer-events: none; }
.finale-copy { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.finale-copy h2 { font-size: clamp(44px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.035em; }
.finale-copy p:not(.note) { color: #DADDE4; font-weight: 600; margin: 16px 0 26px; max-width: 36ch; }
.finale-copy .note { margin-top: 12px; }
@media (min-width: 960px) {
  .finale { grid-template-columns: 1fr minmax(0, 46%); align-items: stretch; }
  .finale-photo { position: relative; z-index: 0; grid-column: 2; grid-row: 1; height: 100%; object-position: 50% 30%; }
  .finale::before { background: linear-gradient(90deg, var(--bg) 54%, transparent 64%), linear-gradient(180deg, var(--bg) 0, transparent 18%, transparent 80%, var(--bg) 100%); z-index: 1; }
  .finale::after { z-index: 1; }
  .finale-copy { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; max-width: 640px; margin: 0 0 0 max(0px, calc((100vw - 1200px) / 2)); }
}

/* Floodlights: sections wait in the dark, then the lamps strike and the scene comes up */
@keyframes strike { 0% { opacity: 0; } 9% { opacity: 0.9; } 15% { opacity: 0.1; } 26% { opacity: 1; } 32% { opacity: 0.35; } 55%, 100% { opacity: 1; } }
@keyframes power-on { 0% { opacity: 0.82; } 9% { opacity: 0.2; } 15% { opacity: 0.75; } 26% { opacity: 0.1; } 32% { opacity: 0.55; } 60%, 100% { opacity: 0; } }
.lights .scene::before { opacity: 0; }
.lights .scene.lit::before { animation: strike 1000ms linear forwards; }
.lights .scene .scene-copy > * { opacity: 0.3; transform: translateY(14px); transition: opacity 700ms var(--ease) 280ms, transform 700ms var(--ease) 280ms; }
.lights .scene.lit .scene-copy > * { opacity: 1; transform: none; }
.lights .scene .photo { filter: brightness(0.35) saturate(0.5); }
.lights .scene.lit .photo { filter: none; }
.lights .scene .screen { opacity: 0; transform: translateY(32px); }
.lights .scene.lit .screen { opacity: 1; transform: none; }
.lights .scene.lit .pair .screen + .screen { transition-delay: 480ms; }
.lights .cues li { opacity: 0.25; transition: opacity 500ms var(--ease) calc(700ms + var(--i) * 260ms); }
.lights .scene.lit .cues li { opacity: 1; }
.lights .finale::after { opacity: 0.82; }
.lights .finale.lit::after { animation: power-on 1200ms linear forwards; }
.lights .finale .finale-copy > * { opacity: 0.3; transition: opacity 700ms var(--ease) 500ms; }
.lights .finale.lit .finale-copy > * { opacity: 1; }

/* Hero entrance and drift */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  .hero-copy > * { animation: rise 800ms var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .hero-copy > :nth-child(n+3) { animation-delay: 180ms; }
  .clock { animation: rise 800ms var(--ease) 300ms both; }
  @supports (animation-timeline: view()) {
    @keyframes drift { to { transform: translateY(14%) scale(1.06); } }
    .hero-photo img { animation: drift linear both; animation-timeline: view(); animation-range: exit; }
  }
}