/* ===========================================================
   Animaciones propias de la landing.
   Los reveals, el parallax y el split vienen de /shared/motion.css.
   Acá solo van los dos loops que pide el brief: la flotación de
   las cards del hero y el pulso del botón de WhatsApp.
   =========================================================== */

/* ----------------------------------------------------------
   Flotación de las cards del hero

   El retardo es deliberado: motion.js agrega .is-in al EMPEZAR
   la entrada, y una animación con transform pisaría el reveal.
   Con animation-delay y fill-mode none la animación no toca el
   transform hasta que la entrada terminó (trampa 5 del MOTION-AGENT).
   ---------------------------------------------------------- */

@keyframes card-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

@media (min-width: 1101px) {
  .hero-card.is-in {
    animation: card-float 6s ease-in-out 1.2s infinite;
  }

  .hero-card--tr.is-in { animation-duration: 7s;   animation-delay: 1.45s; }
  .hero-card--bl.is-in { animation-duration: 5.4s; animation-delay: 1.6s;  }
  .hero-card--br.is-in { animation-duration: 6.6s; animation-delay: 1.35s; }
}

/* ----------------------------------------------------------
   Pulso del WhatsApp flotante
   Solo box-shadow: no toca transform ni provoca reflow.
   ---------------------------------------------------------- */

@keyframes wa-pulse {
  0%   { box-shadow: 0 14px 36px -12px rgba(0, 71, 65, 0.65), 0 0 0 0    rgba(0, 71, 65, 0.42); }
  70%  { box-shadow: 0 14px 36px -12px rgba(0, 71, 65, 0.65), 0 0 0 18px rgba(0, 71, 65, 0); }
  100% { box-shadow: 0 14px 36px -12px rgba(0, 71, 65, 0.65), 0 0 0 0    rgba(0, 71, 65, 0); }
}

.whatsapp-float { animation: wa-pulse 3.2s ease-out 2s infinite; }

.whatsapp-float:hover { background: var(--color-carbon); animation-play-state: paused; }

/* ----------------------------------------------------------
   Sin movimiento si el sistema lo pide
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-card.is-in,
  .whatsapp-float {
    animation: none !important;
  }

  .svc,
  .circle-btn,
  .btn::before,
  .nav-links {
    transition: none !important;
  }
}