/* fx.css · scroll-cinema/split-reveal, two panels part to reveal a photo · owner: Lizzy East · all rights reserved */

/* The panels are decoration; the photograph is always there beneath them. Without
   scroll timelines, or with motion off, there are no panels at all. */
[data-fx~="scroll-cinema/split-reveal"] [data-fx-stage] { position: relative; overflow: clip; }
[data-fx~="scroll-cinema/split-reveal"] img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
[data-fx~="scroll-cinema/split-reveal"] [data-fx-half] { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/split-reveal"] { height: 220vh; view-timeline-name: --fx-split; }
    html:not(.fx-still) [data-fx~="scroll-cinema/split-reveal"] [data-fx-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; }
    html:not(.fx-still) [data-fx~="scroll-cinema/split-reveal"] img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    html:not(.fx-still) [data-fx~="scroll-cinema/split-reveal"] [data-fx-half] {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50.5%;
      display: grid;
      align-content: center;
      overflow: clip;
      background: var(--fx-split-color, #16130f);
      color: var(--fx-split-ink, #f1ece3);
      font: italic 400 clamp(3rem, 11vw, 10rem) / 1 var(--fx-split-font, Georgia, serif);
      letter-spacing: -0.03em;
      white-space: nowrap;
      animation: linear both;
      animation-timeline: --fx-split;
      animation-range: contain 5% contain 70%;
    }
    html:not(.fx-still) [data-fx~="scroll-cinema/split-reveal"] [data-fx-half="left"] { left: 0; justify-content: end; animation-name: fx-split-left; }
    html:not(.fx-still) [data-fx~="scroll-cinema/split-reveal"] [data-fx-half="right"] { right: 0; justify-content: start; animation-name: fx-split-right; }
  }
}
@keyframes fx-split-left { to { translate: -101% 0; } }
@keyframes fx-split-right { to { translate: 101% 0; } }