/* ============================================================
   Motion layer — cursor, tilt, scroll progress, parallax,
   shine, hero word reveal, back-to-top.  Compositor-friendly.
   ============================================================ */

/* ---------- scroll progress bar ---------- */
.scroll-prog{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:300; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,#E8B84E,#27C2A6,#8B7CF2,#F0918A); box-shadow:0 0 12px rgba(232,184,78,.5); pointer-events:none; }

/* ---------- custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  .cur-dot,.cur-ring{ position:fixed; top:0; left:0; z-index:320; pointer-events:none; border-radius:50%; mix-blend-mode:normal; }
  .cur-dot{ width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--ink); transition:opacity .25s, transform .12s var(--ease); }
  .cur-ring{ width:38px; height:38px; margin:-19px 0 0 -19px; border:1.5px solid rgba(33,30,24,.45);
    transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s, background .25s, opacity .25s; }
  .cur-ring.hot{ width:64px; height:64px; margin:-32px 0 0 -32px; border-color:transparent; background:radial-gradient(circle, rgba(232,184,78,.22), rgba(39,194,166,.12) 60%, transparent 72%); }
  .cur-ring.press{ width:26px; height:26px; margin:-13px 0 0 -13px; }
  html.has-cursor, html.has-cursor *{ cursor:none !important; }
}

/* ---------- 3D tilt cards ---------- */
.tilt{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.tilt-glare{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; z-index:2;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.35), transparent 45%);
  transition:opacity .3s var(--ease); }
.tilt:hover .tilt-glare{ opacity:1; }

/* ---------- hero word reveal ---------- */
.kb-h1 .wd{ display:inline-block; will-change:transform,opacity,filter; opacity:0; transform:translateY(0.55em); filter:blur(8px); }
.kb-h1.words-in .wd{ opacity:1; transform:none; filter:blur(0);
  transition:opacity .5s var(--ease-io), transform .62s var(--ease-io), filter .5s var(--ease-io); transition-delay:calc(var(--w,0) * 45ms); }

/* ---------- generic parallax base ---------- */
[data-para]{ will-change:transform; }

/* ---------- shine sweep on solid buttons / cards ---------- */
.btn{ overflow:hidden; }
.btn .shine{ position:absolute; top:0; left:-120%; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); }
.btn:hover .shine{ animation:shine .8s var(--ease); }
@keyframes shine{ from{ left:-120%; } to{ left:160%; } }

/* ---------- reveal: richer (blur + scale already in base; add directional) ---------- */
.reveal.from-l{ transform:translateX(-40px); } .reveal.from-r{ transform:translateX(40px); }
.reveal.from-l.in,.reveal.from-r.in{ transform:none; }

/* ---------- magnetic keycaps glow trail already handled in keyboard ---------- */

/* ---------- back to top ---------- */
.to-top{ position:fixed; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,34px); z-index:240;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--ink); color:var(--cream); border:0; opacity:0; transform:translateY(20px) scale(.8);
  box-shadow:0 10px 30px -10px rgba(33,30,24,.5); transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s; }
.to-top.show{ opacity:1; transform:none; }
.to-top:hover{ background:#0d0b07; }
.to-top svg{ width:18px; height:18px; }

/* ---------- mouse-reactive aurora wrapper (motion.js sets transform on .aurora) ---------- */
.aurora{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }

/* ---------- floating drift on hero pill / chips ---------- */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.kb-pill{ animation:floaty 5s ease-in-out infinite; }

/* ---------- section heading underline grow on reveal ---------- */
.section-title{ position:relative; }

/* ---------- gradient shimmer on accent type ---------- */
.shimmer{ background-image:linear-gradient(100deg,#E8B84E,#27C2A6,#8B7CF2,#F0918A,#E8B84E);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:shimmer 9s linear infinite; }
@keyframes shimmer{ from{ background-position:0 0; } to{ background-position:280% 0; } }

/* ---------- clip-path wipe reveal ---------- */
.reveal.wipe{ opacity:1 !important; transform:none !important; clip-path:inset(0 0 110% 0);
  transition:clip-path .95s cubic-bezier(.16,1,.3,1); }
.reveal.wipe.in{ clip-path:inset(0 0 -8% 0); }

/* ---------- cursor spotlight ---------- */
.spotlight{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(255,238,200,.18), rgba(120,160,255,.06) 40%, transparent 62%);
  mix-blend-mode:soft-light; }
.spotlight.on{ opacity:1; }

/* ---------- velocity skew (marquee) ---------- */
.marquee-track{ will-change:transform; }

/* ---------- eyebrow line draw ---------- */
.eyebrow::before{ transition:width .7s var(--ease-io) .1s; }
.reveal:not(.in) .eyebrow::before, .section-head .reveal.eyebrow:not(.in)::before{ width:0; }

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .shimmer{ animation:none; }
  .reveal.wipe{ clip-path:none; }
  .spotlight{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .scroll-prog,.cur-dot,.cur-ring{ display:none !important; }
  .kb-pill{ animation:none; }
  .kb-h1 .wd{ opacity:1 !important; transform:none !important; filter:none !important; }
  .tilt{ transform:none !important; }
  html.has-cursor, html.has-cursor *{ cursor:auto !important; }
}