/* animations.css — @keyframes, @property, and animation-binding rules */

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

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

body.hero-ready .leaves span{ animation-name: leafFloat; }

.leaves .lf1{ animation-duration:11s; animation-delay:0s; }

.leaves .lf2{ animation-duration:13.5s; animation-delay:.8s; }

.leaves .lf3{ animation-duration:9.5s; animation-delay:1.6s; }

.leaves .lf4{ animation-duration:15s; animation-delay:.4s; }

.leaves .lf5{ animation-duration:12s; animation-delay:2.2s; }

.leaves .lf6{ animation-duration:10s; animation-delay:1.1s; }

.leaves .lf7{ animation-duration:14s; animation-delay:.2s; }

.leaves .lf8{ animation-duration:9s; animation-delay:1.9s; }

.leaves .lf9{ animation-duration:12.5s; animation-delay:.6s; }

.leaves .lf10{ animation-duration:16s; animation-delay:1.4s; }

.leaves .lf11{ animation-duration:8.5s; animation-delay:2.5s; }

.leaves .lf12{ animation-duration:13s; animation-delay:1.7s; }

@keyframes leafFloat{
    from{ transform:translate3d(0,0,0) rotate(0deg); }
    to{ transform:translate3d(4px,-10px,0) rotate(4deg); }
  }

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

body.hero-ready .hero__badge,
  body.hero-ready .hero__title-line,
  body.hero-ready .hero__desc,
  body.hero-ready .hero__actions > *{
    animation:heroReveal .8s cubic-bezier(.16,1,.3,1) forwards;
  }

body.hero-ready .hero__badge{ animation-delay:.05s; }

body.hero-ready .hero__title-line.line-1{ animation-delay:.18s; }

body.hero-ready .hero__title-line.line-2{ animation-delay:.34s; }

body.hero-ready .hero__title-line.line-3{ animation-delay:.5s; }

body.hero-ready .hero__desc{ animation-delay:.68s; }

body.hero-ready .hero__actions > *:nth-child(1){ animation-delay:.84s; }

body.hero-ready .hero__actions > *:nth-child(2){ animation-delay:.94s; }

body.hero-ready .scroll-indicator{
    animation:heroReveal .8s cubic-bezier(.16,1,.3,1) forwards 1.05s,
              scrollPulse 2.6s ease-in-out infinite 1.85s;
  }

@keyframes scrollPulse{
    0%, 100%{ transform:translateY(0); opacity:.65; }
    50%{ transform:translateY(6px); opacity:1; }
  }

@property --glow-angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }

@keyframes glowRotate{ to{ --glow-angle:360deg; } }

.services-grid .service-card:nth-child(1) .service-card__emoji{ animation:iconGlobeSpin 18s linear infinite; }

.services-grid .service-card:nth-child(2) .service-card__emoji{ animation:iconLeafBreeze 4.2s ease-in-out infinite; }

.services-grid .service-card:nth-child(3) .service-card__emoji{ animation:iconClipboardIdle 6s ease-in-out infinite; }

.services-grid .service-card:nth-child(4) .service-card__emoji{ animation:iconSafetyPulse 3.6s ease-in-out infinite; }

@keyframes iconGlobeSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

@keyframes iconLeafBreeze{
    0%, 100%{ transform:rotate(-4deg) scale(1); }
    50%{ transform:rotate(4deg) scale(1.02); }
  }

@keyframes iconClipboardIdle{
    0%, 100%{ transform:scale(1) rotate(0deg); }
    50%{ transform:scale(1.02) rotate(1deg); }
  }

@keyframes iconSafetyPulse{
    0%, 100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.05); opacity:.92; }
  }

/* ============================================================
   Site-wide GSAP motion system (js/motion.js).
   GSAP drives every timed value directly via inline styles — this
   file only supplies the handful of structural/decorative bits GSAP
   itself can't create: the page-transition veil and the link
   underline bar it injects and animates with quickTo(). No opacity/
   transform "hidden" states live in CSS anymore; each ScrollTrigger
   timeline sets its own starting values on the fly (immediateRender),
   so nothing here fights the JS for control of an element's transform.
   ============================================================ */

.motion-page-veil{
    position:fixed;
    inset:0;
    z-index:99999;
    background:var(--green-800, #0E6B4B);
    pointer-events:none;
    will-change:transform;
  }

/* Added by js/motion-polish.js — a purely decorative child riding
   inside the existing veil element; never touches the veil's own
   scaleX cover/reveal timeline in js/motion.js. */
.motion-veil-glow{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(255,255,255,.16), transparent 60%);
    pointer-events:none;
  }

.motion-underline{
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    pointer-events:none;
    transform:scaleX(0);
  }

/* Bulletproof reduced-motion override: applies globally, catching any
   CSS animation/transition anywhere on the site (nav drawer, dropdowns,
   sticky header, etc). js/motion.js separately checks the same media
   query and skips GSAP entirely, so under reduced motion nothing here
   ever needs to be overridden — this is just the CSS-side safety net. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}