/* Animations. Loaded after style.css. Everything here is switched off for
   visitors who have "reduce motion" turned on (see the last block). */

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:linear-gradient(90deg,var(--green),#b6f09c);transform-origin:0 50%;transform:scaleX(0)}
header{transition:box-shadow .3s}
header .wrap{transition:height .3s}
header.scrolled{box-shadow:0 10px 40px rgba(6,59,34,.10)}
header.scrolled .wrap{height:66px}

/* buttons: light sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::after{left:130%;transition:left .7s ease}
.btn-green{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 12px 44px rgba(155,207,60,.6)}}

/* hero */
.hero::before,.page-hero::before{inset:-12%;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4%,-3%,0) scale(1.12)}}
.hero::after{animation:gridmove 24s linear infinite}
@keyframes gridmove{to{background-position:64px 64px}}
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(155,207,60,.13),transparent 65%)}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
h1 .w>span{display:inline-block;transform:translateY(115%);animation:wordup .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .15s)}
@keyframes wordup{to{transform:none}}
.hero .eyebrow,.hero .sub,.hero-cta,.trust,.page-hero .crumbs,.page-hero .eyebrow,.page-hero p{opacity:0;animation:fadeup .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero .eyebrow,.page-hero .crumbs{animation-delay:.05s}
.page-hero .eyebrow{animation-delay:.12s}
.hero .sub,.page-hero p{animation-delay:.6s}
.hero-cta{animation-delay:.75s}
.trust{animation-delay:.9s}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-visual .main{opacity:0;animation:visin 1.2s cubic-bezier(.2,.8,.2,1) .35s forwards}
@keyframes visin{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
.hero-visual .main img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hero-visual .main:hover img{transform:scale(1.05)}
.glass{opacity:0;animation:fadeup .9s cubic-bezier(.2,.8,.2,1) forwards,bob 6s ease-in-out infinite}
.glass.g1{animation-delay:1s,1.9s}
.glass.g2{animation-delay:1.2s,2.6s}
@keyframes bob{50%{translate:0 -12px}}
.playdot{position:relative}
.playdot::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);animation:ping 2s ease-out infinite}
@keyframes ping{to{transform:scale(1.9);opacity:0}}
.marquee:hover div{animation-play-state:paused}

