/* ============================================================
   SLIDE 1B · Класичні провали
   Stage-based reveals: each row appears on a manual space press.
     Stage 0  — eyebrow + empty damage meter
     Stage 1  — row 1 + damage updates + strike draws
     Stage 2  — row 2 + damage + strike
     ...
     Stage 5  — row 5 + final damage + caption
   ============================================================ */

.slide-1b { flex-direction: column; }

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

/* eyebrow */
.slide-1b .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-1b .eyebrow .sep { opacity: 0.5; }
.slide-1b .eyebrow .num-hero {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.slide-1b.started .eyebrow {
  animation: s1b-fade 700ms var(--ease-out-quart) 300ms forwards;
}

/* running damage meter — visible on entry at $0, tweens up per stage */
.slide-1b .damage-meter {
  /* Pinned to the slide's top-right corner (the .slide element, not the
     inner centered .stage-1b), so it sits in the real viewport corner
     regardless of screen width. */
  position: absolute;
  top: 6vh;
  right: 6vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  padding: 14px 20px;
  border-left: 3px solid var(--accent);
  z-index: 3;
}
/* glow pulse when the damage counter bumps — draws the eye */
.slide-1b .damage-meter.pulsed {
  animation: s1b-damage-pulse 700ms ease-out;
}
@keyframes s1b-damage-pulse {
  0% {
    box-shadow: -4px 0 22px var(--accent),
                -1px 0 8px var(--accent);
    border-left-width: 3px;
  }
  100% {
    box-shadow: none;
    border-left-width: 2px;
  }
}
.slide-1b.started .damage-meter {
  animation: s1b-fade 800ms var(--ease-out-quart) 500ms forwards;
}
.slide-1b .damage-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.slide-1b .damage-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "opsz" 144, "wght" 800;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slide-1b .damage-currency,
.slide-1b .damage-unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--paper-dim);
  margin: 0 2px;
}

.slide-1b .failures {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.slide-1b .row {
  display: grid;
  grid-template-columns: auto 1.4fr 1.5fr 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease-out-quart),
              transform 700ms var(--ease-out-quart);
}

/* row number — small mono prefix, editorial */
.slide-1b .row-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--paper-ghost);
  padding-right: 8px;
  align-self: center;
}

/* Rows reveal progressively as stage-N classes accumulate. Once a row is
   revealed it stays revealed — each subsequent stage only adds. */
.slide-1b.stage-1 .row:nth-of-type(1),
.slide-1b.stage-2 .row:nth-of-type(1),
.slide-1b.stage-3 .row:nth-of-type(1),
.slide-1b.stage-4 .row:nth-of-type(1),
.slide-1b.stage-5 .row:nth-of-type(1),
.slide-1b.stage-2 .row:nth-of-type(2),
.slide-1b.stage-3 .row:nth-of-type(2),
.slide-1b.stage-4 .row:nth-of-type(2),
.slide-1b.stage-5 .row:nth-of-type(2),
.slide-1b.stage-3 .row:nth-of-type(3),
.slide-1b.stage-4 .row:nth-of-type(3),
.slide-1b.stage-5 .row:nth-of-type(3),
.slide-1b.stage-4 .row:nth-of-type(4),
.slide-1b.stage-5 .row:nth-of-type(4),
.slide-1b.stage-5 .row:nth-of-type(5) {
  opacity: 1;
  transform: translateY(0);
}

/* Name — switched to Inter (sans) for legibility of Latin brand names */
.slide-1b .name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--paper);
}

.slide-1b .stat {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--paper-dim);
  line-height: 1.4;
}

.slide-1b .verdict {
  text-align: right;
}

.slide-1b .verdict-text {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  display: inline-block;
}

/* strike-through — draws a line across the verdict ~400ms after row reveals */
.slide-1b .verdict-text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 55%;
  width: 0%;
  height: 1.5px;
  background: var(--accent);
  transition: width 700ms var(--ease-out-quart) 400ms;
  pointer-events: none;
}
.slide-1b.stage-1 .row:nth-of-type(1) .verdict-text::after,
.slide-1b.stage-2 .row:nth-of-type(1) .verdict-text::after,
.slide-1b.stage-3 .row:nth-of-type(1) .verdict-text::after,
.slide-1b.stage-4 .row:nth-of-type(1) .verdict-text::after,
.slide-1b.stage-5 .row:nth-of-type(1) .verdict-text::after,
.slide-1b.stage-2 .row:nth-of-type(2) .verdict-text::after,
.slide-1b.stage-3 .row:nth-of-type(2) .verdict-text::after,
.slide-1b.stage-4 .row:nth-of-type(2) .verdict-text::after,
.slide-1b.stage-5 .row:nth-of-type(2) .verdict-text::after,
.slide-1b.stage-3 .row:nth-of-type(3) .verdict-text::after,
.slide-1b.stage-4 .row:nth-of-type(3) .verdict-text::after,
.slide-1b.stage-5 .row:nth-of-type(3) .verdict-text::after,
.slide-1b.stage-4 .row:nth-of-type(4) .verdict-text::after,
.slide-1b.stage-5 .row:nth-of-type(4) .verdict-text::after,
.slide-1b.stage-5 .row:nth-of-type(5) .verdict-text::after {
  width: 100%;
}

/* caption — only appears after all five rows (stage 5) */
.slide-1b .caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  color: var(--paper-dim);
  text-align: center;
  margin-top: 2vh;
  opacity: 0;
  transition: opacity 900ms ease 900ms;
}
.slide-1b .caption em {
  color: var(--paper);
  font-style: italic;
}
.slide-1b.stage-5 .caption { opacity: 1; }

@keyframes s1b-fade { from { opacity: 0; } to { opacity: 1; } }