/* ═══════════════════════════════════════════════════════════════════════
   motion.css — Custom AI motion kit v6 (2026-10-11). Pairs with /motion.js.
   Curated React Bits ports in the site palette; every piece respects
   prefers-reduced-motion and pauses off-screen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WebGL / canvas backgrounds ───────────────────────────────────────── */
.m-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.m-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ── Magnet / tilt / spotlight ────────────────────────────────────────── */
[data-magnet]{display:inline-flex;transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}
[data-magnet].is-magnet{transition:transform .25s ease-out}
[data-tilt]{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,1,.3,1);will-change:transform}
.fx-spot{position:relative;isolation:isolate;overflow:hidden;--sx:50%;--sy:50%;--sp:0}
.fx-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:var(--sp);background:radial-gradient(circle 280px at var(--sx) var(--sy),color-mix(in srgb,var(--fx-spot-color,#10b981) 18%,transparent),transparent 72%);transition:opacity .4s}
.fx-spot>*{position:relative;z-index:1}
.spot{position:relative;isolation:isolate;overflow:hidden;--sx:50%;--sy:50%;--sp:0}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:var(--sp);background:radial-gradient(circle 280px at var(--sx) var(--sy),color-mix(in srgb,var(--fx-spot-color,#10b981) 18%,transparent),transparent 72%);transition:opacity .4s}
.spot>*{position:relative;z-index:1}

/* ── Shiny text (travelling light band over a solid colour) ──────────── */
.shiny{--fx-shine:#ffffff;--fx-base:currentColor;display:inline-block;background:linear-gradient(120deg,var(--fx-base) 0%,var(--fx-base) 38%,var(--fx-shine) 50%,var(--fx-base) 62%,var(--fx-base) 100%);background-size:240% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mShine 3.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes mShine{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}

/* ── BlurText (word by word) ──────────────────────────────────────────── */
.fx-blur-w{display:inline-block;will-change:transform,filter,opacity}
.fx-blur-pre .fx-blur-w{opacity:0;filter:blur(10px);transform:translateY(-18px)}
.fx-blur-in .fx-blur-w{animation:mBlurIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes mBlurIn{0%{opacity:0;filter:blur(10px);transform:translateY(-18px)}55%{opacity:.7;filter:blur(3px);transform:translateY(3px)}100%{opacity:1;filter:blur(0);transform:none}}

/* ── SplitText (letters rise in) ──────────────────────────────────────── */
.m-sw{display:inline-block;white-space:nowrap}
.m-sc{display:inline-block;will-change:transform,opacity}
.m-split-pre .m-sc{opacity:0;transform:translateY(.55em)}
.m-split-in .m-sc{animation:mSplitIn .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*22ms)}
@keyframes mSplitIn{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}

/* ── ScrollReveal (words sharpen as they pass) ────────────────────────── */
.fx-sr-w{display:inline-block;opacity:.16;filter:blur(3px);transition:opacity .35s cubic-bezier(.16,1,.3,1),filter .35s cubic-bezier(.16,1,.3,1)}
.fx-sr-w.on{opacity:1;filter:blur(0)}

/* ── CardSwap ─────────────────────────────────────────────────────────── */
.m-cardswap{position:relative;perspective:1100px;transform-style:preserve-3d}
.m-cardswap>*{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform;transition:transform .8s cubic-bezier(.22,1,.36,1);cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .shiny{animation:none;background:none;-webkit-text-fill-color:currentColor;color:inherit}
  .fx-blur-pre .fx-blur-w,.fx-blur-in .fx-blur-w,.m-split-pre .m-sc,.m-split-in .m-sc{opacity:1;filter:none;transform:none;animation:none}
  .fx-sr-w{opacity:1;filter:none}
  [data-magnet],[data-tilt],.m-cardswap>*{transition:none}
}