/* fx.css · scroll-linked/drift, the photo drifts with the scroll · owner: Lizzy East · all rights reserved */

/* The frame clips; the photograph inside moves with the scroll itself (a CSS
   scroll-driven animation), only where that is supported, only with motion
   allowed, and only for fine pointers: under a finger it reads as a broken page. */
[data-fx~="scroll-linked/drift"] { overflow: clip; }
[data-fx~="scroll-linked/drift"] img {
  display: block;
  width: 100%;
  height: calc(100% + 2 * var(--fx-drift, 40px));
  margin-block: calc(var(--fx-drift, 40px) * -1);
  object-fit: cover;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    html:not(.fx-still) [data-fx~="scroll-linked/drift"] img {
      animation: fx-drift linear both;
      animation-timeline: view();
    }
  }
}
@keyframes fx-drift {
  from { translate: 0 calc(var(--fx-drift, 40px) * -1); }
  to { translate: 0 var(--fx-drift, 40px); }
}