/* fx.css · scroll-cinema/zoom-through, the view zooms through a word into a photo · owner: Lizzy East · all rights reserved */

/* A paper veil with a black word, blended so the letters show the photograph; the
   scroll grows it until the picture fills the screen. The veil is decoration only.
   Without scroll timelines, or with motion off, the photograph simply sits there. */
[data-fx~="scroll-cinema/zoom-through"] [data-fx-stage] { position: relative; overflow: clip; }
[data-fx~="scroll-cinema/zoom-through"] img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
[data-fx~="scroll-cinema/zoom-through"] [data-fx-veil] { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/zoom-through"] { height: 280vh; view-timeline-name: --fx-zoom; }
    html:not(.fx-still) [data-fx~="scroll-cinema/zoom-through"] [data-fx-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; }
    html:not(.fx-still) [data-fx~="scroll-cinema/zoom-through"] img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    html:not(.fx-still) [data-fx~="scroll-cinema/zoom-through"] [data-fx-veil] {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: var(--fx-veil-paper, #f1ece3);
      color: #000000;
      mix-blend-mode: screen;
      font: 900 clamp(6rem, 30vw, 26rem) / 1 var(--fx-veil-font, Georgia, serif);
      letter-spacing: -0.05em;
      animation: fx-zoom-through linear both;
      animation-timeline: --fx-zoom;
      animation-range: contain 0% contain 85%;
    }
  }
}
@keyframes fx-zoom-through {
  0% { scale: 1; opacity: 1; }
  70% { scale: 14; opacity: 1; }
  100% { scale: 20; opacity: 0; }
}