/* =================================================================== ASCII REVEAL — 15px tile assemble (global css) ===================================================================

   The ASCII drawings arrive one 15px tile at a time, in a random order, when
   their section scrolls in — so the artwork assembles itself as a pattern
   instead of fading in as a single block.

   15px is not a free choice: it is the cursor trail's grid step (CLAUDE.md 9.6),
   the same stepped-square family as the button's 5px pixel fill (4.2) and the
   notched corners. The three effects are built out of the same pixel.

   Painted on a <canvas> the script injects, not on DOM cells — a 500x496 drawing
   is ~1,100 tiles, and two of those as elements is 2.2k nodes for decoration.
   Same reasoning as btn-pixel.css and the cursor trail.

   Sections write nothing for this, and the markup carries no styling: the
   wrapper opts in with `data-ascii-reveal` and everything else is here.

   NOTE: no `position` is set on the wrapper. The .ascii-art wrappers are already
   `position: absolute`, which makes them a containing block for the canvas on
   their own — declaring `relative` here would drop them out of their placement.
   =================================================================== */

/* The injected surface, sitting exactly over the image it is drawing.

   width/height are not redundant next to inset: 0. A canvas is a replaced
   element, so an absolutely positioned one with `width: auto` lays out at its
   INTRINSIC size — the 300x150 default, or the device-pixel size the script
   gives it, which on a 2x screen would be twice the artwork. These force the
   layout box back onto the wrapper while the drawing surface stays DPR-scaled.
   (Caught in the button build; the same trap applies here.) */
.ascii-reveal__surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Only while the canvas is actually painting. The <img> keeps its box — it is
   what sizes the wrapper, and the responsive width clamps depend on it — so it
   is hidden with opacity, never with display or visibility.

   Set by the script, and removed again the moment the last tile lands: the
   canvas is then dropped and the real SVG comes back, so the end state is the
   original DOM and the artwork stays vector-crisp under zoom. */
[data-ascii-reveal].is-revealing > img { opacity: 0; }