/* fx.css · type/outline-parallax, a giant outlined word drifts behind the content · owner: Lizzy East · all rights reserved */

/* The word is decoration (aria-hidden) behind everything in the block, which clips
   it. Where scroll timelines exist and motion is allowed it slides sideways at its
   own slower pace as the block passes; elsewhere, and with motion off, it simply
   sits there. It takes the font of its surroundings; only its size and outline are
   set here. */
[data-fx~="type/outline-parallax"] { position: relative; isolation: isolate; overflow: clip; }
[data-fx~="type/outline-parallax"] > [data-fx-word] {
  position: absolute;
  z-index: -1;
  top: var(--fx-word-top, 50%);
  left: 0;
  margin: -0.42em 0 0;
  padding: 0 0 0 var(--fx-word-start, 4vw);
  font-size: var(--fx-word-size, clamp(10rem, 40vw, 36rem));
  line-height: 0.84;
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--fx-word-stroke, max(1px, 0.0035em)) var(--fx-word-ink, color-mix(in srgb, currentColor 48%, transparent));
  pointer-events: none;
  user-select: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="type/outline-parallax"] { view-timeline-name: --fx-outline; }
    html:not(.fx-still) [data-fx~="type/outline-parallax"] > [data-fx-word] {
      animation: fx-outline-drift linear both;
      animation-timeline: --fx-outline;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes fx-outline-drift {
  from { translate: var(--fx-word-from, 6%) 0; }
  to { translate: var(--fx-word-to, -38%) 0; }
}