/* ============================================================
   SLIDE 0 · Title — "1 in 200"
   Grid of 200 dots enacts the 0.5% statistic visually before it's
   named on slide 1. 199 dots fade out in random order, 1 lights up
   red. Title + subtitle land afterward.

   Page load state: all 200 dots rendered, dim, neutral. No title yet.
   First space press triggers .started — animation arc begins:
     0ms     — dots begin fading to .failed in random order (JS)
     1600ms  — last failure placed
     1900ms  — the one survivor lights up .success (JS)
     2400ms  — title fades in (CSS, gated on .started)
     2800ms  — subtitle fades in
     3200ms  — meta fades in
   ============================================================ */

.slide-0 { flex-direction: column; }

.slide-0 .stage-0 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 1100px;
  width: 100%;
}

/* ---------- 200-dot grid ---------- */
.slide-0 .dot-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: clamp(4px, 0.55vw, 10px);
  width: min(62vw, 820px);
  aspect-ratio: 2 / 1;
  margin-bottom: 8vh;
}

.slide-0 .s0-dot {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--paper-ghost);
  opacity: 0.55;
  transition:
    opacity 500ms var(--ease-out-quart),
    transform 500ms var(--ease-out-quart),
    background-color 500ms var(--ease-out-quart),
    box-shadow 500ms var(--ease-out-quart);
}

.slide-0 .s0-dot.failed {
  opacity: 0.14;
  transform: scale(0.7);
}

.slide-0 .s0-dot.success {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.3);
  box-shadow:
    0 0 8px var(--accent),
    0 0 3px var(--accent);
}

/* ---------- title block ---------- */
.slide-0 .title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-variation-settings: "opsz" 144, "wght" 700;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-align: center;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(10px);
}
.slide-0.started .title {
  animation: s0-enter 900ms var(--ease-out-quart) 2400ms forwards;
}

.slide-0 .subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 48;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: -0.005em;
  color: var(--paper-dim);
  text-align: center;
  margin-bottom: 6vh;
  opacity: 0;
  transform: translateY(8px);
}
.slide-0.started .subtitle {
  animation: s0-enter 800ms var(--ease-out-quart) 2800ms forwards;
}

.slide-0 .meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--paper-ghost);
  text-transform: uppercase;
  opacity: 0;
}
.slide-0.started .meta {
  animation: s0-enter 800ms var(--ease-out-quart) 3200ms forwards;
}
.slide-0 .meta .sep { opacity: 0.5; }

@keyframes s0-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}