/* fx.css · scroll-cinema/read-along, a paragraph inks in line by line as you scroll · owner: Lizzy East · all rights reserved */

/* The text is always readable (its grey passes AA for large text); the ink fills
   in with the scroll. With motion off, or without scroll timelines, it is all ink. */
[data-fx~="scroll-cinema/read-along"] [data-fx-read] { color: var(--fx-read-ink, #16130f); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/read-along"] { view-timeline-name: --fx-read; }
    html:not(.fx-still) [data-fx~="scroll-cinema/read-along"] [data-fx-read] {
      color: transparent;
      background-image: linear-gradient(var(--fx-read-ink, #16130f), var(--fx-read-ink, #16130f)), linear-gradient(var(--fx-read-dim, #7a7164), var(--fx-read-dim, #7a7164));
      background-size: 0% 100%, 100% 100%;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      animation: fx-read linear both;
      animation-timeline: --fx-read;
      animation-range: cover 20% cover 60%;
    }
  }
}
@keyframes fx-read { to { background-size: 100% 100%, 100% 100%; } }