/* ================================================================
   PUNTOSFAMILIA — ANIMACIONES
   Todos los @keyframes + clases de utilidad de animacion.
   Importar despues de design-system.css.
   ================================================================ */

/* ---- KEYFRAMES ----------------------------------------------- */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulso suave (badges de notificacion, elementos vivos) */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.10); opacity: 0.8; }
}

/* Latido de energia (emoji ⚡ de tier) */
@keyframes energyPulse {
  0%, 100% { transform: scale(1) rotate(0deg);    opacity: 1; }
  40%       { transform: scale(1.3) rotate(-10deg); opacity: 0.75; }
  60%       { transform: scale(1.2) rotate(6deg);   opacity: 0.85; }
}

/* Brillo desplazandose — para barra Legendario y botones especiales */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Glow que respira */
@keyframes breatheGlow {
  0%, 100% { box-shadow: 0 0 10px var(--glow-primary, rgba(139,92,246,0.2)); }
  50%       { box-shadow: 0 0 28px var(--glow-primary, rgba(139,92,246,0.5)),
                           0 0 60px rgba(139, 92, 246, 0.12); }
}

/* Flotacion suave (cards destacadas) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Entrada del contador de puntos */
@keyframes countUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ---- CLASES DE UTILIDAD -------------------------------------- */

.animate-fadeIn    { animation: fadeIn    var(--duration-normal) var(--ease-out) both; }
.animate-fadeInUp  { animation: fadeInUp  var(--duration-normal) var(--ease-out) both; }
.animate-fadeInDown{ animation: fadeInDown var(--duration-normal) var(--ease-out) both; }
.animate-scaleIn   { animation: scaleIn   var(--duration-normal) var(--ease-spring) both; }
.animate-pulse     { animation: pulse     2s ease-in-out infinite; }
.animate-float     { animation: float     3s ease-in-out infinite; }
.animate-spin      { animation: spin      1s linear infinite; }

/* Entrada escalonada para listas de cards */
.animate-stagger > * { animation: fadeInUp var(--duration-normal) var(--ease-out) both; }
.animate-stagger > *:nth-child(1) { animation-delay:   0ms; }
.animate-stagger > *:nth-child(2) { animation-delay:  60ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 120ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 180ms; }
.animate-stagger > *:nth-child(5) { animation-delay: 240ms; }
.animate-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Reducir movimiento para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}