/* fx.css · type/fill-on-scroll, outline letters fill with colour as you scroll · owner: Lizzy East · all rights reserved */

/* The words are real text throughout. Where scroll timelines exist and motion is
   allowed they start as outlines and fill with their own colour, line by line and
   left to right, keeping pace with the scroll (the fill is a background clipped to
   the letters, so there is no second copy of the words). Everywhere else, and with
   motion off, they are simply solid. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="type/fill-on-scroll"] { view-timeline-name: --fx-fill; }
    html:not(.fx-still) [data-fx~="type/fill-on-scroll"] [data-fx-ink] {
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: var(--fx-stroke, 0.022em) currentColor;
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 0% 100%;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      animation: fx-fill linear both;
      animation-timeline: --fx-fill;
      animation-range: var(--fx-fill-range, cover 12% cover 52%);
    }
  }
}
@keyframes fx-fill { to { background-size: 100% 100%; } }