/* fx.css · scroll-cinema/sticky-stack, cards settle on one another like a deck · owner: Lizzy East · all rights reserved */

/* Each card sticks a little lower than the last, so they pile up like a deck (plain
   sticky positioning, then a gentle step back as the next arrives). With motion off,
   or without scroll timelines, the cards are a plain list. */
[data-fx~="scroll-cinema/sticky-stack"] { display: grid; gap: 1.5rem; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/sticky-stack"] { gap: 20vh; padding-bottom: 10vh; }
    html:not(.fx-still) [data-fx~="scroll-cinema/sticky-stack"] > [data-fx-card] {
      position: sticky;
      top: calc(var(--fx-stack-top, 12vh) + var(--fx-n, 0) * 1.5rem);
      min-height: 62vh;
      box-shadow: 0 -18px 40px rgb(0 0 0 / 0.12);
      transform-origin: 50% 0;
      animation: fx-stack linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    html:not(.fx-still) [data-fx~="scroll-cinema/sticky-stack"] > [data-fx-card]:last-child { animation: none; }
  }
}
[data-fx~="scroll-cinema/sticky-stack"] > [data-fx-card]:nth-child(2) { --fx-n: 1; }
[data-fx~="scroll-cinema/sticky-stack"] > [data-fx-card]:nth-child(3) { --fx-n: 2; }
[data-fx~="scroll-cinema/sticky-stack"] > [data-fx-card]:nth-child(4) { --fx-n: 3; }
[data-fx~="scroll-cinema/sticky-stack"] > [data-fx-card]:nth-child(5) { --fx-n: 4; }
@keyframes fx-stack { to { scale: 0.94; } }