/* reveal.css - owned by piece P5 (Reveal transition).
   The pixel-tile dissolve (spec §4.1-R item 2) and the .showcase frame's
   visibility. The dissolve itself is one <canvas class="reveal"> that
   reveal.js lays over the clicked card's slot and repaints as a pure function
   of ONE progress scalar; this sheet holds its tokens and its static
   grammar. Nothing here animates on its own.

   Tokens:
     --dur-dissolve         the card's dissolve, desktop (spec: 500ms)
     --dur-dissolve-mobile  the same on the phone (400ms)
     --reveal-tile          tile side in lattice cells (2 = 16px at pitch 8)
   The open IS the dissolve and nothing else: the last tile lands on the
   handoff, and the showcase condenses the moment there is nothing left. The
   page does not move while it runs - not by a scroll, not by a lifted band -
   so there is no second duration to reconcile this one with.

   Palette discipline: the overlay paints only what the card painted - the
   ground, its dots, the picture, the plates and the words - so nothing here
   adds a colour, a blur, a gradient or a shadow. The showcase frame's own
   150ms fade (P6's dialog) is matched by the closing fade below. */

:root {
  --dur-dissolve: 500ms;
  --dur-dissolve-mobile: 400ms;
  --reveal-tile: 2;
  /* THE CENTRE PIECE'S OWN GRAIN. The card keeps two cells; the piece in the
     centre is the same material at three on a phone (18px at pitch 6), because
     at two it is 900 tiles drawn twice a frame on the slowest device the site
     has - measured at 40-70ms a frame under a 6x throttle, a 15fps materialise
     (2026-09-05, Dan: "it seems the animation lags a little bit"). At three it
     is ~400. The desktop keeps the fine grain: it has the budget for it. */
  --reveal-tile-piece: 2;
}
@media (max-width: 767px) {
  :root { --reveal-tile-piece: 3; }
}

/* ---- the pose property, REGISTERED so it does not inherit ----
   reveal.js writes it once a frame while the clock runs. An unregistered
   custom property inherits, so setting one on an element invalidates the style
   of every card, plate and canvas under it - measured as the paint's own worst
   frame going 5.2 -> 11.6ms, which is most of a 60fps budget spent on a
   cascade that changes nothing below the element it is set on. Declaring it
   `inherits: false` scopes the recalculation to the element that actually
   reads it, and the same run comes back at 1.7ms worst / 0.62ms mean over 117
   frames - under the piece with no pose at all. The initial value IS the
   resting state, so the var() fallbacks below are belt and braces on engines
   without @property. */
