/* Home — phone entrance reveal. Markup: [data-hmr] (rise) / [data-hmr="pop"] (coins, stages).
 * Hidden state only exists while <html> has .hmr (set inline in index.php, phones + motion allowed).
 * Uses the individual translate/scale properties so existing transform/float animations are untouched.
 * Slow, long-tail easing on purpose — the reveal should be watched, not just noticed.
 * Below the hero, home-mobile-reveal.js plays each block as it scrolls in (its DURATION must cover the longest
 * transition + delay here). The hero (.hcm, the first screen) plays from CSS instead, as soon as it is painted
 * or the intro releases the page, so the headline (the phone's largest paint) never waits for the deferred
 * scripts. Same motion; the stagger comes from --hmr-i in hero-m.php (170 ms steps, like the script). */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    html.hmr [data-hmr]:not(.hmr-in):not(.hcm [data-hmr]) {
        opacity: 0 !important;
        translate: 0 44px;
        filter: blur(10px);
    }
    html.hmr [data-hmr="pop"]:not(.hmr-in):not(.hcm [data-hmr]) {
        translate: 0 18px;
        filter: blur(6px);
        scale: .82;
    }
    html.hmr [data-hmr].hmr-run {
        transition:
            opacity 1.3s cubic-bezier(.33, 0, .2, 1) var(--hmr-d, 0ms),
            translate 1.7s cubic-bezier(.16, 1, .3, 1) var(--hmr-d, 0ms),
            scale 1.9s cubic-bezier(.16, 1, .3, 1) var(--hmr-d, 0ms),
            filter 1.4s cubic-bezier(.33, 0, .2, 1) var(--hmr-d, 0ms) !important;
    }

    /* Hero: hidden under the intro, then played (fill "backwards" keeps each block hidden through its delay). */
    html.hmr body.site-intro-pending .hcm [data-hmr] { opacity: 0; }
    html.hmr body:not(.site-intro-pending) .hcm [data-hmr] {
        --hmr-d: calc(var(--hmr-i, 0) * 170ms);
        animation:
            hmrFade 1.3s cubic-bezier(.33, 0, .2, 1) var(--hmr-d) backwards,
            hmrRise 1.7s cubic-bezier(.16, 1, .3, 1) var(--hmr-d) backwards,
            hmrUnblur 1.4s cubic-bezier(.33, 0, .2, 1) var(--hmr-d) backwards;
    }
    html.hmr body:not(.site-intro-pending) .hcm [data-hmr="pop"] {
        animation:
            hmrFade 1.3s cubic-bezier(.33, 0, .2, 1) var(--hmr-d) backwards,
            hmrPopRise 1.7s cubic-bezier(.16, 1, .3, 1) var(--hmr-d) backwards,
            hmrPopScale 1.9s cubic-bezier(.16, 1, .3, 1) var(--hmr-d) backwards,
            hmrPopUnblur 1.4s cubic-bezier(.33, 0, .2, 1) var(--hmr-d) backwards;
    }
    @keyframes hmrFade { from { opacity: 0; } }
    @keyframes hmrRise { from { translate: 0 44px; } }
    @keyframes hmrUnblur { from { filter: blur(10px); } }
    @keyframes hmrPopRise { from { translate: 0 18px; } }
    @keyframes hmrPopScale { from { scale: .82; } }
    @keyframes hmrPopUnblur { from { filter: blur(6px); } }
}