/* ============================================================
   animations.css — Grover Bruce Services
   Loaded after style.css. Every looping animation declared here
   is switched off wholesale in the reduced-motion block at the
   bottom of this file.
   ============================================================ */

@keyframes dropBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-8px) scale(1.1); }
  60%      { transform: translateY(-4px) scale(1.05); }
}
@keyframes heroZoom {
  from { transform: scale(1.1); }
  to   { transform: scale(1.2); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.7); }
  50%      { box-shadow: 0 0 0 8px rgba(76,175,80,0); }
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(8px); }
}
@keyframes wave {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50%      { transform: translateX(3%) scaleY(1.1); }
}
@keyframes loadBar {
  from { width: 0; opacity: 1; }
  to   { width: 100%; opacity: 0; }
}

/* === APPLIED ANIMATIONS === */
.logo-icon      { animation: dropBounce 2s infinite; }
.hero-bg        { animation: heroZoom 20s ease-in-out infinite alternate; }
.badge-dot      { animation: pulse 1.5s infinite; }
.trust-icon     { animation: iconFloat 3s ease-in-out infinite; }
.scroll-arrow   { animation: scrollBounce 1.5s infinite; }

/* Water-wave decoration on the CTA banner. */
.cta-bg::before, .cta-bg::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.cta-bg::before {
  bottom: -40px; left: -10%;
  width: 120%; height: 120px;
  animation: wave 6s ease-in-out infinite;
}
.cta-bg::after {
  bottom: -60px; left: -5%;
  width: 110%; height: 100px;
  background: rgba(255,255,255,0.05);
  animation: wave 8s ease-in-out infinite reverse;
}

/* Staggered reveal delays.
   Scoped to known grid containers so nth-child counts only the intended
   siblings — a bare `.reveal:nth-child(n)` also counts non-revealing
   elements and mis-times the sequence. */
.trust-grid   > .reveal:nth-child(1),
.services-grid > .reveal:nth-child(1),
.stats-grid   > .reveal:nth-child(1) { transition-delay: 0s; }
.trust-grid   > .reveal:nth-child(2),
.services-grid > .reveal:nth-child(2),
.stats-grid   > .reveal:nth-child(2) { transition-delay: 0.1s; }
.trust-grid   > .reveal:nth-child(3),
.services-grid > .reveal:nth-child(3),
.stats-grid   > .reveal:nth-child(3) { transition-delay: 0.2s; }
.trust-grid   > .reveal:nth-child(4),
.services-grid > .reveal:nth-child(4),
.stats-grid   > .reveal:nth-child(4) { transition-delay: 0.3s; }
.process-steps > .process-step:nth-of-type(2) { transition-delay: 0.1s; }
.process-steps > .process-step:nth-of-type(3) { transition-delay: 0.2s; }
.process-steps > .process-step:nth-of-type(4) { transition-delay: 0.3s; }

/* Page-load progress bar, injected by main.js. */
#page-loader {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 4px;
  background: linear-gradient(90deg, var(--green-mid), var(--blue-water));
  z-index: 9999;
  animation: loadBar 0.8s ease forwards;
}

/* ============================================================
   REDUCED MOTION
   Honour the OS-level "reduce motion" setting: kill every looping
   animation, collapse transitions, and let scroll-reveal resolve
   instantly. main.js and particles.js check the same media query.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal-left,
  .js .reveal-right { opacity: 1 !important; transform: none !important; }
  .hero-bg { transform: scale(1.05); }
  #particles-canvas, #page-loader { display: none; }
  .service-card:hover,
  .process-step:hover,
  .info-card:hover,
  .btn:hover { transform: none !important; }
}