/* Letter reels for headings (assets/roll.js). Each letter keeps its own width
   (the hidden .sz copy); the strip of glyphs runs past it, clipped above and below
   only, so wide glyphs can pass over their neighbours while they spin. Glyphs on
   the strip sit half an em apart, so no tail of the one before shows on the letter. */
.roll .word { display: inline-block; white-space: nowrap; }
.roll .ch {
  --step: calc(1lh + 0.5em);
  position: relative; display: inline-block; vertical-align: top; height: 1lh;
  clip-path: inset(-0.12em -0.5em);
}
.roll .sz { visibility: hidden; }
.roll .strip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); text-align: center; transition: transform 0.35s var(--ease); }
.roll .strip span { display: block; height: var(--step); }
.roll.rolled .strip {
  transform: translate(-50%, calc(var(--n) * var(--step) * -1));
  transition: transform calc(0.6s + var(--n) * 0.08s) cubic-bezier(0.2, 0.75, 0.1, 1) var(--d);
}

/* The quiet one (rise() in assets/roll.js): a short lift and fade, staggered by --d. */
.rise { opacity: 0; transform: translateY(14px); }
.rise.in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms);
}