/* ==========================================================================
   The Grid — "10/10" layer
   Lights-out intro · split-letter headline · live countdown · live openings
   reaction test · proof strip · build log · shareable grid card
   3D tilt · racing-line progress · scroll-drawn circuit · empty board
   ========================================================================== */

/* ---------- 1. Lights-out hero intro ------------------------------------ */

body.intro-armed .hero-content > * {
  opacity: 0;
  transform: translateY(26px);
}

/* snap hidden instantly — no fade-out flash if first paint already happened */
body.intro-armed:not(.intro-done) .hero-content > * { transition: none; }

body.intro-armed .hero-content .start-lights {
  opacity: 1;
  transform: none;
}

.hero-content > * {
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

body.intro-armed.intro-done .hero-content > * {
  opacity: 1;
  transform: none;
}

/* stagger the punch-in after lights out */
body.intro-done .hero-content .eyebrow        { transition-delay: .05s; }
body.intro-done .hero-content h1              { transition-delay: .16s; }
body.intro-done .hero-content .hero-copy      { transition-delay: .30s; }
body.intro-done .hero-content .hero-actions   { transition-delay: .42s; }
body.intro-done .hero-content .hero-meta      { transition-delay: .54s; }
body.intro-done .hero-content .hero-countdown { transition-delay: .64s; }

/* when JS drives the lights, the old CSS loop steps aside */
.start-lights.js-driven i { animation: none !important; }

.start-lights i.lit {
  background: var(--red) !important;
  border-color: var(--red) !important;
  box-shadow: 0 0 18px rgba(255, 59, 104, .85), 0 0 44px rgba(255, 59, 104, .4) !important;
}

/* the snap: all lights die together */
.start-lights.lights-out i {
  animation: none !important;
  background: #101116 !important;
  border-color: rgba(244, 241, 234, .1) !important;
  box-shadow: none !important;
  transition: background .05s ease, box-shadow .05s ease;
}

/* ---------- 2. Split-letter headline reveal ------------------------------- */

.hero h1 .word {
  display: inline-block;
  white-space: nowrap;
}

.hero h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(5deg);
  transform-origin: bottom left;
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, .8, .24, 1);
}

.hero h1.chars-in .char {
  opacity: 1;
  transform: none;
}

/* ---------- 3. Timing-tower countdown ------------------------------------ */

.hero-countdown {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding: 14px 18px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 16, 21, .72), rgba(8, 9, 12, .72));
  backdrop-filter: blur(6px);
}

.hero-countdown .cd-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}

.countdown-units { display: flex; gap: 14px; }

.countdown-units .cd-cell { text-align: center; min-width: 44px; }

.countdown-units .cd-num {
  display: block;
  font-family: var(--mono);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.countdown-units .cd-unit {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* big countdown inside the reserve section */
.reserve-countdown {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid #493819;
  background: #151208;
}

.reserve-countdown .cd-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}

.reserve-countdown .countdown-units .cd-num { font-size: clamp(26px, 4vw, 40px); }

/* founding-rate deadline line under the price board */
.founding-deadline {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: center;
}

.founding-deadline b { color: var(--paper); }

/* ---------- 4. Real live openings on the homepage ------------------------ */

.live-booking-screen .live-openings { display: flex; flex-wrap: wrap; gap: 8px; }

.live-booking-screen .live-openings > span,
.live-opening-chip {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--paper);
  background: rgba(244, 241, 234, .04);
}

.live-opening-chip { display: inline-flex; flex-direction: column; gap: 2px; text-align: left; }

.live-opening-chip small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}

.live-opening-chip.few small { color: var(--amber); }

.live-openings-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-openings-note::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(113, 246, 173, .8);
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- 5. Proof strip ------------------------------------------------ */

.proof-strip { border-block: 1px solid var(--line); background: var(--surface); }

.proof-strip .shell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding-block: 44px;
}

.proof-lead p { margin: 0; max-width: 30ch; color: var(--muted); font-size: 15px; }
.proof-lead .eyebrow { margin-bottom: 8px; }
.proof-lead h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.02; text-transform: uppercase; }
.proof-lead h2 em { color: var(--red); font-style: normal; }

.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.proof-stats li { background: var(--ink); padding: 22px 20px; }
.proof-stats b { display: block; font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 900; line-height: 1; letter-spacing: .01em; }
.proof-stats b sup { font-size: .45em; color: var(--red); }
.proof-stats span { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }

.proof-source { margin-top: 14px; font-size: 12px; color: var(--dim); }
.proof-source a { color: var(--amber); border-bottom: 1px solid rgba(255, 178, 26, .35); }

/* ---------- 6. Build log -------------------------------------------------- */

.buildlog-section { background: var(--ink); }

.buildlog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.buildlog-entry {
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.buildlog-entry figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; }
.buildlog-entry img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.buildlog-entry:hover img { transform: scale(1.05); }

.buildlog-body { padding: 20px 22px 24px; }

.buildlog-date {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}

