/* ============================================================
   SLIDE 3 · Fox vs Hedgehog
   Typography carries the meaning — weight and posture of each word
   embodies the thinking style. No icons, no lists.

   Animation (on .started):
     300ms   eyebrow fades in
     600ms   divider grows from center
     800ms   both headwords rise
     1400ms  both taglines rise
     2000ms  stat fades in
     2200ms  red arrow slides in
   ============================================================ */

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

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

/* ---------- eyebrow ---------- */
.slide-3 .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--paper-ghost);
  text-transform: uppercase;
  display: flex;
  gap: 10px;
  margin-bottom: 12vh;
  opacity: 0;
}
.slide-3 .eyebrow .sep { opacity: 0.5; }
.slide-3.started .eyebrow {
  animation: s3-fade 700ms var(--ease-out-quart) 300ms forwards;
}

/* ---------- two-column split ---------- */
.slide-3 .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6vw, 10vw, 12vw);
  align-items: baseline;
  justify-items: center;
  width: 100%;
  margin-bottom: 10vh;
  position: relative;
}

.slide-3 .split::after {
  /* visible axis divider — extended range, slightly stronger opacity */
  content: '';
  position: absolute;
  left: 50%;
  top: -4%;
  bottom: -6%;
  width: 1px;
  background: var(--paper-ghost);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
}
.slide-3.started .split::after {
  animation: s3-divider 1000ms var(--ease-out-quart) 600ms forwards;
}

.slide-3 .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  position: relative;
}

/* quote bubble above each column head */
.slide-3 .bubble {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  color: var(--paper-dim);
  padding: 8px 14px;
  border: 1px solid var(--paper-ghost);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  max-width: 280px;
  position: relative;
  opacity: 0;
  transform: translateY(6px);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
/* little tail pointing down */
.slide-3 .bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--ink);
  border-right: 1px solid var(--paper-ghost);
  border-bottom: 1px solid var(--paper-ghost);
}
.slide-3.started .bubble-hedgehog {
  animation: s3-rise 800ms var(--ease-out-quart) 1400ms forwards;
}
.slide-3.started .bubble-fox {
  animation: s3-rise 800ms var(--ease-out-quart) 1700ms forwards;
}

/* ---------- headwords — the typographic statement ---------- */
.slide-3 .head {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  line-height: 1;
  color: var(--paper);
  opacity: 0;
  transform: translateY(10px);
  font-size: clamp(3rem, 6.5vw, 5.5rem);
}

/* Both heads share the same typographic treatment — all-caps, same weight,
   same letter-spacing. The contrast between fox and hedgehog comes from
   the voice bubbles above and taglines below, not from the word styling. */
.slide-3 .head-hedgehog,
.slide-3 .head-fox {
  font-weight: 800;
  font-variation-settings: "opsz" 144, "wght" 800;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

.slide-3.started .head {
  animation: s3-rise 900ms var(--ease-out-quart) 800ms forwards;
}

/* ---------- taglines ---------- */
.slide-3 .tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 48, "wght" 400;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  color: var(--paper-dim);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(10px);
}
.slide-3.started .tag {
  animation: s3-rise 800ms var(--ease-out-quart) 1400ms forwards;
}

/* ---------- stat line ---------- */
.slide-3 .stat {
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--paper);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 2vh;
  opacity: 0;
}
.slide-3 .stat .arrow {
  color: var(--accent);
  font-size: 1.3em;
  font-weight: 400;
  transform: translateX(-10px);
  opacity: 0;
  display: inline-block;
}
.slide-3 .stat .num {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.4em;
  letter-spacing: 0.02em;
}
.slide-3.started .stat {
  animation: s3-fade 900ms var(--ease-out-quart) 2000ms forwards;
}
.slide-3.started .stat .arrow {
  animation: s3-arrow 900ms var(--ease-out-quart) 2200ms forwards;
}

/* ---------- keyframes ---------- */
@keyframes s3-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes s3-divider {
  from { opacity: 0;    transform: scaleY(0); }
  to   { opacity: 0.85; transform: scaleY(1); }
}

@keyframes s3-arrow {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}