/* SLIDE 12 · Toolkit — 5 tools, stage-reveal one by one (onAdvance) */

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

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

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

.slide-12 .tools {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8vw, 1.4vw, 2vw);
  width: 100%;
  align-items: stretch;
}

.slide-12 .tool {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border: 1px solid var(--paper-ghost);
  border-radius: 4px;
  gap: 14px;
  background: rgba(255, 255, 255, 0.01);
  opacity: 0.3;
  transition: opacity 700ms var(--ease-out-quart),
              border-color 600ms ease,
              background-color 600ms ease,
              box-shadow 600ms ease;
  min-height: 360px;
  color: var(--paper-dim);
}

/* Children hidden until the card is revealed — the border alone acts as a placeholder. */
.slide-12 .tool > * {
  opacity: 0;
  transition: opacity 700ms var(--ease-out-quart);
}

/* Revealed (past) cards sit at 0.7; active card is fully lit with a red glow. */
.slide-12.started .tool.revealed { opacity: 0.7; }
.slide-12.started .tool.revealed > * { opacity: 1; }

.slide-12 .tool.active {
  opacity: 1 !important;
  border-color: var(--accent);
  background: rgba(230, 57, 70, 0.04);
  color: var(--paper);
  box-shadow: 0 0 24px rgba(230, 57, 70, 0.18);
}
.slide-12 .tool.active > * { opacity: 1; }

/* tool glyph — single editorial icon at top of each card */
.slide-12 .tool-glyph {
  width: 32px;
  height: 32px;
  color: var(--paper-dim);
  margin-bottom: 2px;
}
.slide-12 .tool.active .tool-glyph {
  color: var(--accent);
}

.slide-12 .tool-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.slide-12 .tool-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-variation-settings: "opsz" 144, "wght" 700;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.slide-12 .tool-desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.55;
  color: var(--paper-dim);
  flex: 1 1 auto;
}
.slide-12 .tool-desc em {
  color: var(--paper);
  font-style: normal;
  font-weight: 500;
}

.slide-12 .tool-attr {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-ghost);
  margin-top: auto;
}

.slide-12 .progress {
  display: flex;
  gap: 14px;
  align-items: center;
  opacity: 0;
}
.slide-12.started .progress { animation: s12-fade 700ms var(--ease-out-quart) 800ms forwards; }

.slide-12 .p-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--paper-ghost);
  background: transparent;
  transition: background 400ms ease,
              border-color 400ms ease,
              transform 400ms ease,
              box-shadow 400ms ease;
}
.slide-12 .p-dot.past {
  background: var(--paper-dim);
  border-color: var(--paper-dim);
}
.slide-12 .p-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 10px var(--accent);
}

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