/* ==========================================================
   MBOKA POCKET — PERFORMANCE LAYER V1
   ========================================================== */


/*
 * Sections outside viewport do not need to be fully painted.
 */
html.mp-public-mode
#mpMarketingLanding
.mp-section {

    content-visibility:
        auto;

    contain-intrinsic-size:
        auto 760px;
}


/*
 * Images should not trigger unnecessary layout work.
 */
html.mp-public-mode
#mpMarketingLanding img {

    contain:
        paint;

    backface-visibility:
        hidden;
}


/*
 * Avoid expensive speculative rendering.
 */
html.mp-public-mode
#mpMarketingLanding
:is(
    .mp-pillar,
    .mp-flow-step,
    .mp-story,
    .mp-beta,
    .mp-cta
) {

    will-change:
        auto;
}


/*
 * On smaller machines/screens, reduce GPU-heavy blur.
 */
@media (max-width: 900px) {

    html.mp-public-mode
    .mp-header {

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }


    html.mp-public-mode
    #mbokaAuthV2 {

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }

}


/*
 * Keep animations visually pleasant but inexpensive.
 */
@media (prefers-reduced-motion: reduce) {

    #mpMarketingLanding *,
    #mbokaAuthV2 * {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}