// Mechanisme: pricing-physics-flip-brutalist — 3D flip-loop front↔back
import gsap from 'https://esm.sh/[email protected]';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const cards=document.querySelectorAll('.flip-card');
gsap.set(cards,{transformPerspective:1100,transformStyle:'preserve-3d'});
gsap.from(cards,{rotateY:180,duration:1.4,ease:'back.out(1.4)',stagger:0.2});
let flipped=false;
setInterval(()=>{
  flipped=!flipped;
  gsap.to(cards,{rotateY:flipped?180:0,duration:1.2,ease:'back.out(1.3)',stagger:0.15});
},3500);

<!-- Skeleton: pricing-physics-flip-brutalist — 3 flip-cards front (price) ↔ back (features) -->
<div class="fb-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><li>Basis support</li></ul></div>
  </article>
</div>

/* Styling: pricing-physics-flip-brutalist — wit + 2px borders + hot-spot */
.flip-card { border:2px solid #0A0A0A; box-shadow:8px 8px 0 0 #0A0A0A; }
.flip-card.hot { box-shadow:8px 8px 0 0 #FF4A1C; }
.face { backface-visibility:hidden; font-family:'JetBrains Mono',monospace; }
.face.back { transform:rotateY(180deg); }