/* SLIDE 7 · Satopää decomposition — 50/25/25 bar */

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

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

.slide-7 .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;
  opacity: 0;
}
.slide-7 .eyebrow .sep { opacity: 0.5; }
.slide-7.started .eyebrow { animation: s7-fade 700ms var(--ease-out-quart) 300ms forwards; }

.slide-7 .headline {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "wght" 600;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  text-align: center;
  opacity: 0; transform: translateY(10px);
}
.slide-7.started .headline { animation: s7-rise 900ms var(--ease-out-quart) 700ms forwards; }

.slide-7 .bar-viz {
  width: 100%;
  max-width: 900px;
  display: flex; flex-direction: column;
  gap: 18px;
}

.slide-7 .bar-track {
  display: flex;
  height: clamp(72px, 9vw, 120px);
  border: 1px solid var(--paper-ghost);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.slide-7 .bar-seg {
  height: 100%;
  width: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 1400ms var(--ease-out-quart);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: var(--paper);
  font-feature-settings: "tnum" 1;
}

.slide-7 .bar-noise { background: var(--accent); color: var(--ink); }
.slide-7 .bar-info  { background: var(--paper-dim); color: var(--ink); }
/* Bias: medium-dark warm gray — distinct from both paper-dim above and the
   ink background around it, so the segment is clearly visible. */
.slide-7 .bar-bias  { background: #5a554c; color: var(--paper); }

.slide-7 .bar-inner-num { opacity: 0; transition: opacity 500ms ease 800ms; }

.slide-7.started .bar-noise { width: 50%; transition-delay: 1300ms; }
.slide-7.started .bar-info  { width: 25%; transition-delay: 1600ms; }
.slide-7.started .bar-bias  { width: 25%; transition-delay: 1900ms; }
.slide-7.started .bar-seg .bar-inner-num { opacity: 1; transition-delay: 2400ms; }

.slide-7 .bar-legend {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0;
}
.slide-7.started .bar-legend { animation: s7-fade 800ms var(--ease-out-quart) 3000ms forwards; }

.slide-7 .leg-item { display: flex; align-items: center; gap: 8px; }
.slide-7 .leg-dot { width: 10px; height: 10px; border-radius: 50%; }
.slide-7 .leg-noise .leg-dot { background: var(--accent); }
.slide-7 .leg-info .leg-dot  { background: var(--paper-dim); }
.slide-7 .leg-bias .leg-dot  { background: #5a554c; }

.slide-7 .caption {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--paper-dim);
  text-align: center;
  max-width: 600px;
  opacity: 0;
}
.slide-7.started .caption { animation: s7-fade 800ms var(--ease-out-quart) 3400ms forwards; }

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