.ecos-anim {
    --ecos-anim-duration: 700ms;
    --ecos-anim-delay: 0ms;
    --ecos-anim-visible-duration: 1000ms;
    --ecos-anim-hidden-duration: 300ms;
    --ecos-anim-ease: ease-in-out;
    --ecos-anim-opacity: 0;
    --ecos-anim-distance: 64px;
    --ecos-anim-scale: 0.85;
    --ecos-anim-rotate: 25deg;
    --ecos-anim-initial-transform: none;
    --ecos-anim-final-transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg);
    --ecos-anim-overshoot-transform: translate3d(0, -8px, 0) scale(1.02);
}

html.ecos-animations-js .ecos-anim {
    opacity: var(--ecos-anim-opacity);
    transform: var(--ecos-anim-initial-transform);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
        opacity var(--ecos-anim-duration) var(--ecos-anim-ease) var(--ecos-anim-delay),
        transform var(--ecos-anim-duration) var(--ecos-anim-ease) var(--ecos-anim-delay);
    will-change: opacity, transform;
}

html.ecos-animations-js .ecos-anim.ecos-anim-active {
    opacity: 1;
    transform: var(--ecos-anim-final-transform);
}

html.ecos-animations-js .ecos-anim.ecos-anim-replay-reset {
    opacity: var(--ecos-anim-opacity) !important;
    transform: var(--ecos-anim-initial-transform) !important;
    transition: none !important;
    animation: none !important;
}

.ecos-anim-fade {
    --ecos-anim-initial-transform: none;
    --ecos-anim-final-transform: none;
}

.ecos-anim-slide.ecos-anim-direction-center,
.ecos-anim-bounce.ecos-anim-direction-center {
    --ecos-anim-initial-transform: translate3d(0, var(--ecos-anim-distance), 0);
    --ecos-anim-overshoot-transform: translate3d(0, -8px, 0);
}

.ecos-anim-slide.ecos-anim-direction-top,
.ecos-anim-bounce.ecos-anim-direction-top {
    --ecos-anim-initial-transform: translate3d(0, calc(var(--ecos-anim-distance) * -1), 0);
    --ecos-anim-overshoot-transform: translate3d(0, 8px, 0);
}

.ecos-anim-slide.ecos-anim-direction-right {
    --ecos-anim-initial-transform: translate3d(calc(100% + var(--ecos-anim-distance)), 0, 0);
    --ecos-anim-overshoot-transform: translate3d(-8px, 0, 0);
}

.ecos-anim-bounce.ecos-anim-direction-right {
    --ecos-anim-initial-transform: translate3d(var(--ecos-anim-distance), 0, 0);
    --ecos-anim-overshoot-transform: translate3d(-8px, 0, 0);
}

.ecos-anim-slide.ecos-anim-direction-bottom,
.ecos-anim-bounce.ecos-anim-direction-bottom {
    --ecos-anim-initial-transform: translate3d(0, var(--ecos-anim-distance), 0);
    --ecos-anim-overshoot-transform: translate3d(0, -8px, 0);
}

.ecos-anim-slide.ecos-anim-direction-left {
    --ecos-anim-initial-transform: translate3d(calc(-100% - var(--ecos-anim-distance)), 0, 0);
    --ecos-anim-overshoot-transform: translate3d(8px, 0, 0);
}

.ecos-anim-bounce.ecos-anim-direction-left {
    --ecos-anim-initial-transform: translate3d(calc(var(--ecos-anim-distance) * -1), 0, 0);
    --ecos-anim-overshoot-transform: translate3d(8px, 0, 0);
}

.ecos-anim-zoom.ecos-anim-direction-center {
    --ecos-anim-initial-transform: scale(var(--ecos-anim-scale));
}

.ecos-anim-zoom.ecos-anim-direction-top {
    --ecos-anim-initial-transform: translate3d(0, calc(var(--ecos-anim-distance) * -1), 0) scale(var(--ecos-anim-scale));
}

.ecos-anim-zoom.ecos-anim-direction-right {
    --ecos-anim-initial-transform: translate3d(var(--ecos-anim-distance), 0, 0) scale(var(--ecos-anim-scale));
}

.ecos-anim-zoom.ecos-anim-direction-bottom {
    --ecos-anim-initial-transform: translate3d(0, var(--ecos-anim-distance), 0) scale(var(--ecos-anim-scale));
}

.ecos-anim-zoom.ecos-anim-direction-left {
    --ecos-anim-initial-transform: translate3d(calc(var(--ecos-anim-distance) * -1), 0, 0) scale(var(--ecos-anim-scale));
}

