/* transitions.css — animaciones de entrada escalonadas y reduced-motion */

/* Elementos animables: entran con fade + leve desplazamiento al activarse la slide */
[data-animate] {
  opacity: 0;
  transform: translateY(18px);
}
.slide.is-active [data-animate] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}

/* La cabecera entra primero, sin depender del índice de body */
.slide.is-active .slide-head [data-animate] { transition-delay: 60ms; }

/* Entrada de la slide: deslizamiento direccional coordinado (más carácter que un corte).
   El stagger de [data-animate] entra encima; la slide saliente mantiene su fade. */
.slide.is-active { animation: slideEnter 0.55s var(--ease) both; }
#stage.nav-back .slide.is-active { animation-name: slideEnterBack; }
@keyframes slideEnter {
  from { opacity: 0; transform: translateX(34px) scale(0.994); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideEnterBack {
  from { opacity: 0; transform: translateX(-34px) scale(0.994); }
  to   { opacity: 1; transform: none; }
}

/* Barra apilada de proporción: los segmentos crecen desde la base al entrar.
   Estado base = scaleY(1) (degradación elegante: si no anima, se ve completa). */
.slide.is-active .sb-seg { animation: sbGrow 0.9s var(--ease) forwards; }
.slide.is-active .sb-seg.tone-amber { animation-delay: 0.18s; }
.slide.is-active .sb-seg.tone-green,
.slide.is-active .sb-seg.tone-blue { animation-delay: 0.34s; }
@keyframes sbGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Slide P/E: la barra crece desde abajo, luego la línea de referencia y los
   textos entran encadenados. Estado base visible (degradación elegante). */
.slide.is-active .pe-seg { animation: sbGrow 0.85s var(--ease) both; }
.slide.is-active .pe-base { animation-delay: 0.15s; }
.slide.is-active .pe-prima { animation-delay: 0.35s; }
.slide.is-active .pe-hero { animation: peRise 0.6s var(--ease) 0.1s both; }
.slide.is-active .pe-ticks { animation: peFade 0.5s var(--ease) 0.6s both; }
.slide.is-active .pe-ref { animation: peFade 0.55s var(--ease) 0.85s both; }
.slide.is-active .pe-side-l { animation: peRise 0.6s var(--ease) 0.55s both; }
.slide.is-active .pe-side-r { animation: peRise 0.6s var(--ease) 0.7s both; }
.slide.is-active .pe-foot { animation: peRise 0.6s var(--ease) 0.95s both; }
@keyframes peRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes peFade { from { opacity: 0; } to { opacity: 1; } }

/* Conclusión: la barra de brecha crece al entrar. Base visible (degradación elegante). */
.conc-slide.is-active .conc-barfill { animation: concBar 0.9s var(--ease) 0.5s both; }
@keyframes concBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cierre Graham: la frase se escribe carácter por carácter; el autor entra al final. */
.conc2-slide.is-active .conc2-quote .tw-c { animation: twIn 0.12s linear forwards; animation-delay: calc(var(--ci, 0) * 42ms + 450ms); }
.conc2-slide.is-active .conc2-author { animation: twIn 0.5s var(--ease) forwards; animation-delay: calc(var(--ci, 0) * 42ms + 650ms); }
@keyframes twIn { from { opacity: 0; } to { opacity: 1; } }

/* Respeto por usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active,
  [data-animate], .slide.is-active [data-animate],
  .hm-cell, .is-active .hm-cell,
  .sb-seg, .slide.is-active .sb-seg,
  .pe-seg, .pe-hero, .pe-ticks, .pe-ref, .pe-side-l, .pe-side-r, .pe-foot,
  .conc-barfill, .tw-c, .conc2-author,
  #progress, .nav-btn {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  [data-animate] { opacity: 1 !important; }
  .hm-cell { opacity: 1 !important; }
  .tw-c, .conc2-author { opacity: 1 !important; }
}