/* =============================================
   Typewriter -- generic scroll-triggered letter-by-letter reveal
   Pair with assets/js/typewriter.js; add `data-typewriter`
   to any element containing plain text.
   ============================================= */

/* Untyped remainder — occupies its final space, invisible until typed */
.typewriter__rest {
  visibility: hidden;
}

/* The characters currently being written. typewriter.js sets opacity on this
   span every frame, so it must not carry a transition of its own — the JS is
   already the animation, and a transition would lag a frame behind it. */
.typewriter__ink {
  transition: none;
  will-change: opacity;
}

/* Un-typed text renders raw on first paint, so an element below the fold
   sits fully visible until it is scrolled to, then gets cleared and typed —
   a visible flash-then-restart. Hiding it until JS reveals it in the same
   frame it starts typing (see .is-typed in typewriter.js) removes that.

   The .js-typewriter gate matters: typewriter.js sets it on <html> as its
   first action, so if the script never runs — blocked, errored, unsupported —
   nothing is hidden and every heading still reads. Never pre-hide text on the
   assumption that a script will arrive to reveal it. */
html.js-typewriter [data-typewriter]:not(.is-typed) {
  opacity: 0;
}
html.js-typewriter [data-typewriter].is-typed {
  opacity: 1;
}
/* Own layer while typing: every tick rewrites the text, and on iOS Safari a
   repaint of the surrounding tiles mid-scroll is deferred until the scroll
   settles, so the line used to arrive fully written. A small layer of its
   own repaints on its own. Dropped once the line is done. */
html.js-typewriter [data-typewriter]:not(.is-typed-done) {
  will-change: opacity, contents;
}
@media (prefers-reduced-motion: reduce) {
  html.js-typewriter [data-typewriter] {
    opacity: 1;
  }
}

/* Script comma, lowered toward the baseline (see painter() in typewriter.js).
   Relative offset, so the line's layout does not move. */
.typewriter__comma {
  position: relative;
  top: 0.15em;
}

.typewriter__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}