/* =========================================================
 * animations.css
 * Keyframes y clases utilitarias para animaciones del sitio
 * WSG.cl (reveal en scroll, pulso del dashboard IZI, fade-in
 * al cargar).
 * ========================================================= */

/* ---------- Reveal en scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger sutil cuando hay varios .reveal hermanos en el mismo bloque */
.services__list .services__item:nth-child(2).is-visible { transition-delay: 60ms; }
.services__list .services__item:nth-child(3).is-visible { transition-delay: 120ms; }
.services__list .services__item:nth-child(4).is-visible { transition-delay: 180ms; }

.audience__grid .reveal.is-visible:nth-child(2) { transition-delay: 60ms; }
.audience__grid .reveal.is-visible:nth-child(3) { transition-delay: 120ms; }
.audience__grid .reveal.is-visible:nth-child(4) { transition-delay: 180ms; }

/* ---------- Pulso rojo del dashboard IZI ---------- */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(227, 6, 19, 0.0); }
}

/* ---------- Fade-in al cargar (nav + hero) ---------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav,
.hero {
  animation: fade-in 700ms var(--ease-out) both;
}
.hero { animation-delay: 100ms; }