/* A brief heading entrance, not a reading delay (see word-flow.js).
   240ms per word, at most 120ms of stagger for the entire heading, no blur.

   Words are hidden only once the script has split them, and only on screen,
   so the text reads without JavaScript and always prints. The transition
   lives on the revealed state alone, so hiding the words never animates. */
.word-flow-word {
  display: inline-block;
  /* Capped at the line width, so a word too long for its line still breaks
     under the text's own overflow-wrap (zoomed or enlarged text) instead of
     running past the edge and being clipped. */
  max-width: 100%;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .is-word-flow-ready .word-flow-word {
    opacity: 0;
    transform: translateY(0.2em);
  }
}

.is-word-flow-ready.is-word-flowing .word-flow-word {
  opacity: 1;
  transform: none;
  transition-property: opacity, transform;
  transition-duration: var(--word-flow-duration, 240ms);
  transition-timing-function: var(--ease-out);
  transition-delay: min(120ms, calc(var(--word-flow-index, 0) * var(--word-flow-stagger, 30ms)));
}

.is-word-flow-ready.is-word-flow-instant .word-flow-word { transition: none; }

@media (prefers-reduced-motion: reduce), print {
  .is-word-flow-ready .word-flow-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}