/* fx.css · type/lines, each line of a headline rises from behind a mask · owner: Lizzy East · all rights reserved */

/* The author marks each line (<span data-fx-line>), so the headline breaks exactly
   where it was written. A waiting line sits just below its own bottom edge, clipped
   there; the clip and the rise travel together, so the mask edge never moves and the
   line comes up from behind it, one line after another. No script of its own. */
[data-fx~="type/lines"] [data-fx-line] { display: block; --fx-line-n: 0; }
[data-fx~="type/lines"] [data-fx-line]:nth-child(2) { --fx-line-n: 1; }
[data-fx~="type/lines"] [data-fx-line]:nth-child(3) { --fx-line-n: 2; }
[data-fx~="type/lines"] [data-fx-line]:nth-child(4) { --fx-line-n: 3; }
[data-fx~="type/lines"] [data-fx-line]:nth-child(5) { --fx-line-n: 4; }
[data-fx~="type/lines"] [data-fx-line]:nth-child(6) { --fx-line-n: 5; }
[data-fx~="type/lines"] [data-fx-line]:nth-child(n+7) { --fx-line-n: 6; }
html.fx-armed [data-fx~="type/lines"].is-pending [data-fx-line] {
  translate: 0 calc(100% + 0.25em);
  clip-path: inset(-0.25em -0.25em 100% -0.25em);
}
html.fx-armed [data-fx~="type/lines"].is-in [data-fx-line] {
  clip-path: inset(-0.25em -0.25em -0.25em -0.25em);
  transition: translate var(--fx-line-dur, 950ms) var(--fx-line-ease, cubic-bezier(0.2, 0.8, 0.2, 1)), clip-path var(--fx-line-dur, 950ms) var(--fx-line-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
  transition-delay: calc(var(--fx-delay, 0ms) + var(--fx-line-n, 0) * var(--fx-line-stagger, 120ms));
}