/* SLIDE 5 · Noise formula — bias² + noise² reveal in two halves */

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

.slide-5 .stage-5 {
  display: flex; flex-direction: column;
  align-items: center;
  max-width: 1200px; width: 100%;
  gap: 4vh;
}

.slide-5 .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--paper-ghost);
  text-transform: uppercase;
  display: flex; gap: 10px;
  opacity: 0;
}
.slide-5 .eyebrow .sep { opacity: 0.5; }
.slide-5.started .eyebrow { animation: s5-fade 700ms var(--ease-out-quart) 300ms forwards; }

.slide-5 .formula {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "wght" 500;
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  flex-wrap: wrap;
  justify-content: center;
}

.slide-5 .formula .part {
  opacity: 0;
  transform: translateY(10px);
  display: inline-block;
}

.slide-5 .formula sup {
  font-size: 0.48em;
  font-style: normal;
  font-weight: 500;
  /* Explicit vertical offset + left margin so the ² doesn't collide with
     italic Fraunces swashes on the preceding letter. */
  vertical-align: 0.9em;
  line-height: 0;
  letter-spacing: 0;
  margin-left: 0.08em;
}

.slide-5 .formula .op { color: var(--paper-dim); font-style: normal; }
.slide-5 .formula .op-plus { color: var(--accent); }
.slide-5 .formula .part-noise {
  color: var(--accent);
  font-weight: 600;
  font-size: 1.2em; /* typographically heavier — this is the one that matters */
}

.slide-5.started .part-result { animation: s5-rise 900ms var(--ease-out-quart) 900ms forwards; }
.slide-5.started .op:not(.op-plus) { animation: s5-rise 700ms var(--ease-out-quart) 1400ms forwards; }
.slide-5.started .part-bias { animation: s5-rise 900ms var(--ease-out-quart) 1600ms forwards; }
.slide-5.started .op-plus { animation: s5-rise 700ms var(--ease-out-quart) 2500ms forwards; }
.slide-5.started .part-noise { animation: s5-rise 900ms var(--ease-out-quart) 2700ms forwards; }

.slide-5 .caption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0;
}
.slide-5.started .caption { animation: s5-fade 900ms var(--ease-out-quart) 3800ms forwards; }

/* dartboards — demonstrate bias vs noise via scattered circles */
.slide-5 .dartboards {
  display: flex;
  gap: 5vw;
  margin-top: 1vh;
  color: var(--paper);
}
.slide-5 .board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
}
.slide-5.started .board-bias  { animation: s5-fade 700ms var(--ease-out-quart) 4200ms forwards; }
.slide-5.started .board-noise { animation: s5-fade 700ms var(--ease-out-quart) 4800ms forwards; }

.slide-5 .board-svg {
  width: clamp(150px, 14vw, 200px);
  height: clamp(150px, 14vw, 200px);
  color: var(--paper-dim);
}

.slide-5 .dart {
  fill: var(--paper);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.slide-5 .dart-bias  { fill: var(--paper-dim); }
.slide-5 .dart-noise { fill: var(--accent); }

/* dart reveal timings, per-board sequence */
.slide-5.started .board-bias .dart-1 { animation: s5-dart 400ms var(--ease-out-quart) 4400ms forwards; }
.slide-5.started .board-bias .dart-2 { animation: s5-dart 400ms var(--ease-out-quart) 4550ms forwards; }
.slide-5.started .board-bias .dart-3 { animation: s5-dart 400ms var(--ease-out-quart) 4700ms forwards; }
.slide-5.started .board-noise .dart-1 { animation: s5-dart 400ms var(--ease-out-quart) 5100ms forwards; }
.slide-5.started .board-noise .dart-2 { animation: s5-dart 400ms var(--ease-out-quart) 5200ms forwards; }
.slide-5.started .board-noise .dart-3 { animation: s5-dart 400ms var(--ease-out-quart) 5300ms forwards; }
.slide-5.started .board-noise .dart-4 { animation: s5-dart 400ms var(--ease-out-quart) 5400ms forwards; }
.slide-5.started .board-noise .dart-5 { animation: s5-dart 400ms var(--ease-out-quart) 5500ms forwards; }

@keyframes s5-dart {
  from { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

.slide-5 .board-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper-ghost);
}

@keyframes s5-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s5-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}