// Mechanisme: pricing-physics-flip-minimal — kalme 3D flip-loop
import gsap from 'https://esm.sh/gsap@3.12.5';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const cards=document.querySelectorAll('.flip-card');
gsap.set(cards,{transformPerspective:1200,transformStyle:'preserve-3d'});
gsap.from(cards,{rotateY:180,duration:1.6,ease:'power3.out',stagger:0.18});
let flipped=false;
setInterval(()=>{
  flipped=!flipped;
  gsap.to(cards,{rotateY:flipped?180:0,duration:1.4,ease:'power3.inOut',stagger:0.18});
},3500);

<!-- Skeleton: pricing-physics-flip-minimal — 3 cream flip-cards, 1px rules -->
<div class="fm-grid">
  <article class="flip-card">
    <div class="face front"><p class="tier">Start</p><p class="price">€499</p></div>
    <div class="face back"><ul><li>5 projecten</li></ul></div>
  </article>
</div>

/* Styling: pricing-physics-flip-minimal — cream + Inter + 1px rules + whitespace */
.flip-card { background:#F4F1EB; border:1px solid rgba(10,10,10,.18); }
.face { font-family:'Inter','Archivo',sans-serif; }
.face.back { transform:rotateY(180deg); }