/* fx.css · type/scroll-words, one word in the headline swaps as you scroll · owner: Lizzy East · all rights reserved */

/* The slot stacks its words in one place, as wide as the widest, so a swap never
   moves the words around it. The slot is for the eye (aria-hidden); the sentence
   readers hear is written out in data-fx-said. Without script, or with motion off,
   the first word simply stays. fx.js picks the word from the headline's place on
   screen; the swap is a short slide and fade. */
[data-fx~="type/scroll-words"] { position: relative; }
[data-fx~="type/scroll-words"] [data-fx-words] {
  display: inline-grid;
  justify-items: start;
  clip-path: inset(-0.15em -0.3em -0.3em -0.15em);
}
[data-fx~="type/scroll-words"] [data-fx-words] > * { grid-area: 1 / 1; white-space: nowrap; }
[data-fx~="type/scroll-words"] [data-fx-words] > :not(:first-child) { visibility: hidden; opacity: 0; }
[data-fx~="type/scroll-words"] [data-fx-said] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.fx-armed [data-fx~="type/scroll-words"] [data-fx-words][data-fx-at] > * {
  visibility: visible;
  opacity: 0;
  translate: 0 0.65em;
  transition: opacity var(--fx-swap-dur, 420ms) var(--fx-ease), translate var(--fx-swap-dur, 420ms) var(--fx-ease);
}
html.fx-armed [data-fx~="type/scroll-words"] [data-fx-words][data-fx-at] > [data-fx-gone] { translate: 0 -0.65em; }
html.fx-armed [data-fx~="type/scroll-words"] [data-fx-words][data-fx-at] > [data-fx-on] { opacity: 1; translate: 0 0; }