/* =====================================================================
   ANIMATIONS.CSS  ·  Animaciones y microinteracciones
   ---------------------------------------------------------------------
   Aquí viven:
     - Los "keyframes" (definiciones de animación).
     - Las clases de "scroll reveal" (aparecer al hacer scroll).
     - Animaciones decorativas (flotar, brillo, etc.).

   CÓMO FUNCIONA EL "SCROLL REVEAL":
     1) En el HTML agregas la clase  data-reveal  a cualquier elemento.
     2) main.js detecta cuando el elemento entra en pantalla y le añade
        la clase  is-visible  → entonces se reproduce la animación.
     Variantes: data-reveal="up" (por defecto), "left", "right", "zoom".

   ACCESIBILIDAD:
     Si la persona activó "reducir movimiento" en su sistema, todas las
     animaciones se desactivan automáticamente (ver el bloque final).
   ===================================================================== */


/* =====================================================================
   1. KEYFRAMES
   ===================================================================== */

/* Rueda del indicador de scroll del hero */
@keyframes scrollWheel {
  0%   { transform: translate(-50%, 0);    opacity: 1; }
  70%  { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0);    opacity: 0; }
}

/* Flotación suave (para elementos decorativos / glow del hero) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Brillo que recorre (shimmer) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Pulso suave (para puntos / badges) */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 30, 123, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(230, 30, 123, 0); }
}

/* Aparición simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Latido del glow del hero (respaldo de marca).
   Solo cambia la opacidad para NO interferir con el parallax,
   que usa "transform" sobre el mismo elemento .hero__bg. */
@keyframes glowPulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}


/* =====================================================================
   2. SCROLL REVEAL  (estado inicial + estado visible)
   ===================================================================== */

/* Estado inicial: invisible y ligeramente desplazado */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

/* Variantes de dirección */
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

/* Estado visible (lo agrega main.js cuando el elemento entra a pantalla) */
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Retrasos en cascada (para listas / cuadrículas).
   Usa data-delay="1".."6" en el HTML para escalonar la aparición. */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }


/* =====================================================================
   3. ANIMACIONES DECORATIVAS (clases utilitarias opcionales)
   ===================================================================== */
.anim-float { animation: float 6s ease-in-out infinite; }
.anim-pulse { animation: pulse 2.4s ease-in-out infinite; }

/* Glow del hero de respaldo (cuando no hay imagen, da vida al fondo) */
.hero__bg { animation: glowPulse 8s ease-in-out infinite; }

/* Brillo sutil que recorre el borde superior de las tarjetas destacadas */
.shimmer {
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.10) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}

/* Parallax MUY ligero del hero (lo mueve main.js con la variable --py) */
.hero__bg { transform: translateY(var(--py, 0)); }


/* =====================================================================
   4. PREFERENCIA: REDUCIR MOVIMIENTO  (accesibilidad)
   Si el usuario pidió menos animaciones, las desactivamos.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}