/* dotted-text — text/number rendered as an animated dot swarm.
   Positioning of the canvas overlay is computed in JS (it has to exactly
   match the text span's own box, which the host may be larger/smaller than —
   e.g. a flex cell), not pure CSS like dot-wave. This file only sets the
   structural bits: the host as the positioning context, the canvas as an
   absolutely-positioned overlay, and hiding the real text once JS has taken
   over drawing it (data-dotted-text-initialized is the JS-set init guard).

   Follows this project's data-effect convention (docs/EFFECTS.md):
   root `data-effect` token list + per-effect `data-dotted-text-*` options. */

[data-effect~="dotted-text"] {
  position: relative;
  line-height: 1em;
  /* line-height: normal; */
  white-space: nowrap;
}

[data-effect~="dotted-text"][data-dotted-text-initialized] .dotted-text-source {
  opacity: 0;
  line-height: 1em;
}

[data-effect~="dotted-text"] .dotted-text-canvas {
  position: absolute;
  pointer-events: none;
  display: block;
}