/* fx.css · layout/split-scroll, two columns scroll in opposite directions · owner: Lizzy East · all rights reserved */

/* A plain two-column grid first. Where CSS scroll timelines exist and motion is
   allowed, the block grows tall and its stage holds still while you scroll: the left
   column rises and the right one sinks, so the photographs pass each other. The page
   scrolls natively throughout; nothing listens to the wheel. */
[data-fx~="layout/split-scroll"] [data-fx-stage] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--fx-split-gap, clamp(0.75rem, 2vw, 1.5rem));
  max-width: var(--fx-split-max, 64rem);
  margin-inline: auto;
  padding-inline: var(--fx-split-gutter, clamp(1rem, 4vw, 3rem));
}
[data-fx~="layout/split-scroll"] [data-fx-col] {
  display: grid;
  gap: var(--fx-split-gap, clamp(0.75rem, 2vw, 1.5rem));
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-fx~="layout/split-scroll"] [data-fx-col] figure { display: grid; gap: 0.5rem; margin: 0; }
[data-fx~="layout/split-scroll"] [data-fx-col] img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--fx-split-shape, 4 / 5);
  object-fit: cover;
  border-radius: 2px;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="layout/split-scroll"] { height: var(--fx-split-length, 300vh); view-timeline-name: --fx-split; }
    html:not(.fx-still) [data-fx~="layout/split-scroll"] [data-fx-stage] {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      padding-block: var(--fx-split-pad, 1.5rem);
      overflow: clip;
      container-type: size;
    }
    html:not(.fx-still) [data-fx~="layout/split-scroll"] [data-fx-col] {
      animation: fx-split-rise linear both;
      animation-timeline: --fx-split;
      animation-range: contain 0% contain 100%;
    }
    html:not(.fx-still) [data-fx~="layout/split-scroll"] [data-fx-col] + [data-fx-col] { animation-name: fx-split-sink; }
  }
}
/* Each column travels its own overflow: from its top in view to its bottom in view. */
@keyframes fx-split-rise {
  from { translate: 0 0; }
  to { translate: 0 calc(100cqh - 100%); }
}
@keyframes fx-split-sink {
  from { translate: 0 calc(100cqh - 100%); }
  to { translate: 0 0; }
}