/* ============================================================
   TURFSCAPES — premium motion layer
   Load order:  styles.css → animations.css → premium.css
   Fully optional: remove the <link> + premium.js and the site
   still works exactly as before.
   ============================================================ */

/* ------------------------------------------------------------
   1. PRELOADER — brand plate, then a panel curtain wipes up
   ------------------------------------------------------------ */
.preloader{
  position:fixed;inset:0;z-index:200;pointer-events:none;
}
.preloader__panels{ position:absolute;inset:0;display:flex }
.preloader__panels i{
  flex:1;background:var(--ink);
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
.preloader.is-done .preloader__panels i{ transform:translateY(-101%) }
.preloader.is-done .preloader__panels i:nth-child(1){ transition-delay:0s }
.preloader.is-done .preloader__panels i:nth-child(2){ transition-delay:.07s }
.preloader.is-done .preloader__panels i:nth-child(3){ transition-delay:.14s }
.preloader.is-done .preloader__panels i:nth-child(4){ transition-delay:.21s }
.preloader.is-done .preloader__panels i:nth-child(5){ transition-delay:.28s }
.preloader.is-gone{ display:none }

.preloader__in{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.9rem;
  transition:opacity .4s ease,transform .5s ease;
}
.preloader.is-done .preloader__in{ opacity:0;transform:translateY(-16px) }

.preloader__logo{
  width:min(280px,58vw);height:auto;
  animation:markPop .9s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes markPop{
  from{ opacity:0;transform:scale(.72) }
  to  { opacity:1;transform:none }
}
.preloader__name{
  font-family:var(--head);font-size:1.05rem;letter-spacing:5px;text-transform:uppercase;color:#8a8b96;
  animation:fadeUp .7s ease .28s both;
}
.preloader__bar{
  display:block;width:190px;height:2px;background:#34344a;border-radius:2px;overflow:hidden;
  animation:fadeUp .7s ease .26s both;
}
.preloader__bar i{
  display:block;height:100%;width:0;background:var(--brand);
  transition:width .28s ease;
}
.preloader__pct{
  font-size:.72rem;letter-spacing:3px;color:#77788a;font-weight:600;
  animation:fadeUp .7s ease .34s both;
}
@keyframes fadeUp{ from{ opacity:0;transform:translateY(12px) } to{ opacity:1;transform:none } }

/* nothing scrolls while the curtain is up */
html.is-loading, html.is-loading body{ overflow:hidden }

/* ------------------------------------------------------------
   2. CUSTOM CURSOR — dot + lagging ring, contextual states
   ------------------------------------------------------------ */
.cursor{ position:fixed;inset:0;z-index:150;pointer-events:none;display:none }
html.has-cursor .cursor{ display:block }
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .gal,
html.has-cursor summary,
html.has-cursor .chip{ cursor:none }

.cursor__dot,
.cursor__ring{
  position:absolute;top:0;left:0;border-radius:50%;
  transform:translate3d(-50%,-50%,0);will-change:transform;
}
.cursor__dot{
  width:7px;height:7px;background:var(--brand);
  transition:width .25s,height .25s,opacity .25s;
}
.cursor__ring{
  width:38px;height:38px;border:1.5px solid rgba(92,178,0,.55);
  display:grid;place-items:center;
  transition:width .32s cubic-bezier(.34,1.4,.64,1),
             height .32s cubic-bezier(.34,1.4,.64,1),
             background .3s,border-color .3s,opacity .3s;
}
.cursor__ring em{
  font-style:normal;font-family:var(--head);font-size:.72rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink);opacity:0;transform:scale(.6);
  transition:opacity .25s,transform .3s;
}
/* over links / buttons */
.cursor.is-link .cursor__ring{ width:58px;height:58px;background:rgba(92,178,0,.14);border-color:var(--brand) }
.cursor.is-link .cursor__dot{ width:4px;height:4px }
/* over gallery tiles */
.cursor.is-view .cursor__ring{ width:82px;height:82px;background:var(--brand);border-color:var(--brand) }
.cursor.is-view .cursor__ring em{ opacity:1;transform:none }
.cursor.is-view .cursor__dot{ opacity:0 }
/* pressed */
.cursor.is-down .cursor__ring{ transform:translate3d(-50%,-50%,0) scale(.82) }

/* ------------------------------------------------------------
   3. FILM GRAIN — barely-there texture over the whole page
   ------------------------------------------------------------ */
.grain{
  position:fixed;inset:-120px;z-index:95;pointer-events:none;opacity:.08;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 900ms steps(4) infinite;
}
@keyframes grain{
  0%  { transform:translate3d(0,0,0) }
  25% { transform:translate3d(-24px,14px,0) }
  50% { transform:translate3d(16px,-22px,0) }
  75% { transform:translate3d(-14px,-10px,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* ------------------------------------------------------------
   4. SPOTLIGHT — amber glow tracks the cursor on dark sections
   ------------------------------------------------------------ */
/* no overflow:hidden here — it would break .why__card's position:sticky */
.section--dark,.footer{ position:relative }
.section--dark::before,.footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(620px circle at var(--mx,50%) var(--my,50%),
             rgba(92,178,0,.10),transparent 62%);
  opacity:0;transition:opacity .5s ease;
}
.section--dark.is-hot::before,.footer.is-hot::before{ opacity:1 }
.section--dark > .wrap,.footer > *{ position:relative;z-index:1 }

/* ------------------------------------------------------------
   5. SPLIT-TEXT HEADINGS — words wipe up behind a mask
   ------------------------------------------------------------ */
.split{ display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em }
.split > b{
  display:inline-block;font-weight:inherit;
  transform:translateY(105%);
  transition:transform .95s cubic-bezier(.19,1,.22,1);
}
.is-in .split > b,
.split.is-in > b{ transform:translateY(0) }

/* ------------------------------------------------------------
   6. CURTAIN IMAGE REVEAL — amber panel sweeps off the photo
   ------------------------------------------------------------ */
.curtain{ position:relative;overflow:hidden }
/* .curtain must not clobber the sticky positioning of the Why-Us panel */
.why__card.curtain{ position:sticky }
@media(max-width:960px){ .why__card.curtain{ position:static } }
.curtain > .curtain__panel{
  position:absolute;inset:0;z-index:4;background:var(--brand);
  transform:translateX(-101%);
}
.curtain.is-lit > .curtain__panel{
  animation:sweep 1.35s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes sweep{
  0%  { transform:translateX(-101%) }
  48% { transform:translateX(0) }
  100%{ transform:translateX(101%) }
}
.curtain > img{ transform:scale(1.18);transition:transform 1.5s cubic-bezier(.19,1,.22,1) .35s }
.curtain.is-lit > img{ transform:scale(1) }
/* the existing hover-zoom must win once the reveal has played */
.svc:hover .curtain.is-lit > img{ transform:scale(1.07) }
.why__card.curtain.is-lit:hover > img{ transform:scale(1.05) }

/* ------------------------------------------------------------
   7. 3D TILT — transform is written inline by premium.js
   ------------------------------------------------------------ */
.tilt{ transform-style:preserve-3d;transition:transform .45s cubic-bezier(.22,.61,.36,1) }
.tilt.is-tilting{ transition:transform .12s linear }
.tilt__lift{ transform:translateZ(38px) }

/* glare that follows the tilt */
.tilt > .tilt__glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.20),transparent 60%);
  opacity:0;transition:opacity .35s;
}
.tilt:hover > .tilt__glare{ opacity:1 }

/* ------------------------------------------------------------
   8. MAGNETIC BUTTONS — pull written inline by premium.js
   ------------------------------------------------------------ */
.magnetic{ transition:transform .45s cubic-bezier(.34,1.4,.64,1) }
.magnetic.is-pulled{ transition:transform .14s linear }

/* ------------------------------------------------------------
   9. RIPPLE on click
   ------------------------------------------------------------ */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);
  animation:ripple .65s cubic-bezier(.22,.61,.36,1) forwards;
}
.btn--primary .ripple{ background:rgba(24,24,36,.20) }
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(1);opacity:0 } }

