/* Scroll effects (scroll-fx.js). The script hides only what is still below the fold, then
   animates it in; these rules are the waiting state and the word mask. */
.fx-wait { opacity: 0; }
[data-fx='words'].fx-wait { opacity: 1; visibility: hidden; }
.fx-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.fx-word > span { display: inline-block; }

/* Scroll-linked extras, where the browser can tie an animation to the scroll position.
   They use `scale` and `translate`, which add to any transform an element already has. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* dark panels and the footer grow into place as they come up the screen */
    html:not(.paused-motion) :is(.rs-dark, .footer-shell, .rs-band > div) {
      animation: fx-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    /* a service page's big picture eases back as you scroll past it */
    html:not(.paused-motion) .rs-frame .rs-i {
      animation: fx-recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    /* pictures inside split sections drift a little against the text beside them */
    html:not(.paused-motion) .rs-split > :is(.rs-i, .rs-shot, figure) {
      animation: fx-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes fx-grow { from { scale: .92; opacity: .4; } to { scale: 1; opacity: 1; } }
@keyframes fx-recede { from { scale: 1; opacity: 1; } to { scale: .95; opacity: .55; } }
@keyframes fx-drift { from { translate: 0 36px; } to { translate: 0 -36px; } }