/* SLIDE 10 · Mirror (rhetorical, no collection)
   Stage A · .started      prompt + hint
   Stage B · .stage-1       typical PM-audience distribution + median
   Stage C · .stage-2       three baseline comparisons (Flyvbjerg / Standish / typical)
*/

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

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

.slide-10 .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;
  margin-bottom: 2vh;
}
.slide-10 .eyebrow .sep { opacity: 0.5; }
.slide-10.started .eyebrow { animation: s10-fade 700ms var(--ease-out-quart) 200ms forwards; }

.slide-10 .prompt {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "wght" 500;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: font-size 600ms var(--ease-out-quart),
              color 500ms ease;
}
.slide-10 .prompt em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.slide-10.started .prompt { animation: s10-rise 900ms var(--ease-out-quart) 500ms forwards; }

.slide-10.stage-1 .prompt,
.slide-10.stage-2 .prompt {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--paper-dim);
}
.slide-10.stage-1 .prompt em,
.slide-10.stage-2 .prompt em {
  color: var(--paper-dim);
}

/* histogram */
.slide-10 .histogram-block {
  width: 100%;
  max-width: 800px;
  display: flex; flex-direction: column;
  gap: 2vh;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 700ms var(--ease-out-quart),
              transform 700ms var(--ease-out-quart);
}
.slide-10.stage-1 .histogram-block,
.slide-10.stage-2 .histogram-block {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

.slide-10 .histogram {
  display: flex;
  gap: 12px;
  height: 220px;
  align-items: flex-end;
  width: 100%;
}

.slide-10 .bar {
  flex: 1 1 0;
  background: var(--paper-ghost);
  border-radius: 2px 2px 0 0;
  height: 0%;
  position: relative;
  transition: height 1200ms var(--ease-out-quart);
}

.slide-10 .bar .bar-lbl {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

/* stylized distribution: typical PM audience clusters at 61-80 */
.slide-10.stage-1 .bar[data-bucket="0-20"],
.slide-10.stage-2 .bar[data-bucket="0-20"]   { height: 8%;  background: var(--paper-ghost); transition-delay: 400ms; }
.slide-10.stage-1 .bar[data-bucket="21-40"],
.slide-10.stage-2 .bar[data-bucket="21-40"]  { height: 22%; background: var(--paper-ghost); transition-delay: 500ms; }
.slide-10.stage-1 .bar[data-bucket="41-60"],
.slide-10.stage-2 .bar[data-bucket="41-60"]  { height: 45%; background: var(--paper-dim);   transition-delay: 600ms; }
.slide-10.stage-1 .bar[data-bucket="61-80"],
.slide-10.stage-2 .bar[data-bucket="61-80"]  { height: 88%; background: var(--accent);      transition-delay: 700ms; }
.slide-10.stage-1 .bar[data-bucket="81-100"],
.slide-10.stage-2 .bar[data-bucket="81-100"] { height: 52%; background: var(--paper-dim);   transition-delay: 800ms; }

.slide-10 .typical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4vh;
  text-align: center;
}
.slide-10 .typical-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-ghost);
}
.slide-10 .typical-value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-variation-settings: "opsz" 144, "wght" 700;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1;
  color: var(--accent);
  font-feature-settings: "tnum" 1;
  display: flex;
  align-items: baseline;
  letter-spacing: -0.01em;
}
.slide-10 .typical-pct {
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 3px;
}

/* baselines — three reality-check values in paper; the red 64% above speaks for itself */
.slide-10 .baselines-scale {
  width: 100%;
  max-width: 800px;
  margin-top: 3vh;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 700ms var(--ease-out-quart),
              transform 700ms var(--ease-out-quart);
}
.slide-10.stage-2 .baselines-scale {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

.slide-10 .baselines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  width: 100%;
}

/* directional reveals — each baseline slides from its own side */
.slide-10 .bl-from-left   { opacity: 0; transform: translateX(-40px); }
.slide-10 .bl-from-center { opacity: 0; transform: translateY(20px); }
.slide-10 .bl-from-right  { opacity: 0; transform: translateX(40px); }
.slide-10.stage-2 .bl-from-left {
  animation: s10-fromLeft 900ms var(--ease-out-quart) 500ms forwards;
}
.slide-10.stage-2 .bl-from-center {
  animation: s10-fromCenter 900ms var(--ease-out-quart) 800ms forwards;
}
.slide-10.stage-2 .bl-from-right {
  animation: s10-fromRight 900ms var(--ease-out-quart) 1100ms forwards;
}
@keyframes s10-fromLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes s10-fromCenter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes s10-fromRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-10 .bl {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 10px;
  border-top: 1px solid var(--paper-ghost);
}
.slide-10 .bl-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "wght" 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--paper);
  font-feature-settings: "tnum" 1;
  display: flex; align-items: baseline;
}
.slide-10 .bl-val .pct { font-size: 0.6em; margin-left: 1px; color: var(--paper); }
.slide-10 .bl-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

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