/* Scatter-letters scrub: a pinned line of huge text slides right-to-left with the scroll; every letter starts
   flung up/down and tilted and springs onto the baseline as it crosses the screen. Measured from truus.co
   ("We wanna be where the people are", MWG 011), rewritten. Layout here, motion in part.js. */
.scatter {
  --scatter-height: 300svh;   /* scroll track; the text slides over -30%..125% of it */
  --scatter-min: 44em;        /* min height of the pinned stage */
  --scatter-gutter: 25vw;     /* space either side of the text line */
  position: relative;
  height: var(--scatter-height);
  overflow: clip;
}
.scatter__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: var(--scatter-min);
  display: flex; align-items: center;
}
.scatter__track {
  position: relative; flex: none;
  margin: 0 var(--scatter-gutter);
  will-change: transform;
}
.scatter__text { margin: 0; white-space: nowrap; width: max-content; }
.scatter__word { display: inline-block; white-space: nowrap; }
.scatter__char, [data-scatter-item] { display: inline-block; will-change: transform; }
[data-scatter-item] { transform-origin: 50% 50%; }