/* ==========================================================================
   Symphony Design System v2.0 — Animaciones y Transiciones (animations.css)
   Sistema cinético unificado:
   - Curva canónica: cubic-bezier(0.32, 0.72, 0, 1)
   - 3 duraciones: 180ms (micro), 420ms (base), 900ms (macro)
   - Stagger: 40ms a 80ms
   - Cumplimiento riguroso de prefers-reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fotogramas Clave (Keyframes)
   -------------------------------------------------------------------------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse-subtle {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.25);
  }
  50% {
    box-shadow: 0 0 35px rgba(139, 92, 246, 0.45);
  }
}

/* --------------------------------------------------------------------------
   2. Clases de Utilidad de Animación
   -------------------------------------------------------------------------- */

.sy-float {
  animation: float-subtle 6s ease-in-out infinite;
}

.sy-pulse-glow {
  animation: pulse-subtle 3.5s ease-in-out infinite;
}

/* Fallback progresivo para revelado en scroll */
.reveal-on-scroll {
  opacity: 1;
  transform: none;
}

.reveal-on-scroll.js-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--sy-dur-macro) var(--sy-ease),
              transform var(--sy-dur-macro) var(--sy-ease);
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Cascada escalonada para elementos correlativos */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 60ms; }
.stagger-children > *:nth-child(3) { transition-delay: 120ms; }
.stagger-children > *:nth-child(4) { transition-delay: 180ms; }
.stagger-children > *:nth-child(5) { transition-delay: 240ms; }
.stagger-children > *:nth-child(6) { transition-delay: 300ms; }
.stagger-children > *:nth-child(7) { transition-delay: 360ms; }
.stagger-children > *:nth-child(8) { transition-delay: 420ms; }

/* --------------------------------------------------------------------------
   3. Accesibilidad: Movimiento Reducido (prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll,
  .reveal-on-scroll.js-ready,
  .reveal-on-scroll.in-view {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .sy-float,
  .sy-pulse-glow {
    animation: none !important;
  }
}