// Mechanisme: content-physics-cards-brutalist
import Matter from 'https://esm.sh/matter-js@0.19.0';
(() => {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint } = Matter;
  const host = document.querySelector('.matter-host');
  if (!host) return;
  const W = host.clientWidth, H = host.clientHeight;
  const eng = Engine.create();
  const rend = Render.create({ element: host, engine: eng, options: { width: W, height: H, wireframes: false, background: 'transparent' } });
  const colors = ['#000','#ff2d55','#ffd60a','#ffffff','#0a84ff','#000','#ff2d55'];
  const cards = Array.from({ length: 7 }, (_, i) => Bodies.rectangle(80 + (i * (W - 160)) / 6, -40 - i * 35, 120, 80, { restitution: 0.3, friction: 0.1, render: { fillStyle: colors[i % colors.length], strokeStyle: '#000', lineWidth: 4 } }));
  Composite.add(eng.world, [
    Bodies.rectangle(W / 2, H + 25, W, 50, { isStatic: true, render: { visible: false } }),
    Bodies.rectangle(-25, H / 2, 50, H, { isStatic: true, render: { visible: false } }),
    Bodies.rectangle(W + 25, H / 2, 50, H, { isStatic: true, render: { visible: false } }),
    ...cards,
  ]);
  Composite.add(eng.world, MouseConstraint.create(eng, { mouse: Mouse.create(rend.canvas), constraint: { stiffness: 0.2, render: { visible: false } } }));
  Render.run(rend);
  Runner.run(Runner.create(), eng);
})();

<!-- Skeleton: content-physics-cards-brutalist -->
<div class="matter-host" style="position:relative;height:60vh"></div>

/* Styling: content-physics-cards-brutalist */
.matter-host { position: relative; height: 60vh; overflow: hidden; border: 4px solid #000; background: #fff; }
.matter-host canvas { display: block; }