// Mechanisme: pricing-magnetic-cta-editorial — magnetic CTA + auto-demo lemniscaat
import gsap from 'https://esm.sh/[email protected]';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const ctas=document.querySelectorAll('.mag-cta');
ctas.forEach(el=>{
  const qx=gsap.quickTo(el,'x',{duration:1.4,ease:'expo.out'});
  const qy=gsap.quickTo(el,'y',{duration:1.4,ease:'expo.out'});
  el.addEventListener('mousemove',e=>{const r=el.getBoundingClientRect();qx((e.clientX-r.left-r.width/2)*0.45);qy((e.clientY-r.top-r.height/2)*0.45);});
  el.addEventListener('mouseleave',()=>{qx(0);qy(0);});
});
// AUTO-DEMO: lemniscaat-pad zodat magnetism zichtbaar is zonder cursor
let t=0;
function loop(){
  t+=0.012;
  const s=Math.sin(t),c=Math.cos(t);
  const dx=0.65*c/(1+s*s), dy=0.55*s*c/(1+s*s);
  ctas.forEach(el=>{const r=el.getBoundingClientRect();gsap.to(el,{x:dx*r.width*0.45,y:dy*r.height*0.6,duration:1.4,ease:'expo.out',overwrite:'auto'});});
  requestAnimationFrame(loop);
}
loop();

<!-- Skeleton: pricing-magnetic-cta-editorial — 3 cards met magnetic Begin-CTA -->
<div class="ed-grid">
  <article class="ed-card">
    <p class="ed-tier"><em>Atelier</em></p>
    <p class="ed-price">€499</p>
    <ul><li>5 projecten</li><li>Editorial care</li></ul>
    <a class="mag-cta" href="#"><em>Begin</em></a>
  </article>
</div>

/* Styling: pricing-magnetic-cta-editorial — cream + Fraunces serif italic, asymmetrisch */
.ed-card { background:#F4F1EB; font-family:'Fraunces',serif; }
.mag-cta { font-style:italic; border:1px solid #0A0A0A; padding:1.2rem 2.6rem; border-radius:999px; }