/* ==========================================================================
   Animations — fade/slide reveals, counters, hero entrance
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-revealed { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-revealed { transform: scale(1); }

[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Hero load-in sequence */
.hero-cta-row { animation: heroUp .8s .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-trust { animation: heroUp .8s .98s cubic-bezier(.2,.8,.2,1) both; }
.response-card { animation: heroScale .9s .3s cubic-bezier(.2,.8,.2,1) both; }

@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroScale { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes heroImageIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   HERO SLIDESHOWS — Ken Burns (slow zoom) + side drift + crossfade
   Each image gets a quarter of the loop: fade in -> drift/zoom -> fade out -> hold
   ========================================================================== */

/* Framed hero image box (sharp, 4 images) */
@keyframes heroKenBurns {
  0%   { opacity: 0; transform: scale(1) translateX(0); }
  2%   { opacity: 1; transform: scale(1) translateX(0); }
  25%  { opacity: 1; transform: scale(1.14) translateX(-2.5%); }
  28%  { opacity: 0; transform: scale(1.14) translateX(-2.5%); }
  100% { opacity: 0; transform: scale(1.14) translateX(-2.5%); }
}

/* Ambient full-bleed background slideshow (blurred, larger drift for depth) */
@keyframes heroBgKenBurns {
  0%   { opacity: 0; transform: scale(1) translateX(2%); }
  3%   { opacity: 0.65; transform: scale(1) translateX(2%); }
  25%  { opacity: 0.65; transform: scale(1.08) translateX(-2%); }
  28%  { opacity: 0; transform: scale(1.08) translateX(-2%); }
  100% { opacity: 0; transform: scale(1.08) translateX(-2%); }
}

/* Floating decorative gradient orbs */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16px, 22px) scale(1.08); }
}

/* Glass sheen sweeping diagonally across the framed hero image */
@keyframes sheenSweep {
  0% { background-position: -40% -40%; opacity: 0; }
  10% { opacity: 1; }
  45% { opacity: 1; }
  60% { background-position: 140% 140%; opacity: 0; }
  100% { background-position: 140% 140%; opacity: 0; }
}

/* Small dots marking active slide position */
@keyframes dotPulse {
  0%, 2% { background: rgba(255,255,255,0.35); width: 6px; }
  4%, 23% { background: var(--gold-light); width: 18px; }
  26%, 100% { background: rgba(255,255,255,0.35); width: 6px; }
}

/* Gentle float for the floating guarantee badge chip */
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Scroll cue arrow bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* Marquee-like trust strip micro entrance */
.trust-strip-item { animation: fadeIn .6s ease both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Card hover lift already in style.css; add subtle icon float */
.service-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.service-card:hover .service-icon { transform: translateY(-4px) rotate(-4deg); }

/* Button ripple-less press feedback */
.btn:active { transform: scale(0.97); }

/* Loading state for form */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0.6; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: currentColor;
  animation: spin .7s linear infinite; display: none;
}
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton shimmer (unused placeholder utility, available for future async content) */
.shimmer {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@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;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-slide, .hero-bg-slide { opacity: 1 !important; transform: none !important; }
  .hero-slide:not(:first-child), .hero-bg-slide:not(:first-child) { display: none; }
  .hero-image-sheen, .hero-orb, .hero-badge-chip, .hero-scroll-cue svg { display: none; }
}

@media (max-width: 900px) {
  .hero-badge-chip { display: none; } /* avoid overlap clutter on small screens */
}

@media (max-width: 720px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(28px); }
  [data-reveal="left"].is-revealed, [data-reveal="right"].is-revealed { transform: translateY(0); }
}