/* =====================================================================
   ANIMATIONS — keyframes, scroll-reveal states, decorative motion
   ===================================================================== */

/* ---- KEYFRAMES ---- */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* =====================================================================
   HERO ENTRANCE — staggered reveal on load
   ===================================================================== */
.hero__content > * { opacity: 0; animation: fadeUp 0.7s var(--ease-out) forwards; }
.hero__eyebrow { animation-delay: 0.15s; }
.hero__title   { animation-delay: 0.30s; }
.hero__sub     { animation-delay: 0.45s; }
.hero__cta     { animation-delay: 0.60s; }
.hero__badges  { animation-delay: 0.75s; }

.hero__card { opacity: 0; animation: scaleIn 0.8s var(--ease-out) 0.5s forwards; }

/* floating decorative orbs in hero (added via JS optionally) */
.hero__orb { position: absolute; border-radius: 50%; filter: blur(2px); animation: floatY 6s ease-in-out infinite; }

/* =====================================================================
   SCROLL REVEAL — elements with .reveal start hidden, animate in.
   Kept short so scrolling feels responsive rather than laggy.
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* staggered children: add .reveal-stagger to a container; its children animate sequentially */
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out); }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.19s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.29s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.34s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.39s; }

/* reveal variants */
.reveal--left  { transform: translateX(-50px); }
.reveal--right { transform: translateX(50px); }
.reveal--scale { transform: scale(0.94); }
.reveal--left.in-view, .reveal--right.in-view, .reveal--scale.in-view { transform: none; }

/* =====================================================================
   STAT COUNTER highlight while counting
   ===================================================================== */
.stat__num.counting { color: var(--c-blue); }

/* =====================================================================
   FORM STEP TRANSITIONS
   ===================================================================== */
.step.active { animation: fadeUp 0.45s var(--ease-out); }
.field.invalid { animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* =====================================================================
   BUTTON INTERACTIONS
   ===================================================================== */
.btn { overflow: hidden; position: relative; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-120%); transition: transform 0.6s;
}
.btn--primary:hover::after { transform: translateX(120%); }

/* =====================================================================
   NAV LINK UNDERLINE already in styles; add arrow for mobile CTA
   ===================================================================== */

/* =====================================================================
   Hero & process backdrops are static gradients (no infinite paint loop)
   so the page stays light on the compositor and scrolls smoothly.
   ===================================================================== */

/* =====================================================================
   BLOG / SERVICE CARD media sheen — one pass on hover only
   ===================================================================== */
.blog-card__media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 200% 0; transition: background-position 0.9s var(--ease-out);
}
.blog-card:hover .blog-card__media::before { background-position: -200% 0; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__content > *, .hero__card { animation: none; opacity: 1; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .hero, .process { animation: none; }
  .hotspot::after, .blog-card__media::before, .hero__orb { animation: none; }
}