/* ============================================================
   HADS LIVE — Animaciones y Efectos
   "El entretenimiento en vivo sin límites"
   Fase 4
   ============================================================ */

/* ── KEYFRAMES ─────────────────────────────────────────────── */

/* Punto LIVE parpadeante */
@keyframes pulse-dot {
  0%, 100% {
    opacity:    1;
    transform:  scale(1);
    box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.6);
  }
  50% {
    opacity:    0.6;
    transform:  scale(1.2);
    box-shadow: 0 0 0 6px rgba(229, 9, 20, 0);
  }
}

/* Grid hero flotando */
@keyframes grid-drift {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(60px);
  }
}

/* Entrada desde abajo */
@keyframes fade-up {
  0% {
    opacity:   0;
    transform: translateY(30px);
  }
  100% {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Entrada desde la izquierda */
@keyframes fade-left {
  0% {
    opacity:   0;
    transform: translateX(-30px);
  }
  100% {
    opacity:   1;
    transform: translateX(0);
  }
}

/* Entrada desde la derecha */
@keyframes fade-right {
  0% {
    opacity:   0;
    transform: translateX(30px);
  }
  100% {
    opacity:   1;
    transform: translateX(0);
  }
}

/* Fade simple */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Glow rojo pulsante (navbar CTA) */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.4);
  }
  50% {
    box-shadow: 0 0 24px rgba(229, 9, 20, 0.8);
  }
}

/* Escala de entrada */
@keyframes scale-in {
  0% {
    opacity:   0;
    transform: scale(0.92);
  }
  100% {
    opacity:   1;
    transform: scale(1);
  }
}

/* ── CLASES DE ANIMACIÓN ───────────────────────────────────── */

.anim-fade-up {
  opacity:   0;
  animation: fade-up 0.6s ease forwards;
}

.anim-fade-left {
  opacity:   0;
  animation: fade-left 0.6s ease forwards;
}

.anim-fade-right {
  opacity:   0;
  animation: fade-right 0.6s ease forwards;
}

.anim-fade-in {
  opacity:   0;
  animation: fade-in 0.5s ease forwards;
}

.anim-scale-in {
  opacity:   0;
  animation: scale-in 0.5s ease forwards;
}

.anim-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ── DELAYS ────────────────────────────────────────────────── */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ── INTERSECTION OBSERVER — clases de activación ─────────── */

/* Estado inicial — oculto antes de entrar al viewport */
.reveal {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Activado por el Controller al entrar al viewport */
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

.reveal.visible.from-left {
  animation: fade-left 0.6s ease forwards;
}

.reveal.visible.from-right {
  animation: fade-right 0.6s ease forwards;
}

/* ── TRANSICIONES GLOBALES EXTRA ───────────────────────────── */

/* Suavizar entradas de secciones completas */
section {
  transition: opacity 0.3s ease;
}

/* Hover suave en enlaces del footer */
.footer__links a {
  transition: color var(--transition-fast), letter-spacing var(--transition-fast);
}

.footer__links a:hover {
  letter-spacing: 0.12em;
}