/* ==========================================================
   MOBILE FLOW SAFETY — v10
   Prevent sticky/mobile scenes from visually colliding when the viewport is
   short. Desktop keeps the intentional tight handoffs/overlaps unchanged.
   ========================================================== */
@media (max-width: 760px) {
    /* Any negative scene handoff is too fragile on a phone: mobile animations
       may still start early, but every section keeps its full physical space. */
    html.mobile-motion .scroll-scene {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: max(
            calc(100svh - var(--header-height)),
            var(--mobile-content-min-height, 0px)
        ) !important;
    }

    /* v8 intentionally pulled Recycling upward. That was the most obvious
       source of a section-on-section overlay on shorter viewports. */
    html.mobile-motion .return-recycle-scene {
        margin-top: 0 !important;
    }

    /* Desktop uses transparent stages for a few handoffs. On mobile there is
       no overlap anymore, so give them an opaque canvas to prevent the outgoing
       scene from showing through while a sticky stage is pinned. */
    html.mobile-motion .lca-dashboard-scene .sticky-stage,
    html.mobile-motion .return-nudging-scene .sticky-stage,
    html.mobile-motion .return-recycle-scene .sticky-stage {
        background: var(--background) !important;
    }

    /* A local stacking context stops high-z artwork from a previous scene from
       escaping and painting across the next section. */
    html.mobile-motion .scroll-scene {
        isolation: isolate;
    }

    html.mobile-motion .scroll-scene .sticky-stage {
        box-sizing: border-box;
    }

    /* Normal-flow mobile sections should never be clipped by a leftover sticky
       height from a desktop rule. The JS measurement below supplies the actual
       content minimum through --mobile-content-min-height. */
    html.mobile-motion .return-strategies-scene,
    html.mobile-motion .return-nudging-scene,
    html.mobile-motion .policy-recommendations-scene,
    html.mobile-motion .training-library-scene,
    html.mobile-motion .looking-initiatives-scene {
        overflow: visible !important;
    }
}