/* fx.css · story/curtain, each section wipes over the last like curtains drawing · owner: Lizzy East · all rights reserved */

/* Pure CSS on the native scroll. Every panel is a full screen that sticks to the top;
   each one after the first holds still over the one before while the scroll opens it
   from a slit in the middle out to both edges (clip-path on a scroll timeline). With
   motion off, or where scroll timelines are missing, the panels simply stack. A panel
   holding keyboard focus is shown whole at once. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="story/curtain"] { background: var(--fx-curtain-bg, #111117); }
    html:not(.fx-still) [data-fx~="story/curtain"] > [data-fx-panel] {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 0;
      overflow: clip;
    }
    html:not(.fx-still) [data-fx~="story/curtain"] > [data-fx-panel] ~ [data-fx-panel] {
      animation: fx-curtain linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    html:not(.fx-still) [data-fx~="story/curtain"] > [data-fx-panel]:focus-within { animation: none; }
  }
}
@keyframes fx-curtain {
  from { translate: 0 -100%; clip-path: var(--fx-curtain-from, inset(0 50% 0 50%)); }
  to { translate: 0 0; clip-path: inset(0 0 0 0); }
}