/* Intro animation tunables — issue #47.
 *
 * 1:1 mirror of game-over brick-up. The brick visual primitives
 * (.visual-fill, fill-pop) live in each game's per-mode style.css
 * and are NOT modified — this stylesheet only adds the new intro
 * classes (.intro-bricked, .intro-unbrick) used by
 * www/intro-animation.js.
 *
 * Polish knobs are exposed as CSS variables so Ripon / Sahil can
 * tweak rotation / easing / hold without a JS rebuild.
 *
 * prefers-reduced-motion: hard-skip the animation. JS in
 * intro-animation.js also gates on the same media query before
 * touching the DOM, so this CSS rule is the belt to that suspenders.
 */

:root {
    /* Per-cell fill duration. MUST equal the .visual-fill 0.15s
       value in each game's style.css — game-over and intro share
       this number by convention. JS-side mirror lives in
       window.__bloxIntro.BRICK_FILL_DURATION_MS. */
    --intro-fill-duration: 0.15s;

    /* Pop-in easing (for the bricked cells appearing — only used
       if you want the bricked state to ease in; default is
       instant paint to mirror the game-over end-state exactly). */
    --intro-pop-in-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Pop-out easing — reverse of the game-over fill-pop overshoot.
       fill-pop uses cubic-bezier(0.175, 0.885, 0.32, 1.275); the
       inverse is cubic-bezier(1-x2, 1-y2, 1-x1, 1-y1) =
       cubic-bezier(0.68, -0.275, 0.825, 0.115) — anticipation
       before pop-out, mirroring the overshoot-after-pop-in. */
    --intro-pop-out-easing: cubic-bezier(0.68, -0.275, 0.825, 0.115);
}

/* Bricked end-state — visually identical to .visual-fill's final
   frame (after fill-pop completes). No animation, applied
   instantly on intro start. Mirrors the styling of .visual-fill
   in classic/style.css and adventure level style.css. */
.cell.intro-bricked {
    background: var(--block-color);
    border-radius: var(--rad-block, 6px);
    box-shadow:
        inset 3px 3px 0px 0px rgba(255, 255, 255, 0.4),
        inset -3px -3px 0px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    transform: scale(1);
    opacity: 1;
}

/* Unbrick animation — exact reverse of fill-pop. Same duration
   (0.15s), reverse easing, scale 1 → 0 + opacity 1 → 0 instead
   of the brick-up's scale 0 → 1 + opacity 0 → 1. */
.cell.intro-unbrick {
    background: var(--block-color);
    border-radius: var(--rad-block, 6px);
    box-shadow:
        inset 3px 3px 0px 0px rgba(255, 255, 255, 0.4),
        inset -3px -3px 0px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    animation: intro-fill-pop-out var(--intro-fill-duration) var(--intro-pop-out-easing) forwards;
}

@keyframes intro-fill-pop-out {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* Reduced-motion: hard-skip. Suppress both the bricked-state paint
   (no flash of bricks before the player can register them) and the
   unbrick animation (jump straight to empty cell visuals). The JS
   side ALSO short-circuits before touching the DOM when this media
   query matches — this CSS is the second layer of defense. */
@media (prefers-reduced-motion: reduce) {
    .cell.intro-bricked,
    .cell.intro-unbrick {
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}