/* ==========================================================================
   Advanced Pest Solutions, animations.css
   Keyframes, transitions, scroll-reveal, ripple, pulse.
   Respects prefers-reduced-motion (see media query at bottom + script.js guard).
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-fade { opacity: 0; transition: opacity 0.8s ease; }
.reveal-fade.is-visible { opacity: 1; }

/* Stagger helper classes for grids */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ---------- Pulse (floating buttons) ---------- */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(15, 76, 92, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(15, 76, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 76, 92, 0); }
}
@keyframes pulseRingGreen {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.floating-btn.call-btn { animation: pulseRing 2.4s ease-out infinite; }
.floating-btn.whatsapp-btn { animation: pulseRingGreen 2.4s ease-out infinite; }

/* ---------- Ripple effect ---------- */
.btn { -webkit-tap-highlight-color: transparent; }
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(3.2); opacity: 0; }
}

/* ---------- Hero fade-in ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-badge, .hero h1, .hero .hero-sub, .hero-cta-group, .hero-trust-row {
  animation: heroFadeUp 0.8s ease both;
}
.hero h1 { animation-delay: 0.08s; }
.hero .hero-sub { animation-delay: 0.16s; }
.hero-cta-group { animation-delay: 0.24s; }
.hero-trust-row { animation-delay: 0.32s; }
.hero-visual { animation: heroFadeUp 0.9s ease 0.2s both; }

/* ---------- Soft float for hero visual stat boxes ---------- */
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-visual .stat-box:nth-child(1) { animation: softFloat 5s ease-in-out infinite; }
.hero-visual .stat-box:nth-child(2) { animation: softFloat 5s ease-in-out infinite 0.6s; }
.hero-visual .stat-box:nth-child(3) { animation: softFloat 5s ease-in-out infinite 1.2s; }

/* ---------- Spin for loading/utility (unused by default, kept minimal) ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Accordion chevron / FAQ handled via transform transitions already in style.css ---------- */

/* ---------- Fade for mobile nav ---------- */
.mobile-nav-overlay.is-open { animation: heroFadeUp 0.3s ease both; }

/* ---------- Reduced motion ---------- */
@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;
  }
  .floating-btn.call-btn, .floating-btn.whatsapp-btn { animation: none; }
  .reveal, .reveal-fade { opacity: 1; transform: none; }
}