// Mechanisme: gallery-hover-shift-minimal
import gsap from 'https://esm.sh/[email protected]';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){
  document.querySelectorAll('.hsm-tile').forEach(t=>t.style.opacity='1');return;
}
const tiles=[...document.querySelectorAll('.hsm-tile')];
function focus(idx){
  tiles.forEach((t,i)=>{
    const active=i===idx;
    gsap.to(t,{scale:active?1.05:1,x:active?8:0,opacity:active?1:0.4,duration:0.9,ease:'expo.out'});
  });
}
let i=0;focus(i);
setInterval(()=>{i=(i+1)%tiles.length;focus(i);},2500);

<!-- Skeleton: gallery-hover-shift-minimal -->
<section class="hsm-stage">
  <p class="hsm-eyebrow">Index — 04</p>
  <div class="hsm-row">
    <figure class="hsm-tile"><canvas class="hsm-canvas" data-tone="0"></canvas><figcaption>I. Quietude</figcaption></figure>
    <figure class="hsm-tile"><canvas class="hsm-canvas" data-tone="1"></canvas><figcaption>II. Margin</figcaption></figure>
    <figure class="hsm-tile"><canvas class="hsm-canvas" data-tone="2"></canvas><figcaption>III. Linework</figcaption></figure>
    <figure class="hsm-tile"><canvas class="hsm-canvas" data-tone="3"></canvas><figcaption>IV. Pause</figcaption></figure>
  </div>
</section>

/* Styling: gallery-hover-shift-minimal — cream + ink, Inter 300, 1px rules */
.hsm-stage{background:#F4F1EB;color:#0A0A0A;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,4rem);min-height:70vh}
.hsm-eyebrow{font-family:'Inter',sans-serif;font-weight:300;letter-spacing:.32em;text-transform:uppercase;font-size:.7rem;border-bottom:1px solid rgba(10,10,10,.18);padding-bottom:1rem;margin:0 0 3rem}
.hsm-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.hsm-tile{margin:0;opacity:.4;transform-origin:left center}
.hsm-tile canvas{width:100%;aspect-ratio:3/4;display:block;border:1px solid rgba(10,10,10,.18)}
.hsm-tile figcaption{font-family:'Inter',sans-serif;font-weight:300;font-size:.78rem;letter-spacing:.06em;margin-top:.85rem;color:rgba(10,10,10,.66)}