/* ============================================================
   animations.css — Coreografía de entrada/permanencia/salida
   Cada elemento con [data-anim] arranca oculto. Al entrar el slide
   (.is-in) los hijos animan con retardo incremental (--i * --stagger).
   Al salir (.is-out) se desvanecen rápido y coordinados.
   ============================================================ */

[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dur-in) var(--ease),
    transform var(--dur-in) var(--ease);
  /* retardo = posición en el stagger + retardo explícito opcional (--delay) */
  transition-delay: calc(var(--i, 0) * var(--stagger) + var(--delay, 0ms));
}

/* Estados iniciales por tipo de animación */
[data-anim="fade"]       { }
[data-anim="fade-up"]    { transform: translateY(48px); }
[data-anim="fade-down"]  { transform: translateY(-48px); }
[data-anim="fade-left"]  { transform: translateX(48px); }
[data-anim="fade-right"] { transform: translateX(-48px); }
[data-anim="scale"]      { transform: scale(0.72); }
[data-anim="scale-soft"] { transform: scale(0.92); }
[data-anim="drop"]       { transform: translateY(-62%); }    /* baja desde arriba */

/* ---- Entrada: el slide activo dispara la coreografía ---- */
.is-in [data-anim] {
  opacity: 1;
  transform: none;
}

/* ---- Salida: rápido, sin stagger, coordinado ---- */
.is-out [data-anim] {
  opacity: 0;
  transform: translateY(-24px) scale(0.98);
  transition:
    opacity var(--dur-out) var(--ease-in),
    transform var(--dur-out) var(--ease-in);
  transition-delay: 0s;
}

/* ============================================================
   Keyframes reutilizables
   ============================================================ */
@keyframes kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}

/* Trazado de SVG (stroke-dasharray) — para futuras animaciones de línea */
@keyframes trazo {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}

/* Manito haciendo clic en loop (sobre el botón INICIO) */
.hand-loop {
  transform-box: fill-box;
  transform-origin: top center;
  animation: handtap 1.15s ease-in-out infinite;
}
@keyframes handtap {
  0%, 100% { transform: translateY(0) scale(1); }
  45%      { transform: translateY(14px) scale(0.94); }
  60%      { transform: translateY(14px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .hand-loop { animation: none; }
}