/* ------------------------------------------------------------
   10. NAV LINKS — text slides up, a copy rides in behind it
   ------------------------------------------------------------ */
.nav a:not(.nav__cta) .swap{ display:block;position:relative;overflow:hidden;height:1.35em }
.nav a:not(.nav__cta) .swap i{
  display:block;font-style:normal;
  transition:transform .42s cubic-bezier(.76,0,.24,1);
}
.nav a:not(.nav__cta) .swap i:last-child{ position:absolute;left:0;top:100% ;color:var(--brand) }
.nav a:not(.nav__cta):hover .swap i{ transform:translateY(-100%) }
@media(max-width:960px){ .nav a:not(.nav__cta) .swap{ height:auto;overflow:visible } .nav a .swap i:last-child{ display:none } }

/* ------------------------------------------------------------
   11. LIGHTBOX — iris opens from wherever you clicked
   ------------------------------------------------------------ */
.lb.is-iris{ animation:iris .55s cubic-bezier(.76,0,.24,1) }
@keyframes iris{
  from{ clip-path:circle(0% at var(--cx,50%) var(--cy,50%)) }
  to  { clip-path:circle(150% at var(--cx,50%) var(--cy,50%)) }
}

/* ------------------------------------------------------------
   12. PARALLAX LAYERS — [data-speed], driven by premium.js
   ------------------------------------------------------------ */
[data-speed]{ will-change:transform }

/* ------------------------------------------------------------
   13. MARQUEE — skews with scroll velocity (set inline by JS)
   ------------------------------------------------------------ */
.marquee{ transition:transform .6s cubic-bezier(.22,.61,.36,1) }

/* ------------------------------------------------------------
   14. HERO — settles back as you scroll past it
   ------------------------------------------------------------ */
.hero__in{ will-change:transform,opacity }

/* ------------------------------------------------------------
   15. BACK-TO-TOP — amber ring fills with scroll progress
   ------------------------------------------------------------ */
.totop{ overflow:visible }
.totop svg.totop__ring{
  position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);
  transform:rotate(-90deg);pointer-events:none;
}
.totop__ring circle{ fill:none;stroke-width:2 }
.totop__ring .bg{ stroke:rgba(24,24,36,.14) }
.totop__ring .fg{ stroke:var(--ink);stroke-linecap:round;transition:stroke-dashoffset .1s linear }

/* ------------------------------------------------------------
   16. REDUCED MOTION — strip the premium layer entirely
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .preloader,.cursor,.grain{ display:none !important }
  html.is-loading,html.is-loading body{ overflow:auto }
  .split > b{ transform:none !important }
  .curtain > .curtain__panel{ display:none }
  .curtain > img{ transform:none !important }
  .tilt,.magnetic{ transform:none !important }
  .tilt > .tilt__glare{ display:none }
  .section--dark::before,.footer::before{ display:none }
  .lb.is-iris{ animation:none }
  .marquee{ transform:none !important }
}