/* fx.css · type/typewriter, a line types itself out once as it arrives · owner: Lizzy East · all rights reserved */

/* fx.js wraps a waiting line in .fx-typed (a plain block, so nothing reflows) and
   adds a caret. Waiting, the words are clipped away; arriving, they are uncovered a
   character at a time (under 1.5s), then the caret blinks three times and is gone.
   Without script, with motion off, or on screen at load, the line is simply there. */
[data-fx~="type/typewriter"] { position: relative; }
[data-fx~="type/typewriter"] > .fx-typed { display: block; }
[data-fx~="type/typewriter"] > .fx-caret {
  position: absolute;
  top: 0;
  left: 0;
  width: max(2px, var(--fx-caret-width, 0.07em));
  height: 1em;
  background: var(--fx-caret, currentColor);
  opacity: 0;
  pointer-events: none;
}
html.fx-armed [data-fx~="type/typewriter"].is-pending > .fx-typed {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
}