/* GradPath premium scroll/interaction layer — shared across all pages.
   Additive only: nothing here overrides existing page styles. Safe to include anywhere. */

/* 1) Scroll progress bar (top of page) */
.gp-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#0d4f4a 0%,#0a3b38 40%,#a9c6a6 100%);
  box-shadow:0 0 10px rgba(13,79,74,.35);pointer-events:none;will-change:transform;}

/* 2) Magnetic buttons — smoothing handled in JS; CSS just eases the return */
.gp-magnetic{will-change:transform;}
@media (hover:hover) and (pointer:fine){
  .gp-magnetic{transition:transform .35s cubic-bezier(.16,1,.3,1);}
}

/* 3) Marquee strip (endless horizontal scroll) */
.gp-marquee{--gp-mq-dur:34s;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.gp-marquee-track{display:flex;width:max-content;gap:0;
  animation:gpMarquee var(--gp-mq-dur) linear infinite;}
.gp-marquee:hover .gp-marquee-track{animation-play-state:paused;}
.gp-marquee-group{display:flex;flex-shrink:0;align-items:center;}
.gp-marquee-group>*{padding:0 clamp(20px,3.4vw,52px);font-weight:700;
  letter-spacing:.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;}
.gp-marquee-dot{width:6px;height:6px;border-radius:50%;background:#a9c6a6;flex:0 0 auto;opacity:.7;}
@keyframes gpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 4) Generic reveal via data-reveal (does NOT touch existing .reveal class) */
[data-reveal]{opacity:0;transform:translateY(38px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
[data-reveal="left"]{transform:translateX(-46px)}
[data-reveal="right"]{transform:translateX(46px)}
[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].gp-in{opacity:1;transform:none;}
[data-reveal-stagger]>*{opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
[data-reveal-stagger].gp-in>*{opacity:1;transform:none;}

/* 5) Custom cursor (desktop pointers only) — lerp ring + instant dot */
.gp-cursor{position:fixed;top:0;left:0;width:32px;height:32px;border-radius:50%;
  border:1.5px solid rgba(13,79,74,.5);pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);opacity:0;will-change:transform;
  transition:width .32s cubic-bezier(.16,1,.3,1),height .32s cubic-bezier(.16,1,.3,1),
             background .32s ease,border-color .32s ease,opacity .3s ease;}
.gp-cursor.on{opacity:1;}
.gp-cursor.hot{width:56px;height:56px;background:rgba(169,198,166,.16);border-color:rgba(13,79,74,.85);}
.gp-cursor.press{width:24px;height:24px;background:rgba(13,79,74,.14);}
.gp-cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:#0d4f4a;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s ease;}
.gp-cursor-dot.on{opacity:1;}
.gp-cursor-dot.hot{opacity:0;}
@media (hover:none),(pointer:coarse){.gp-cursor,.gp-cursor-dot{display:none!important;}}

/* 6) Cinematic page transitions — cross-document View Transitions (Chrome/Edge).
   Subtle crossfade + rise; other browsers use the JS gp-leaving fallback below. */
@media (prefers-reduced-motion:no-preference){
  @view-transition { navigation: auto; }
  ::view-transition-old(root){animation:gpVtOut .3s ease both;}
  ::view-transition-new(root){animation:gpVtIn .55s cubic-bezier(.16,1,.3,1) both;}
  @keyframes gpVtOut{to{opacity:0;}}
  @keyframes gpVtIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
}
html.gp-leaving body{opacity:0;transition:opacity .2s ease;}

/* 7) Kinetic hero headline — word-by-word rise, applied by JS splitting.
   .gp-split defuses the page's block-level heroIn so words own the entrance. */
.hero h1.gp-split{animation:none!important;opacity:1!important;}
.gp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
.gp-wi{display:inline-block;transform:translateY(112%);opacity:0;filter:blur(6px);
  animation:gpWord .85s cubic-bezier(.16,1,.3,1) both;will-change:transform,filter;}
@keyframes gpWord{to{transform:none;opacity:1;filter:none;}}

/* 8) Lenis smooth scroll (init'd by enhance.js, desktop only) */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}


/* 9) gp-touch-targets: phone touch targets: thumbs need ~44px. Visual size is unchanged, the tap
   area just grows to meet the guideline. */
@media (max-width:820px){
  .nav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .topnav .links a.cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .site-footer .sf-social a{width:44px;height:44px;}
}

@media (prefers-reduced-motion:reduce){
  .gp-progress{display:none;}
  .gp-marquee-track{animation:none;}
  .gp-cursor,.gp-cursor-dot{display:none!important;}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important;transition:none!important;}
  .gp-wi{animation:none;transform:none;opacity:1;filter:none;}
  html.gp-leaving body{opacity:1;transition:none;}
}