/* SLIDE 9 · Kahneman quote */

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

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

.slide-9 .quote-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.7;
  color: var(--paper-dim);
  opacity: 0;
  transform: translateY(10px);
  align-self: center;
  margin-bottom: -1.5vh;
}
.slide-9.started .quote-mark { animation: s9-rise 900ms var(--ease-out-quart) 300ms forwards; }

.slide-9 .quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 400;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-align: center;
}

.slide-9 .q-line {
  min-height: 1.1em; /* reserve line height even before type-out starts */
}
/* blinking caret while typing */
.slide-9 .q-line.typing::after {
  content: '|';
  color: var(--accent);
  margin-left: 2px;
  animation: s9-caret 0.7s steps(2) infinite;
}
.slide-9 .q-line.typed::after { content: ''; }

/* Line 2 "Відкладайте її." is the imperative — the actionable instruction.
   Color it accent red so the punchline carries meaning, not decoration. */
.slide-9 .line-2 { color: var(--accent); }

@keyframes s9-caret {
  0%, 50%       { opacity: 1; }
  50.01%, 100%  { opacity: 0; }
}

/* horizontal line that draws itself beneath the quote */
.slide-9 .underline {
  width: clamp(220px, 28vw, 400px);
  height: 1px;
  background: var(--paper-ghost);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
}
.slide-9.started .underline {
  animation: s9-underline 1400ms var(--ease-out-quart) 4200ms forwards;
}
@keyframes s9-underline {
  from { opacity: 0;   transform: scaleX(0); }
  to   { opacity: 0.7; transform: scaleX(1); }
}

.slide-9 .attribution {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: flex;
  gap: 10px;
  margin-top: 4vh;
  opacity: 0;
}
.slide-9 .attribution .sep { opacity: 0.5; color: var(--paper-ghost); }
.slide-9 .attribution .author { color: var(--paper); }
.slide-9.started .attribution { animation: s9-fade 900ms var(--ease-out-quart) 3200ms forwards; }

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