/* fx.css · scroll-cinema/card-to-full, a card opens out to full screen · owner: Lizzy East · all rights reserved */

/* Tied to the scroll itself (a CSS scroll timeline): nothing captures the wheel.
   Without scroll timelines, or with motion off, it is a plain full-width photo. */
[data-fx~="scroll-cinema/card-to-full"] [data-fx-stage] { overflow: clip; }
[data-fx~="scroll-cinema/card-to-full"] img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/card-to-full"] { height: 220vh; view-timeline-name: --fx-card-full; }
    html:not(.fx-still) [data-fx~="scroll-cinema/card-to-full"] [data-fx-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; }
    html:not(.fx-still) [data-fx~="scroll-cinema/card-to-full"] img {
      height: 100%;
      aspect-ratio: auto;
      animation: fx-card-full linear both;
      animation-timeline: --fx-card-full;
      animation-range: contain 0% contain 60%;
    }
  }
}
@keyframes fx-card-full {
  from { clip-path: inset(16% 20% round 14px); }
  to { clip-path: inset(0 0 round 0); }
}