// Mechanisme: gallery-drag-carousel-minimal
import gsap from 'https://esm.sh/gsap@3.12.5';
import { Draggable } from 'https://esm.sh/gsap@3.12.5/Draggable';
import { InertiaPlugin } from 'https://esm.sh/gsap@3.12.5/InertiaPlugin';
gsap.registerPlugin(Draggable, InertiaPlugin);
const track = document.querySelector('.dcm-track');
const wrap = document.querySelector('.dcm-wrap');
const max = -(track.scrollWidth - wrap.clientWidth);
Draggable.create(track, { type: 'x', bounds: { minX: max, maxX: 0 }, inertia: true });
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  gsap.to(track, { x: max, duration: 8, ease: 'none', repeat: -1, yoyo: true });
}

<!-- Skeleton: gallery-drag-carousel-minimal -->
<section class="dcm">
  <header class="dcm__head">
    <span class="dcm__eyebrow">01 · Index</span>
    <h2 class="dcm__title">Studies</h2>
  </header>
  <div class="dcm-wrap">
    <div class="dcm-track">
      <article class="dcm-card">
        <span class="dcm-card__num">01</span>
        <h3>—</h3>
        <p>—</p>
      </article>
    </div>
  </div>
</section>

/* Styling: gallery-drag-carousel-minimal */
:root {
  --dcm-paper: #F4F1EB;
  --dcm-ink: #0A0A0A;
  --dcm-rule: rgba(10,10,10,.16);
}
.dcm { font-family: 'Inter', system-ui, sans-serif; }
.dcm-card { border: 1px solid var(--dcm-rule); }