.ecos-anim-flip,
.ecos-anim-fold {
    perspective: 900px;
}

.ecos-anim-flip.ecos-anim-direction-center,
.ecos-anim-flip.ecos-anim-direction-top,
.ecos-anim-fold.ecos-anim-direction-center,
.ecos-anim-fold.ecos-anim-direction-top {
    --ecos-anim-initial-transform: rotateX(var(--ecos-anim-rotate));
}

.ecos-anim-flip.ecos-anim-direction-bottom,
.ecos-anim-fold.ecos-anim-direction-bottom {
    --ecos-anim-initial-transform: rotateX(calc(var(--ecos-anim-rotate) * -1));
}

.ecos-anim-flip.ecos-anim-direction-left,
.ecos-anim-fold.ecos-anim-direction-left {
    --ecos-anim-initial-transform: rotateY(calc(var(--ecos-anim-rotate) * -1));
}

.ecos-anim-flip.ecos-anim-direction-right,
.ecos-anim-fold.ecos-anim-direction-right {
    --ecos-anim-initial-transform: rotateY(var(--ecos-anim-rotate));
}

.ecos-anim-fold.ecos-anim-direction-top {
    transform-origin: top center;
}

.ecos-anim-fold.ecos-anim-direction-right {
    transform-origin: right center;
}

.ecos-anim-fold.ecos-anim-direction-bottom {
    transform-origin: bottom center;
}

.ecos-anim-fold.ecos-anim-direction-left {
    transform-origin: left center;
}

.ecos-anim-roll.ecos-anim-direction-center,
.ecos-anim-roll.ecos-anim-direction-bottom {
    --ecos-anim-initial-transform: translate3d(0, var(--ecos-anim-distance), 0) rotate(var(--ecos-anim-rotate));
}

.ecos-anim-roll.ecos-anim-direction-top {
    --ecos-anim-initial-transform: translate3d(0, calc(var(--ecos-anim-distance) * -1), 0) rotate(calc(var(--ecos-anim-rotate) * -1));
}

.ecos-anim-roll.ecos-anim-direction-right {
    --ecos-anim-initial-transform: translate3d(var(--ecos-anim-distance), 0, 0) rotate(var(--ecos-anim-rotate));
}

.ecos-anim-roll.ecos-anim-direction-left {
    --ecos-anim-initial-transform: translate3d(calc(var(--ecos-anim-distance) * -1), 0, 0) rotate(calc(var(--ecos-anim-rotate) * -1));
}

.ecos-anim-bounce.ecos-anim-active[data-ecos-anim-repeat="once"] {
    animation-name: ecosAnimBounce;
    animation-duration: var(--ecos-anim-duration);
    animation-delay: var(--ecos-anim-delay);
    animation-timing-function: var(--ecos-anim-ease);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    transition: none;
}

.ecos-anim.ecos-anim-active[data-ecos-anim-repeat="loop-visible"],
.ecos-anim.ecos-anim-active[data-ecos-anim-repeat="loop-always"] {
    animation-name: ecosAnimEntrance;
    animation-duration: var(--ecos-anim-duration);
    animation-delay: var(--ecos-anim-delay);
    animation-timing-function: var(--ecos-anim-ease);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: none;
}

.ecos-anim-bounce.ecos-anim-active[data-ecos-anim-repeat="loop-visible"],
.ecos-anim-bounce.ecos-anim-active[data-ecos-anim-repeat="loop-always"] {
    animation-name: ecosAnimBounce;
}

/* Loop timelines with a visible/hidden hold are driven by the runtime so
 * each configured phase keeps its real duration. The CSS animation above is
 * still a graceful fallback for browsers without Web Animations API. */
html.ecos-animations-js .ecos-anim.ecos-anim-loop-managed {
    animation: none !important;
    transition: none !important;
}

@keyframes ecosAnimEntrance {
    0% {
        opacity: var(--ecos-anim-opacity);
        transform: var(--ecos-anim-initial-transform);
    }

    100% {
        opacity: 1;
        transform: var(--ecos-anim-final-transform);
    }
}

@keyframes ecosAnimBounce {
    0% {
        opacity: var(--ecos-anim-opacity);
        transform: var(--ecos-anim-initial-transform);
    }

    62% {
        opacity: 1;
        transform: var(--ecos-anim-overshoot-transform);
    }

    82% {
        transform: translate3d(0, 4px, 0) scale(0.995);
    }

    100% {
        opacity: 1;
        transform: var(--ecos-anim-final-transform);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ecos-anim,
    .ecos-anim.ecos-anim-active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}