/**
 * slide-animations.css — Animaciones tipo PowerPoint al cambiar de slide.
 * Entrada del panel (fade + slide up) y revelado escalonado (stagger) del contenido.
 * Respeta prefers-reduced-motion.
 */

@keyframes slide-panel-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-item-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Duración y delays estándar */
:root {
  --slide-panel-duration: 0.4s;
  --slide-item-duration: 0.35s;
  --slide-stagger-step: 0.08s;
}

/* Entrada del panel al cambiar de slide */
.lesson-panel__scroll.slide-entering {
  animation: slide-panel-in var(--slide-panel-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Stagger: elementos del .lesson-content se revelan uno tras otro */
.lesson-panel__scroll.slide-entering .lesson-content > * {
  animation: slide-item-in var(--slide-item-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(1)  { animation-delay: 0.05s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(2)  { animation-delay: 0.13s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(3)  { animation-delay: 0.21s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(4)  { animation-delay: 0.29s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(5)  { animation-delay: 0.37s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(6)  { animation-delay: 0.45s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(7)  { animation-delay: 0.53s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(8)  { animation-delay: 0.61s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(9)  { animation-delay: 0.69s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(10) { animation-delay: 0.77s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(11) { animation-delay: 0.85s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(12) { animation-delay: 0.93s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(13) { animation-delay: 1.01s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(14) { animation-delay: 1.09s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(15) { animation-delay: 1.17s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(16) { animation-delay: 1.25s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(17) { animation-delay: 1.33s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(18) { animation-delay: 1.41s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(19) { animation-delay: 1.49s; }
.lesson-panel__scroll.slide-entering .lesson-content > *:nth-child(20) { animation-delay: 1.57s; }

/* Encabezado del slide (título + contador): animar junto con el primer bloque */
.lesson-panel__scroll.slide-entering .slide-content__header {
  animation: slide-item-in var(--slide-item-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
  animation-delay: 0s;
}

/* Slide art (SVG): entrada suave si está presente */
.lesson-panel__scroll.slide-entering .lesson-panel__slide-art {
  animation: slide-panel-in var(--slide-panel-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
  animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-panel__scroll.slide-entering,
  .lesson-panel__scroll.slide-entering .lesson-content > *,
  .lesson-panel__scroll.slide-entering .slide-content__header,
  .lesson-panel__scroll.slide-entering .lesson-panel__slide-art {
    animation: none;
  }
}