/*
 * Entry animations.
 * Loaded only when at least one target is enabled.
 * Elements remain visible by default; JS adds the pending state only after
 * successful initialization, so script failure never hides content.
 */

@media (prefers-reduced-motion: no-preference) {
    .entry-animation-pending{
        opacity:0;
        will-change:transform,opacity;
    }

    .entry-animation-pending.entry-animation-effect-slide.entry-animation-direction-up{
        transform:translate3d(0,34px,0);
    }
    .entry-animation-pending.entry-animation-effect-slide.entry-animation-direction-down{
        transform:translate3d(0,-34px,0);
    }
    .entry-animation-pending.entry-animation-effect-slide.entry-animation-direction-left{
        transform:translate3d(34px,0,0);
    }
    .entry-animation-pending.entry-animation-effect-slide.entry-animation-direction-right{
        transform:translate3d(-34px,0,0);
    }

    .entry-animation-pending.entry-animation-effect-zoom{
        transform:scale(0);
        transform-origin:center center;
    }

    .entry-animation-pending.entry-animation-effect-pop{
        transform:scale(0);
        transform-origin:center center;
    }

    .entry-animation-running.entry-animation-effect-fade{
        animation:entry-animation-fade var(--entry-animation-duration,400ms)
            ease-out var(--entry-animation-delay,0ms) both;
    }

    .entry-animation-running.entry-animation-effect-slide{
        animation:entry-animation-slide var(--entry-animation-duration,400ms)
            cubic-bezier(.2,.72,.18,1) var(--entry-animation-delay,0ms) both;
    }

    .entry-animation-running.entry-animation-effect-zoom{
        animation:entry-animation-zoom var(--entry-animation-duration,400ms)
            cubic-bezier(.18,.74,.18,1) var(--entry-animation-delay,0ms) both;
    }

    .entry-animation-running.entry-animation-effect-pop{
        animation:entry-animation-pop var(--entry-animation-duration,400ms)
            cubic-bezier(.18,.76,.16,1) var(--entry-animation-delay,0ms) both;
    }

    @keyframes entry-animation-fade{
        from{opacity:0}
        to{opacity:1}
    }

    @keyframes entry-animation-slide{
        to{opacity:1;transform:translate3d(0,0,0)}
    }

    @keyframes entry-animation-zoom{
        0%{opacity:0;transform:scale(0)}
        72%{opacity:1;transform:scale(1.035)}
        100%{opacity:1;transform:scale(1)}
    }

    @keyframes entry-animation-pop{
        0%{opacity:0;transform:scale(0)}
        58%{opacity:1;transform:scale(2)}
        82%{opacity:1;transform:scale(.94)}
        100%{opacity:1;transform:scale(1)}
    }

    .entry-animation-complete{
        opacity:1!important;
        transform:none!important;
        will-change:auto!important;
    }
}


/* =========================================================
   Pop entry animation: keep the element center fixed
   Use the independent `scale` property instead of `transform: scale()`.
   This preserves any pre-existing translate/rotate transform used by the
   page layout, preventing the element from jumping upward on some sizes.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

    .entry-animation-pending.entry-animation-effect-pop{
        transform-origin:center center !important;
        transform-box:border-box;
        transform:none !important;
        scale:0;
        opacity:0;
    }

    .entry-animation-running.entry-animation-effect-pop{
        transform-origin:center center !important;
        transform-box:border-box;
        animation:entry-animation-pop-center
            var(--entry-animation-duration,400ms)
            cubic-bezier(.18,.76,.16,1)
            var(--entry-animation-delay,0ms)
            both !important;
    }

    @keyframes entry-animation-pop-center{
        0%{
            opacity:0;
            scale:0;
        }
        58%{
            opacity:1;
            scale:2;
        }
        82%{
            opacity:1;
            scale:.94;
        }
        100%{
            opacity:1;
            scale:1;
        }
    }

    .entry-animation-complete.entry-animation-effect-pop{
        transform:none !important;
        scale:1 !important;
        opacity:1 !important;
    }
}