/* ==========================================================================
   ANIMATIONS.CSS — keyframes, hero sequence, mouse glow, gradient motion
   ========================================================================== */

@keyframes fadeUp{ from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform: translateY(0);} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes drawLine{ from{ stroke-dashoffset: 400; } to{ stroke-dashoffset: 0; } }
@keyframes gradientShift{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
@keyframes pulseGlow{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* Hero load sequence */
.hero-eyebrow-badge{ animation: fadeUp .7s var(--ease) .1s both; }
.hero h1{ animation: fadeUp .8s var(--ease) .22s both; }
.hero p.lead{ animation: fadeUp .8s var(--ease) .34s both; }
.hero-cta-row{ animation: fadeUp .8s var(--ease) .46s both; }
.hero-trust{ animation: fadeUp .8s var(--ease) .58s both; }
.hero-card--main{ animation: fadeIn 1s var(--ease) .5s both; }
.hero-card--float-a{ animation: fadeIn 1s var(--ease) .7s both, floatY 6s ease-in-out 1.7s infinite; }
.hero-card--float-b{ animation: fadeIn 1s var(--ease) .85s both, floatY 7s ease-in-out 1.85s infinite reverse; }

.pulse-divider path{
  stroke-dasharray: 400;
  animation: drawLine 2.4s var(--ease) forwards;
}

/* Gradient text motion on accent headings */
.animated-gradient{
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  animation: gradientShift 6s linear infinite;
}

/* Mouse glow cursor-follow element */
.mouse-glow{
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(16,185,129,.10), transparent 70%);
  transform: translate(-50%,-50%);
  z-index: 1;
  transition: opacity .3s;
  will-change: transform;
}

/* Reveal variants, driven by IntersectionObserver toggling .in-view */
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform: translateX(-40px); }
[data-reveal="left"].in-view{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(40px); }
[data-reveal="right"].in-view{ transform: translateX(0); }
[data-reveal="zoom"]{ transform: scale(.92); }
[data-reveal="zoom"].in-view{ transform: scale(1); }

/* stagger children helper */
[data-reveal-group] > *{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal-group].in-view > *{ opacity:1; transform: translateY(0); }
[data-reveal-group].in-view > *:nth-child(1){ transition-delay: .05s; }
[data-reveal-group].in-view > *:nth-child(2){ transition-delay: .15s; }
[data-reveal-group].in-view > *:nth-child(3){ transition-delay: .25s; }
[data-reveal-group].in-view > *:nth-child(4){ transition-delay: .35s; }
[data-reveal-group].in-view > *:nth-child(5){ transition-delay: .45s; }
[data-reveal-group].in-view > *:nth-child(6){ transition-delay: .55s; }

/* Button hover shine */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.btn-primary:hover::after{ left: 130%; }

/* Image reveal wipe */
.img-reveal{ position:relative; overflow:hidden; }
.img-reveal::before{
  content:''; position:absolute; inset:0; background: var(--bg); z-index:2;
  transform-origin: right; transition: transform .8s var(--ease);
}
.img-reveal.in-view::before{ transform: scaleX(0); }

/* Counter number pop */
.stat-num.counted{ animation: fadeUp .6s var(--ease); }