@property --reveal-recede {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
/* ...and one that MUST inherit, because the element it is written on is not
   the element that reads it: reveal.js sets it once a frame on .band and every
   card under the band but the subject reads it below. That is the whole point -
   one write instead of one write per card, and `:not([data-lifted])` doing the
   exclusion in the cascade rather than in a loop that would have to be kept in
   step with a drifting ring's clones. Its cost is the one the two properties
   above were registered to avoid (a custom-property change on .band invalidates
   the subtree's computed style), so it is paid ONCE: the value is rounded to
   three places and written only when it changes, which is 26% of the open -
   about 11 frames of a 700ms ride - and it is flat for the rest of it. */
@property --reveal-card-ink {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* ---- THE LIFT HIDES THE PICTURE AND NOTHING ELSE.
        A strip card is two objects: the artwork, and the readout row under the
        seam that carries the index and the label. Only the artwork is the
        piece. The row is the STRIP's rhythm - 01 02 03 counting along the band,
        and a label a visitor can still read while the piece opens - so a lift
        that took it down deleted the count exactly where the eye was pulled
        (measured: 01, 03, 04, 05 chipped, 02 bare) and blanked the one caption
        anyone was reading.
        So: only .card__window (the picture) goes. The row stays DOM, at full
        opacity, for the whole open, below the overlay's bottom edge entirely.
        (Where an index sits ON the artwork instead, reveal.js render() punches
        an even-odd hole its exact size and the real one shows through; P4 moved
        it into the row on 2026-09-03, so today that hole is empty.)
        A placeholder's canvas spans the whole card, so it is CLIPPED to its
        readout band rather than hidden: the card's own CSS dots - same recipe,
        same phase - hold the picture's slot as the tiles clear. ---- */
.card[data-lifted] .card__window,
.card[data-lifted] .card__media > .card__img { visibility: hidden; }
.card[data-lifted] .card__lattice { clip-path: inset(var(--media-h) 0 0 0); }

/* ---- the overlay: fixed over the slot, above the band and the bar, never
        interactive. Its box is the card's padding box (reveal.js writes the
        inline geometry); a translate follows the slot if anything moves it -
        a drift step, the visitor's own scroll, a resize. Nothing in this piece
        moves it, so on an undisturbed open that translate is 0,0. ---- */
.reveal {
  position: fixed;
  z-index: var(--z-reveal);
  display: block;
  max-width: none;
  pointer-events: none;
  contain: strict;
  image-rendering: auto;
}

/* the clock is running: keep the layer promoted for the ride. Named for the
   CLOCK, not for a move - the class this replaced was named after the retired
   isometric flight and was the last trace of it in the piece. */
.reveal.is-running { will-change: transform; }

/* after the handoff to the showcase every tile is gone: stop compositing it */
.reveal.is-handed { visibility: hidden; }

/* ---- THE STAGE STANDS BACK WHILE THE CARD COMES APART - IN INK, NOT IN MOTION
        (round 2, 2026-09-03, from a blind critic on the rendered Developer
        twin: the near-white cube field owns ~650x390px dead centre while the
        dissolving cell is a 230px band on the frame's bottom line - so the one
        interesting event is the smallest, lowest thing on screen.)

        Round 2 answered that with ink AND a shelf: .band rose twelve lattice
        rows to give the dissolving cell air under it. Dan retired the shelf on
        sight - "the entire row slides up a little bit and then down. Let it sit
        still." - so the transform rule that stood here, and the --reveal-lift
        property it read, are both gone. Weight is the whole answer now:

          --reveal-recede   on .stage__center: the centrepiece's INK only. It
                            does not move, scale or blur - its hairlines just
                            drop to about the tone of the ground's own dots, so
                            the geometry stays where the visitor last saw it and
                            only its weight leaves. Dimmed, never dissolved: no
                            tile is ever painted outside the card's picture, and
                            the stage STATEMENT is not in this rule at all.

        Scoped to the two moving phases so the page at rest carries no opacity
        and no promoted layer from this piece - and NO transform from it in any
        phase, at rest or running. `open` is absent deliberately (the frame is
        opaque over the whole stage by then, and the value is back to 1).
        Reduced motion never reaches the rule: it opens instantly and the phase
        goes idle -> open. ---- */
html[data-reveal="opening"] .stage__center,
html[data-reveal="closing"] .stage__center {
  opacity: var(--reveal-recede, 1);
}

/* ---- ...AND THE BAND'S OTHER CARDS RECEDE WITH THE CENTREPIECE ----
        (round 3, 2026-09-03, the blind critic on the rendered judge frame:
        "the stage's voxel wave has correctly dropped to --reveal-recede (a
        ghost), but cards 01/03/04/05 still sit at full ink and full 16-gami
        colour immediately beside a card that is half gone - so the eye goes to
        the neighbours and the subject is the palest thing in the band".)

        The same scalar, one floor lower on the curve (STAGE.cards), applied to
        the whole card and not just its picture. The whole card, because a
        placeholder's artwork is a canvas that spans the card behind the readout
        row (card.js prepends .card__lattice to .card__hit) while a real piece's
        is inside .card__media - so "the picture" is two different boxes on the
        two twins, and one of them cannot be dimmed without dimming its row
        anyway. Fading the card itself is the same effect on both, and it says
        the right thing: during an open the strip's count belongs to the piece
        being opened, whose row keeps full ink because the rule below skips it.

        Not a filter, not a blur, not a scale: the neighbours do not move, and
        their dot ground stays exactly where it was, because .card's own ground
        fades toward the band's identical one. Zero at p = 0, and the rule is
        scoped to the two moving phases, so a piece that opens and closes leaves
        the band pixel-identical. ---- */
html[data-reveal="opening"] .band .card:not([data-lifted]) {
  animation: reveal-cards-out var(--reveal-recede-ms, 130ms) cubic-bezier(.45, 0, .55, 1) both;
}
html[data-reveal="closing"] .band .card:not([data-lifted]) {
  /* the open played backwards: the cards hold the floor while the piece falls
     and come back over the last STAGE.recedeBy of the close - `both` is what
     holds them at the floor through the delay */
  animation: reveal-cards-in var(--reveal-recede-ms, 130ms) cubic-bezier(.45, 0, .55, 1) var(--reveal-close-delay, 370ms) both;
}
/* THE CURVE IS THE ANIMATION'S NOW, NOT A PER-FRAME WRITE (2026-09-05). The
   old rule read --reveal-card-ink, an inherited property reveal.js re-wrote on
   the band every frame of the recede; each write re-styled every element under
   the band before a tile could be drawn, and on a phone that was most of the
   dissolve's frame. reveal.js now writes the three numbers once per run
   (poseCards) and the compositor does the rest. The floor and the timing are
   STAGE.cards and STAGE.recedeBy exactly as before; the ease approximates the
   smootherstep the scalar used to run on. */
@keyframes reveal-cards-out {
  from { opacity: 1; }
  to { opacity: var(--reveal-cards-floor, 0.3); }
}
@keyframes reveal-cards-in {
  from { opacity: var(--reveal-cards-floor, 0.3); }
  to { opacity: 1; }
}

/* ---- THE CURRENT CARD'S INDEX, LIFTED OFF 4.35:1 ----
        (round 3, 2026-09-03, the blind critic on the rendered judge frame:
        "#E0312E on the #0B0B0C readout ground fails the 4.5:1 text line by a
        hair... lighten the red used for the index only; do not change --red
        itself, since the header lamp and playhead sit on other grounds".)

        Measured, both twins: card.css gives every card the same dark display
        panel (--rail-bg is --ground on the black twin and --ink on the white
        one, which is #0B0B0C either way), and --red on it is 4.355:1 - a text
        contrast failure on BOTH pages, not just the black one. #F04A45 is
        5.406:1 on that same panel: the same accent one step lighter, so the
        current index still reads as the one red thing in the band.

        Three things this deliberately does not do. It does not touch --red,
        which stays the token the header lamp, the playhead and the underscore
        are drawn from - those sit on other grounds and already pass. It does
        not lighten the plate, which would put a fifth tone in a four-colour
        system and break the card's "dark display panel" reading. And it is a
        literal, not a color-mix toward --ink, because --ink flips with the
        polarity while this panel does not - the same reason card.css writes its
        --rail-dot as #2A2A2C rather than through a var().

        OWNERSHIP: the rule this overrides is card.css's (P4), and the token
        belongs in tokens.css (F0). It is here because P5 was handed the finding
        and reveal.css is the only sheet P5 may write; it is unconditional (the
        failure exists at rest, not only during a dissolve) and should be lifted
        into card.css/tokens.css verbatim the next time P4 or F0 runs. ---- */
:root { --red-text: #F04A45; }          /* --red at text weight: 5.4:1 on the card's #0B0B0C panel */

.card[data-centered="true"] .card__index,
.card[data-current="true"] .card__index,
.card[data-playing="true"] .card__index { color: var(--red-text); }

/* ---- showcase frame: visibility is P5's, content inside is P6's.
        reveal.js flips [hidden] and writes data-state=opening|open|closing on
        [data-showcase]; the dialog's own first paint fades in (showcase.css),
        this is the matching fade out. ---- */
.showcase[data-state="closing"] {
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease);
}

/* ---- dev scrub (?scrub): binds the progress scalar to a range input ---- */
.reveal-scrub {
  position: fixed;
  left: 50%;
  bottom: var(--s-3);
  z-index: calc(var(--z-reveal) + 1);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--hairline);
  font-family: var(--font-readout);
  font-size: var(--fs-12);
  letter-spacing: var(--track-readout);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.reveal-scrub input { width: 240px; margin: 0; accent-color: var(--red); }
.reveal-scrub output { min-width: 9ch; }

/* ---- reduced motion: no dissolve (reveal.js swaps state at once); the frame
        itself fades over the one 150ms the contract allows, both ways ---- */
@media (prefers-reduced-motion: reduce) {
  .showcase { transition: opacity var(--dur-micro) var(--ease); }
  @starting-style {
    .showcase:not([hidden]) { opacity: 0; }
  }
  .showcase[data-state="closing"] { transition: opacity var(--dur-micro) var(--ease); }
}