/* scroll reveals */
.reveal .eyebrow::before,.reveal .eyebrow::after{width:0;transition:width .9s cubic-bezier(.2,.8,.2,1) .25s}
.reveal.in .eyebrow::before,.reveal.in .eyebrow::after{width:34px}
.reveal .plist li,.reveal .ticks li{opacity:0;transform:translateX(-18px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in .plist li,.reveal.in .ticks li{opacity:1;transform:none}
.reveal.in li:nth-child(1){transition-delay:.25s}.reveal.in li:nth-child(2){transition-delay:.35s}
.reveal.in li:nth-child(3){transition-delay:.45s}.reveal.in li:nth-child(4){transition-delay:.55s}
.reveal.in li:nth-child(5){transition-delay:.65s}

/* photos: wipe-in + parallax (the .ph wrapper is added by motion.js) */
.photo .ph{display:block;overflow:hidden;border-radius:28px;position:relative;z-index:1;box-shadow:var(--shadow)}
.photo .ph img{box-shadow:none;border-radius:0;transform:translateY(var(--py,0)) scale(1.14);will-change:transform}
.photo.reveal{opacity:1;transform:none}
.photo.reveal .ph{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.photo.reveal.in .ph{clip-path:inset(0 0 0 0)}
.photo.reveal::before{opacity:0;transform:translate(-14px,-14px);transition:opacity .8s .7s,transform .8s .7s}
.photo.reveal.in::before{opacity:.55;transform:none}

/* cards */
.case{overflow:hidden}
.case img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.case:hover img{transform:scale(1.05)}
.step{overflow:hidden}
.step::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.step:hover::after{transform:scaleX(1)}
.review{transition:transform .3s,box-shadow .3s}
.review:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.film video.reveal{transform:scale(.9);opacity:.4;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.film video.reveal.in{transform:none;opacity:1}

/* service row: image preview that follows the cursor */
.svc-preview{position:fixed;left:0;top:0;width:300px;height:200px;border-radius:18px;overflow:hidden;pointer-events:none;z-index:70;opacity:0;transition:opacity .3s;box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2)}
.svc-preview.on{opacity:1}
.svc-preview img{width:100%;height:100%;object-fit:cover}
.svc-row h3{transition:color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.svc-row:hover h3{color:var(--green);transform:translateX(6px)}

.cta::before{animation:pulse 7s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25);opacity:.7}}
.float a:first-child{animation:ring 3s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 12px 28px rgba(0,0,0,.28)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 12px 28px rgba(0,0,0,.28)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal .plist li,.reveal .ticks li,.hero .eyebrow,.hero .sub,.hero-cta,.trust,.page-hero .crumbs,.page-hero .eyebrow,.page-hero p,.hero-visual .main,.glass{opacity:1!important;transform:none!important}
  .photo.reveal .ph{clip-path:none!important}
  .photo .ph img{transform:none!important}
}

/* ---------- home hero: 360-degree orbit ---------- */
.orbit{position:relative;width:min(500px,100%);aspect-ratio:1;margin:0 30px 0 auto;opacity:0;animation:visin 1.4s cubic-bezier(.2,.8,.2,1) .3s forwards}
.orbit .ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.orbit .r1{inset:0}
.orbit .r2{inset:18%;border-style:dashed;border-color:rgba(255,255,255,.2)}
.orbit .r3{inset:33%;border-color:rgba(155,207,60,.35)}
.orbit .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(155,207,60,.28),transparent 28%);-webkit-mask:radial-gradient(circle,transparent 33%,#000 34%);mask:radial-gradient(circle,transparent 33%,#000 34%);animation:spin 9s linear infinite}
.orbit .track{position:absolute;inset:0;animation:spin 48s linear infinite}
.orbit .t2{inset:18%;animation-duration:36s;animation-direction:reverse}
.orbit .node{position:absolute;inset:0;transform:rotate(var(--a))}
.orbit .node i{position:absolute;top:0;left:50%;translate:-50% -50%;rotate:calc(-1*var(--a));font-style:normal;white-space:nowrap;font-size:13px;font-weight:500;color:#fff;padding:9px 16px 9px 30px;border-radius:999px;background:rgba(4,48,30,.86);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 34px rgba(0,0,0,.4);animation:unspin 48s linear infinite}
.orbit .node i::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.orbit .t2 .node i{animation-duration:36s;animation-direction:reverse}
.orbit .core{position:absolute;inset:33%;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#b7e35a,#5aa52c 55%,#1f6a1c);box-shadow:0 0 0 14px rgba(155,207,60,.12),0 0 90px rgba(155,207,60,.55);animation:corepulse 4s ease-in-out infinite}
.orbit .core b{font-size:clamp(34px,4.4vw,56px);font-weight:700;line-height:1;color:#fff;letter-spacing:-.03em}
.orbit .core span{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#eaffdf;margin-top:6px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes unspin{to{transform:rotate(-360deg)}}
@keyframes corepulse{50%{box-shadow:0 0 0 26px rgba(155,207,60,.06),0 0 120px rgba(155,207,60,.75)}}
.orbit:hover .track,.orbit:hover .node i{animation-play-state:paused}
@media(max-width:1080px){.orbit{margin:10px auto 0;width:min(420px,84%)}}
@media(max-width:600px){
  .orbit{width:64%;margin-top:40px;margin-bottom:22px}
  .orbit .t2{display:none}
  .orbit .core,.orbit .r3{inset:27%}
  .orbit .sweep{-webkit-mask:radial-gradient(circle,transparent 45%,#000 46%);mask:radial-gradient(circle,transparent 45%,#000 46%)}
  .orbit .core b{font-size:34px}
  .orbit .core span{font-size:8.5px;letter-spacing:.12em;margin-top:4px}
  .orbit .node i{font-size:10.5px;padding:6px 11px 6px 22px}
  .orbit .node i::before{left:9px;width:6px;height:6px;margin-top:-3px}
}
@media(prefers-reduced-motion:reduce){.orbit{opacity:1!important}}