.buildlog-body h3 { margin: 8px 0 8px; font-size: 20px; text-transform: uppercase; letter-spacing: .01em; }
.buildlog-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.buildlog-note { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* ---------- 7. Reaction test ---------------------------------------------- */

.reaction-section { background: linear-gradient(180deg, var(--ink), #0b0d13 60%, var(--ink)); }

.reaction-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}

.reaction-copy p { color: var(--muted); max-width: 46ch; }

.reaction-best {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  font-family: var(--mono);
}

.reaction-best small { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.reaction-best b { font-size: 26px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.reaction-best b:empty::before { content: "———"; color: var(--dim); }

.reaction-card {
  position: relative;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  overflow: hidden;
}

.reaction-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(239, 0, 61, .12), transparent 55%);
  pointer-events: none;
}

.reaction-lights { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; }

.reaction-lights i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2a2d35;
  border: 1px solid rgba(244, 241, 234, .14);
  transition: background .1s ease, box-shadow .1s ease;
}

.reaction-lights i.lit { background: var(--red); border-color: var(--red); box-shadow: 0 0 16px rgba(255, 59, 104, .8); }

.reaction-pad {
  position: relative;
  width: 100%;
  padding: 30px 20px;
  border: 1px dashed rgba(244, 241, 234, .25);
  border-radius: 10px;
  background: rgba(244, 241, 234, .03);
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  user-select: none;
  -webkit-user-select: none;
}

.reaction-pad:hover { border-color: var(--red); }
.reaction-pad:active { transform: scale(.99); }

.reaction-pad.armed { border-color: var(--amber); background: rgba(255, 178, 26, .05); cursor: wait; }
.reaction-pad.go { border-color: var(--green); background: rgba(113, 246, 173, .1); border-style: solid; }
.reaction-pad.false-start { border-color: var(--red); background: rgba(239, 0, 61, .12); }

.reaction-result {
  min-height: 56px;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.reaction-result b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.reaction-result b.good { color: var(--green); }
.reaction-result b.ok { color: var(--amber); }
.reaction-result b.slow { color: var(--red); }

.reaction-card .text-link { display: inline-block; margin-top: 10px; }

/* ---------- 8. Shareable grid card (waitlist) ------------------------------ */

.grid-card {
  margin-top: 26px;
  border: 1px solid #493819;
  background: linear-gradient(160deg, #151208, #0d0f14 70%);
  padding: 26px;
  position: relative;
  overflow: hidden;
}

.grid-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(244, 241, 234, .045) 46px 48px);
  pointer-events: none;
}

.grid-card[hidden] { display: none; }

.grid-card .gc-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}

.grid-card .gc-position {
  font-family: var(--display);
  font-size: clamp(64px, 10vw, 110px);
  font-weight: 900;
  line-height: .95;
  color: var(--paper);
  margin: 6px 0 4px;
}

.grid-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; max-width: 44ch; }

.gc-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }

.gc-actions .button { flex: 0 0 auto; }

.gc-copied {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  align-self: center;
}

/* ---------- 9. 3D tilt on experience cards --------------------------------- */

.experience-card.tiltable {
  transition: opacity .8s ease, transform .18s ease-out;
  will-change: transform;
}

/* ---------- 10. Racing-line scroll progress -------------------------------- */

.race-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 300;
  pointer-events: none;
}

.race-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--amber));
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- 11. Scroll-drawn circuit divider -------------------------------- */

.circuit-divider { padding: clamp(10px, 3vw, 30px) 0 0; overflow: hidden; }

.circuit-divider svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
}

.circuit-underlay { stroke: rgba(244, 241, 234, .09); stroke-width: 2; }
.circuit-line {
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255, 59, 104, .55));
}
.circuit-dot { fill: var(--amber); opacity: 0; transition: opacity .3s ease; }

/* ---------- 12. The empty board --------------------------------------------- */

.board-section { background: var(--surface); border-block: 1px solid var(--line); }

.board-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}

.board-copy p { color: var(--muted); max-width: 46ch; }

.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
}

.board-list li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
}

.board-list li:last-child { border-bottom: 0; }
.board-list li:first-child { background: rgba(255, 178, 26, .06); }

.board-list li:first-child .board-pos { color: var(--amber); }

.board-pos { font-weight: 800; font-size: 15px; color: var(--paper); }
.board-name { color: var(--dim); letter-spacing: .42em; font-size: 13px; }
.board-time { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }

.board-note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
}

/* ---------- 13. View transitions -------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .28s ease both; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 14. Responsive + reduced motion -------------------------------- */

@media (max-width: 900px) {
  .proof-strip .shell { grid-template-columns: 1fr; }
  .proof-stats { grid-template-columns: repeat(2, 1fr); }
  .buildlog-list { grid-template-columns: 1fr; }
  .reaction-layout { grid-template-columns: 1fr; }
  .board-layout { grid-template-columns: 1fr; }
  .hero-countdown { gap: 12px; padding: 12px 14px; }
  .countdown-units { gap: 9px; }
  .countdown-units .cd-cell { min-width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > *,
  .hero h1 .char,
  .buildlog-entry img { transition: none !important; opacity: 1 !important; transform: none !important; }
  .live-openings-note::before { animation: none !important; }
}

/* ==========================================================================
   Wave 3 — counters, magnetic buttons, kinetic marquee
   (headline letter-spacing now lives in site.css so every page gets it)
   ========================================================================== */

/* ---------- 16. Magnetic buttons ------------------------------------------ */

.button.magnetic { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }

/* ---------- 17. Kinetic marquee -------------------------------------------- */

.kinetic-marquee {
  overflow: hidden;
  padding: clamp(34px, 6vw, 70px) 0;
  border-top: 1px solid var(--line);
  background: var(--ink);
}

.kinetic-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.kinetic-chunk {
  flex: 0 0 auto;
  padding-right: 48px;
  font-family: var(--display);
  font-size: clamp(58px, 9vw, 128px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper);
}

.kinetic-chunk em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.5px rgba(244, 241, 234, .55);
}

.kinetic-chunk b { color: var(--red); font-weight: 900; }

/* ---------- 18. Scramble flash (glyphs inherit eyebrow amber) -------------- */

.eyebrow { min-height: 1em; }