/* =================================================================== ASCII 3D — global css ===================================================================

   The canvas ascii-3d.js renders the key into (CLAUDE.md §8.0.5's sibling
   effect, added 2026-08-24). Sections write nothing for this.

   ⚠️ This file and assets/js/global/ascii-3d.js are a SET, and the import
   map in index.html is part of it. The script alone would append an
   unpositioned block element into the middle of a stepped slab; this file
   alone does nothing at all.

   ⚠️ The <img> is hidden with `visibility`, never `display`. It is what
   the canvas is MEASURED from — ascii-3d.js reads img.offsetWidth /
   offsetLeft every resize — so collapsing its box would leave the stage
   sized 0 and the drawing would vanish. Same call, for the same reason,
   as ascii-reveal.css (§8.0.5 point 4).

   ⚠️ The stage carries `transform: none`. .one-reason__art has a static
   rotateY/rotateX tilt, and the stage sits INSIDE that slab — without
   this it would inherit nothing, but the rule is kept explicit because
   the tilt and this canvas are two answers to the same brief and only one
   of them may be applied at a time. The CSS tilt is the FALLBACK: it is
   what a reader without WebGL, with reduced motion, or with JS off sees,
   and it stays in one-reason.css precisely for them.
   =================================================================== */
.ascii-3d__stage {
    position: absolute;
    z-index: 0;
    transform: none;
    pointer-events: none;
    user-select: none;

    & canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
}

/* only ever set once the script has actually taken over, so a failed or
   skipped init can never leave the artwork hidden */
.is-ascii-3d > img {
    visibility: hidden;
}

/* Nothing here is motion the reader can opt out of at the CSS level —
   ascii-3d.js returns before it touches the DOM under
   prefers-reduced-motion, so the still <img> keeps its box and its tilt. */
@media (prefers-reduced-motion: reduce) {
    .ascii-3d__stage { display: none; }
    .is-ascii-3d > img { visibility: visible; }
}