/* ATELIER — line mask. The .line clips, the .line-inner moves.
   One text node per line, so the browser still kerns the whole line.
   Per-character spans would each be their own box and kerning dies. */

.line { overflow: hidden; }

.line-inner {
  transform: translateY(110%);              /* fully below the mask */
  will-change: transform;
  transition: transform var(--dur-scene, 560ms) var(--ease-out, cubic-bezier(.25, .1, .35, 1));
}

.on .line-inner { transform: translateY(0); }

/* Set while re-splitting after a resize: restore the state without animating. */
.noanim .line-inner { transition: none; }