/* ============================================================================
   OCACENTRO — animations.css
   Keyframes y clases de animación (scroll reveal, hover premium, glow, etc.)
   Todas las animaciones respetan prefers-reduced-motion.
   ========================================================================== */

/* ------------------------- SCROLL REVEAL ------------------------- */
/* Estado inicial (oculto) — el JS agrega .is-visible cuando entra al viewport. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Variantes direccionales opcionales (usar con data-reveal="left|right|scale") */
.reveal[data-reveal="left"]  { transform: translateX(-40px); }
.reveal[data-reveal="right"] { transform: translateX(40px); }
.reveal[data-reveal="scale"] { transform: scale(.92); }
.reveal.is-visible[data-reveal="left"],
.reveal.is-visible[data-reveal="right"],
.reveal.is-visible[data-reveal="scale"] { transform: none; }

/* ------------------------- KEYFRAMES ------------------------- */

/* Punto pulsante (estado "en línea") del hero */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Punto del indicador de scroll del hero */
@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Marquesina infinita de marcas */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Flotación suave (tarjetas, pin del mapa, FAB de WhatsApp) */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Spinner del botón de envío */
@keyframes spin { to { transform: rotate(360deg); } }

/* Onda del efecto ripple */
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* Aparición de la carga inicial (fade-in del body al cargar) */
@keyframes fadeInApp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Brillo sutil que recorre elementos destacados (glow) */
@keyframes glowSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* ------------------------- CARGA INICIAL ------------------------- */
/* El body arranca invisible y aparece cuando la clase .app-ready se agrega (JS).
   Se usa transition (no keyframes) para que la interpolación sea siempre desde
   el valor actual, evitando el parpadeo que producía el selector :not() previo. */
body { opacity: 0; transition: opacity .5s var(--ease-out); }
body.app-ready { opacity: 1; }

/* ------------------------- HOVER PREMIUM / GLOW ------------------------- */
/* Barrido de luz para tarjetas destacadas (se activa en hover). */
.glow { position: relative; overflow: hidden; }
.glow::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%); pointer-events: none;
}
.glow:hover::after { animation: glowSweep .9s var(--ease); }

/* ------------------------- CONTADORES ------------------------- */
/* Los números arrancan invisibles hasta que el observer los activa (evita salto visual). */
.stat__num { transition: opacity .4s var(--ease); }

/* ========================================================================
   ACCESIBILIDAD: reducir movimiento
   Si el usuario prefiere menos animación, desactivamos transiciones y efectos.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { opacity: 1 !important; }
  .brands-strip__track { animation: none !important; }
}