/* Word swap loop. Measured from the Alture Webflow template's hero (IX2 a-6 "Header words swap", PAGE_START, loop),
   rewritten. One line of a headline is a clipped window; behind it the words sit in a column, the first in flow and
   each next one parked one line lower (top: i * 100%). part.js moves the column up one line at a time on Webflow's
   swingFromTo (back-in-out) curve: it winds DOWN ~10% first, overshoots ~10% past the next word, then settles.

   <span class="wswap" data-word-swap>
     <span class="wswap__words"><span class="wswap__word">daily.</span><span class="wswap__word">early.</span>...</span>
   </span>

   Width: the window is as wide as its container when it is a block (as the source, width 100%); as an inline
   element part.js sets min-width to the widest word so a long word is never cut. */
.wswap {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: clip;                 /* the window: exactly one line tall, set by the first word */
  overflow-clip-margin: 0;
}
.wswap--block { display: block; width: 100%; }
.wswap__words {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  will-change: transform;
}
.wswap__word { display: block; white-space: nowrap; }
.wswap__word + .wswap__word { position: absolute; left: 0; top: calc(var(--i, 1) * 100%); }