// Mechanisme: pricing-magnetic-cta-kinetic — snappy magnetic + auto-demo
import gsap from 'https://esm.sh/[email protected]';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const ctas=document.querySelectorAll('.kn-cta');
ctas.forEach(el=>{
  const qx=gsap.quickTo(el,'x',{duration:0.6,ease:'power4.out'});
  const qy=gsap.quickTo(el,'y',{duration:0.6,ease:'power4.out'});
  el.addEventListener('mousemove',e=>{const r=el.getBoundingClientRect();qx((e.clientX-r.left-r.width/2)*0.5);qy((e.clientY-r.top-r.height/2)*0.5);});
  el.addEventListener('mouseleave',()=>{qx(0);qy(0);});
});
let t=0;
function loop(){
  t+=0.022;
  const s=Math.sin(t),c=Math.cos(t);
  const dx=c/(1+s*s), dy=s*c/(1+s*s);
  ctas.forEach(el=>{const r=el.getBoundingClientRect();gsap.to(el,{x:dx*r.width*0.55,y:dy*r.height*0.7,duration:0.6,ease:'power4.out',overwrite:'auto'});});
  requestAnimationFrame(loop);
}
loop();

<!-- Skeleton: pricing-magnetic-cta-kinetic — 3 zwart cards met acid CTA -->
<div class="kn-grid">
  <article class="kn-card">
    <p class="kn-tier">SOLO</p>
    <p class="kn-price">€499</p>
    <ul><li>5 projecten</li></ul>
    <a class="kn-cta" href="#">START</a>
  </article>
</div>

/* Styling: pricing-magnetic-cta-kinetic — zwart bg, acid coral, Archivo Black */
.kn-card { background:#0A0A0A; color:#fff; font-family:'Archivo',sans-serif; }
.kn-cta { background:#C7FF3D; color:#0A0A0A; font-family:'Archivo',sans-serif; font-weight:900; }