:root {
    --ext-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ext-duration: 0.7s;
}

@keyframes ext-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ext-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ext-fade-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ext-fade-left {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ext-fade-right {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ext-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ext-animate {
    opacity: 0;
}

.ext-animate[data-ext-animated] {
    opacity: 1 !important;
    animation: none !important;
}

.ext-animate.ext-animated-fade {
    animation: ext-fade-in var(--ext-duration) var(--ext-ease) forwards;
}

.ext-animate.ext-animated-fade-up {
    animation: ext-fade-up var(--ext-duration) var(--ext-ease) forwards;
}

.ext-animate.ext-animated-fade-down {
    animation: ext-fade-down var(--ext-duration) var(--ext-ease) forwards;
}

.ext-animate.ext-animated-fade-left {
    animation: ext-fade-left var(--ext-duration) var(--ext-ease) forwards;
}

.ext-animate.ext-animated-fade-right {
    animation: ext-fade-right var(--ext-duration) var(--ext-ease) forwards;
}

.ext-animate.ext-animated-zoom-in {
    animation: ext-zoom-in var(--ext-duration) var(--ext-ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .ext-animate {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}