/* ===================================================================
   CARD SEQUENCE — a card arrives in three beats.

   On scroll-in, a card marked `data-card-sequence` plays:
     1. its background colour fills in, one 8px square at a time, in a
        random order — the same pixel the buttons fill with on hover
        (CLAUDE.md §4.2), so the two read as one system;
     2. then its figure counts up;
     3. then its copy rises out of a mask from below.

   Client request, 2026-08-21, for the three market stat cards.

   Almost nothing is declared here on purpose. The card's own background
   colour is read off the element at runtime and put back by removing an
   inline style, so this file never has to know that .market__stat is
   --cream — a repaint or a second set of cards needs no change to it.
   Same reasoning as --btn-fill in btn-pixel.css.

   ⚠️ Everything below is scoped to .is-seq-pending, which the script
   only adds when the effect is really going to run and removes when the
   card is done. So the finished card is the original DOM and the
   original cascade: with JS off, on reduced motion, or on any bail path
   there is no state here to undo.
   ------------------------------------------------------------------- */
[data-card-sequence] {
    /* the canvas is absolutely positioned against this. Set unconditionally
       because the card must not shift when the class arrives — and no card
       using this effect positions itself. */
    position: relative;
}

/* The fill canvas. Behind the content, above the (transparent) background.
   It inherits the card's clip-path, so the fill respects the notched
   corners rather than squaring them off. */
.card-seq__pixels {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;    /* a canvas is a replaced element: without these it lays */
    height: 100%;   /* out at its intrinsic 300x150 (see btn-pixel.css) */
    pointer-events: none;
}

/* Positioned children paint above in-flow ones, so the content has to be
   raised over the canvas explicitly or the squares cover the text. */
[data-card-sequence].is-seq-pending > *:not(.card-seq__pixels) {
    position: relative;
    z-index: 1;
}

/* The mask the copy rises out of. `clip` rather than `hidden` so it can
   never introduce a scroll container. */
[data-card-sequence].is-seq-pending [data-card-seq-rise] {
    overflow: clip;
}

.card-seq__rise {
    display: block;
    will-change: transform;
}