/* ============================================================
   THE WHEEL — motion layer (cursor, magnetic, smooth scroll,
   kinetic type, hero canvas). Progressive enhancement: every
   effect degrades to the static base if JS / reduced-motion.
   ============================================================ */

/* ---------- Smooth scroll wrapper ---------- */
body.smooth #scroll-content{
  position:fixed; top:0; left:0; width:100%;
  will-change:transform;
}
body.smooth{ scrollbar-gutter:stable }
html.smooth-on{ scroll-behavior:auto }

/* ---------- Hero canvas ---------- */
#heroCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.9;
}
.hero .wrap{ z-index:3 }
.hero-wheel{ z-index:2 }
.hero-glow{ z-index:0 }

/* ---------- Custom cursor ---------- */
.cursor{ position:fixed; inset:0; z-index:9999; pointer-events:none;
  mix-blend-mode:difference; display:none }
body.has-cursor .cursor{ display:block }
body.has-cursor, body.has-cursor *{ cursor:none !important }
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%;
  transform:translate3d(-100px,-100px,0);
}
.cursor-dot{ width:6px; height:6px; background:#fff; margin:-3px 0 0 -3px }
.cursor-ring{
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border:1.5px solid #fff;
  transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1),
             margin .35s cubic-bezier(.2,.8,.2,1), background .35s, opacity .3s;
}
body.cursor-hover .cursor-ring{
  width:74px; height:74px; margin:-37px 0 0 -37px; background:rgba(255,255,255,.16);
}
body.cursor-hover .cursor-dot{ opacity:0 }
body.cursor-down .cursor-ring{ width:30px; height:30px; margin:-15px 0 0 -15px }

/* ---------- Magnetic ---------- */
[data-magnetic]{ transition:transform .4s cubic-bezier(.2,.8,.2,1) }
[data-magnetic].grab{ transition:transform .1s linear }

/* ---------- Kinetic split type ---------- */
.split .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.08em; margin-bottom:-.08em; line-height:inherit;
}
.split .w > i{
  display:inline-block; font-style:inherit; will-change:transform;
  transform:translateY(115%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.split.in .w > i{ transform:translateY(0) }
@media(prefers-reduced-motion:reduce){
  .split .w > i{ transform:none !important }
}

/* ---------- Parallax helper ---------- */
[data-speed]{ will-change:transform }

/* fade-up for whole blocks gets a touch more travel + clip feel */
.reveal{ transition-duration:1s }