:root {
    --animation-panel-id: blur-in;
}

/* mainstages blur-in */
@keyframes anim-blur-in {
    0% {
        opacity: 0;
        filter: blur(12px)
    }

    to {
        opacity: 1;
        filter: blur(0)
    }
}

section [class*="mn_"] {
    animation: anim-blur-in 0.5s ease-out both;
    animation-timeline: view();
    animation-range: entry 25% entry 60%;

    /* The transform in anim-blur-in creates a stacking context, which
       traps descendant z-indexes (e.g. .bg-bx callouts) inside this
       element. Without a positive z-index here, the new stacking context
       paints as z-index: auto and falls behind sibling decorations like
       .btm-deco (z-index: 0). */
    position: relative;
    z-index: 1;
}