/* fx.css · scroll-cinema/horizontal-pan, a row of work glides sideways with the scroll · owner: Lizzy East · all rights reserved */

/* Scrolling down moves the row sideways (a CSS scroll timeline): the wheel is never
   captured. Without scroll timelines, or with motion off, the row is a plain grid. */
[data-fx~="scroll-cinema/horizontal-pan"] [data-fx-track] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0 var(--fx-pan-gutter, 1.5rem);
  list-style: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/horizontal-pan"] { height: 320vh; view-timeline-name: --fx-pan; }
    html:not(.fx-still) [data-fx~="scroll-cinema/horizontal-pan"] [data-fx-stage] {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      display: grid;
      align-content: center;
      overflow: clip;
      container-type: inline-size;
    }
    html:not(.fx-still) [data-fx~="scroll-cinema/horizontal-pan"] [data-fx-track] {
      display: flex;
      width: max-content;
      animation: fx-pan linear both;
      animation-timeline: --fx-pan;
      animation-range: contain 0% contain 100%;
    }
    html:not(.fx-still) [data-fx~="scroll-cinema/horizontal-pan"] [data-fx-track] > * { width: var(--fx-pan-card, min(78vw, 26rem)); flex: none; }
  }
}
@keyframes fx-pan {
  from { translate: 0 0; }
  to { translate: calc(-100% + 100cqw) 0; }
}