/**
 * animations.css
 * ------------------------------------------------------------------
 * Todas las animaciones CSS reutilizables de la app: fade, slide,
 * scale, glow, pulse, ripple y gradientes animados.
 * ------------------------------------------------------------------
 */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn var(--transition-base) ease both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp var(--transition-slow) both; }

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px) translateX(-50%); }
  to { opacity: 1; transform: translateY(0) translateX(-50%); }
}
.slide-in-up { animation: slideInUp var(--transition-base) ease both; }

@keyframes fadeOut {
  to { opacity: 0; transform: translateY(-8px) translateX(-50%); }
}
.fade-out { animation: fadeOut var(--transition-base) ease forwards; }

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.scale-in { animation: scaleIn var(--transition-base) both; }

@keyframes pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.pulse { animation: pulse 400ms ease; }

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255, 77, 109, 0); }
}
.match-card.is-live { animation: livePulse 2.4s ease-in-out infinite; }

@keyframes goalGlow {
  0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.6); }
  100% { box-shadow: 0 0 30px 6px rgba(0, 212, 255, 0); }
}
.goal-flash { animation: goalGlow 900ms ease-out; }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient-text {
  background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-violet), var(--color-accent-cyan));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s linear infinite;
}

/* Ripple de clic (creado dinámicamente por animations.js) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.35);
  transform: scale(0);
  animation: rippleEffect 550ms ease-out;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(2.2); opacity: 0; }
}

.round-column { animation: fadeInUp 500ms both; }
.round-column:nth-child(1) { animation-delay: 0ms; }
.round-column:nth-child(2) { animation-delay: 80ms; }
.round-column:nth-child(3) { animation-delay: 160ms; }
.round-column:nth-child(4) { animation-delay: 240ms; }
.round-column:nth-child(5) { animation-delay: 320ms; }
.round-column:nth-child(6) { animation-delay: 400ms; }

/* Respeta la preferencia de "menos movimiento" del sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}