:root { --animation-panel-id: 'slide-right'; }

/* panels slide-right */
@keyframes anim-slide-right {
    0% {
        opacity: 0;
        transform: translate(-48px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

/* Animation properties create a new stacking context; this z-index keeps
   descendants from falling behind siblings with z-index: 0. Kept on the
   original broad selector so that panels which do not animate keep the
   containing block they render with today. */
section:not(.cnt) [class*="mn_"]:not(.pop) {
    position: relative;
    z-index: 1;
}

/* scripts/site/panel-animation.js adds .anm_pnl only to panels that start
   below the fold, so nothing above it ever moves. The anm_ prefix opts this
   into the will-change hint and the no-scroll-timeline fallback that
   common/global.css already defines for animated elements.

   animation-range, not animation-duration, is the timing knob here: under a
   scroll-driven timeline the duration is ignored and progress comes from the
   element's position in the entry phase. The easing token is shared with the
   button hovers in site/basic-hovers.css. */
.anm_pnl {
    animation: anim-slide-right var(--g-trn-sp) var(--g-trn-tf) both;
    animation-timeline: view();
    animation-range: entry 25% entry 60%;

    position: relative;
    z-index: 1;
}

/* Belt to panel-animation.js's braces: the script skips marking when reduce is
   set, this covers the setting changing after load. Scoped to anm_ rather than
   blanket so loaders and spinners keep working. */
@media (prefers-reduced-motion: reduce) {
    [class*='anm_'] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}