/* ==========================================================
   Ingenial Web · Estados de animación
   GSAP anima estos elementos desde su estado inicial (definido
   aquí en CSS) hacia el estado visible. Si JS falla o está
   deshabilitado, .no-js los muestra igual (ver base.css body).
   ========================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

[data-reveal-scale] {
  opacity: 0;
  transform: scale(0.94);
}

.no-js [data-reveal],
.no-js [data-reveal-scale] {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero__mockup { animation: float 7s ease-in-out infinite; }

@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mockup { animation: none; }
  [data-reveal], [data-reveal-scale] { opacity: 1; transform: none; }
}