/* =========================================
   ANIMACIONES GLOBALES — BOUCHAN'S STUDIO
   ========================================= */

/* Estado inicial (oculto) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease;
}

/* Estado visible */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Glow neón suave */
.neon-glow {
  transition: 0.3s ease;
}

.neon-glow:hover {
  text-shadow:
    0 0 10px var(--cyan),
    0 0 20px var(--cyan),
    0 0 30px var(--cyan);
}

/* STAGGERED REVEAL */
.reveal-stagger {
  opacity: 0;
  transform: translateY(40px);
}

.reveal-stagger.visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.9s ease;
}

/* Delay automático basado en orden */
.reveal-stagger:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger:nth-child(2) { transition-delay: 0.25s; }
.reveal-stagger:nth-child(3) { transition-delay: 0.4s; }
.reveal-stagger:nth-child(4) { transition-delay: 0.55s; }
.reveal-stagger:nth-child(5) { transition-delay: 0.7s; }
.reveal-stagger:nth-child(6) { transition-delay: 0.85s; }

/* =========================================
   ANIMACIONES AVANZADAS — BOUCHAN'S STUDIO
   ========================================= */

/* GLOW PULSANTE */
.glow-pulse {
  animation: pulseGlow 2.8s infinite ease-in-out;
}

@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(0, 234, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 14px var(--cyan), 0 0 28px rgba(0, 234, 255, 0.7);
  }
  100% {
    text-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(0, 234, 255, 0.4);
  }
}

/* PARALLAX HERO */
.hero-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* SLIDE HORIZONTAL */
.slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 1s ease;
}

.slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 1s ease;
}

.slide-left.visible,
.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* HOVER NEÓN AVANZADO */
.neon-hover {
  transition: 0.3s ease;
  border: 2px solid transparent;
}

.neon-hover:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(0, 234, 255, 0.6);
}