/* ============================================================
   Caron Studio — progressive enhancement (cursor + scroll reveal)
   Non-invasive add-on. Uses existing brand tokens (--gold etc.)
   ============================================================ */

/* ---------- Custom cursor (gold dot + lag ring) ---------- */
@media (hover:hover) and (pointer:fine){
  body.cs-has-cursor{cursor:none;}
  body.cs-has-cursor a,
  body.cs-has-cursor button,
  body.cs-has-cursor [role="button"],
  body.cs-has-cursor input,
  body.cs-has-cursor textarea,
  body.cs-has-cursor select,
  body.cs-has-cursor label{cursor:none;}
}
.cs-cur,.cs-cur-ring{
  position:fixed;top:0;left:0;z-index:99999;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:multiply;
}
.cs-cur{width:8px;height:8px;background:var(--gold,#b57c46);
  transition:width .25s cubic-bezier(.2,.7,.2,1),height .25s cubic-bezier(.2,.7,.2,1),background .25s,opacity .3s;}
.cs-cur-ring{width:40px;height:40px;border:1px solid var(--gold,#b57c46);opacity:.55;
  transition:width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1),opacity .3s,background .3s,border-color .3s;}
/* hover state — grows over interactive elements */
body.cs-cur-hover .cs-cur{width:11px;height:11px;}
body.cs-cur-hover .cs-cur-ring{width:62px;height:62px;opacity:.95;background:rgba(181,124,70,.08);}
/* stronger pull on the primary CTA */
body.cs-cur-cta .cs-cur-ring{width:78px;height:78px;background:rgba(181,124,70,.14);border-color:var(--gold,#b57c46);}
body.cs-cur-cta .cs-cur{background:var(--gold,#b57c46);}
body.cs-cur-hide .cs-cur,body.cs-cur-hide .cs-cur-ring{opacity:0;}
/* on dark panels, switch blend so it stays visible */
body.cs-on-dark .cs-cur,body.cs-on-dark .cs-cur-ring{mix-blend-mode:screen;}
@media (hover:none),(pointer:coarse){.cs-cur,.cs-cur-ring{display:none!important;}}

/* magnetic targets get a smooth return */
.cs-mag{transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform;}

/* ---------- Scroll reveal ---------- */
.cs-rv{opacity:0;transform:translateY(34px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.cs-rv.cs-in{opacity:1;transform:none;}
.cs-rv-1{transition-delay:.07s;} .cs-rv-2{transition-delay:.14s;}
.cs-rv-3{transition-delay:.21s;} .cs-rv-4{transition-delay:.28s;} .cs-rv-5{transition-delay:.35s;}

/* ---------- Entrance + scroll FX ---------- */
/* about-page photos pan inside their (overflow-hidden) frame as you scroll */
.cs-parallax-img{transition:none!important;will-change:transform;transform:scale(1.16);}

/* hero entrance: dashed echo + gold ping dots fade in softly on load */
body.cs-hero-anim .cs-hero-hub-echo,body.cs-hero-anim .cs-hero-hub-ping{transition:opacity .8s ease .25s;}
body.cs-hero-anim:not(.cs-hero-in) .cs-hero-hub-echo,
body.cs-hero-anim:not(.cs-hero-in) .cs-hero-hub-ping{opacity:0;}
/* pills are driven entirely by JS (intro + scatter + hover) — start hidden to avoid a flash */
body.cs-hero-anim .cs-hero-hub-sat{opacity:0;will-change:transform,opacity;}

@media (prefers-reduced-motion:reduce){
  .cs-rv{opacity:1!important;transform:none!important;transition:none!important;}
  .cs-parallax-img{transform:none!important;}
  .cs-cur,.cs-cur-ring{display:none!important;}
  body.cs-has-cursor,body.cs-has-cursor *{cursor:auto!important;}
}