// Mechanisme: gallery-hover-shift-editorial
import gsap from 'https://esm.sh/gsap@3.12.5';
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const items = gsap.utils.toArray('.hse-item');
const focus = (idx) => {
  items.forEach((it, i) => {
    gsap.to(it, {
      x: idx === -1 ? 0 : (i === idx ? (i % 2 === 0 ? 24 : -24) : 0),
      autoAlpha: idx === -1 ? 1 : (i === idx ? 1 : 0.4),
      duration: 1.2, ease: 'expo.out',
    });
  });
};
items.forEach((it, i) => {
  it.addEventListener('mouseenter', () => focus(i));
  it.addEventListener('mouseleave', () => focus(-1));
});

<!-- Skeleton: gallery-hover-shift-editorial -->
<section class="hse">
  <aside class="hse__rail"><span>— Plate</span></aside>
  <div class="hse__col">
    <figure class="hse-item">
      <div class="hse-item__img"></div>
      <figcaption><em>Portrait, March</em> — No. 01</figcaption>
    </figure>
  </div>
</section>

/* Styling: gallery-hover-shift-editorial */
:root {
  --hse-paper: #F4F1EB;
  --hse-ink: #1B1A17;
}
.hse { font-family: 'Fraunces', serif; }
.hse-item figcaption { font-style: italic; }