/* fx.css · scroll-linked/grow, the photo slowly grows · 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/grow"] { overflow: clip; }
[data-fx~="scroll-linked/grow"] img {
  display: block;
  width: 100%;
  height: 100%;
  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/grow"] img {
      animation: fx-grow linear both;
      animation-timeline: view();
    }
  }
}
@keyframes fx-grow {
  from { scale: 1; }
  to { scale: var(--fx-grow, 1.08); }
}