/* =================================================================== BUTTON HOVER — 5px pixel fill (global css) ===================================================================

   The hover colour arrives one 5px square at a time, in a random order, and
   drains the same way on the way out. 5px is not a free choice: it is
   --notch-sm, the step the button's own corner is cut with, so the fill is
   built out of the same pixel the shape is.

   Painted on a <canvas> the script injects, not on DOM cells — a 259x70 button
   is 728 squares, and eight buttons of those as elements is 5.8k nodes for
   decoration. Same reasoning as the cursor trail (CLAUDE.md 9.6).

   Sections write nothing for this. It attaches itself to every .btn.
   =================================================================== */

.btn {
    /* containing block for the fill layer; isolate keeps it out of any
       blending happening further up (the header is a difference layer) */
    position: relative;
    isolation: isolate;
}

/* The hover colour, exposed as a custom property so the script can read it off
   the button instead of hard-coding a palette it would then have to track.
   These are the same two values vendor.css uses for :hover. */
.btn-primary { --btn-fill: var(--primary-dark); }
.btn-white { --btn-fill: var(--cream-dark); }

/* Only while the script is actually running: the CSS hover would repaint the
   whole button instantly and beat the squares to it, so the base colour is held
   and the canvas is left to make the change. Without JS, on touch, or with
   reduced motion the class is never set and the plain hover comes back. */
html.btn-pixel {
    & .btn-primary:hover,
    & .btn-primary:focus-visible { background: var(--primary); }

    & .btn-white:hover,
    & .btn-white:focus-visible { background: var(--white); }
}

/* The injected layer — under the label, over the button's own background.

   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 button. These force the
   layout box back onto the button while the drawing surface stays DPR-scaled. */
.btn__pixels {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* the script wraps the label in this so the squares can pass behind it.
   gap: inherit keeps .btn-icon's icon/label spacing working after the wrap. */
.btn__label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
}