:root {
    --anim-fast: 140ms;
    --anim-normal: 260ms;
    --anim-slow: 420ms;
    --ease-out: cubic-bezier(.22, .9, .24, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --spring: cubic-bezier(.18, .89, .32, 1.28);
    --decel: cubic-bezier(.2, .8, .2, 1);
    --enter-translate: 16px;
    --enter-scale: .96;
    --overshoot-scale: 1.03;
}

.anim-fade-in {
    animation: fade-in var(--anim-normal) var(--ease-out) both;
}

.anim-fade-in-strong {
    animation: fade-in-strong var(--anim-slow) var(--decel) both;
}

.anim-slide-up-in {
    animation: slide-up-in var(--anim-normal) var(--ease-out) both;
}

.anim-slide-up-in-strong {
    animation: slide-up-in-strong var(--anim-slow) var(--spring) both;
}

.anim-slide-right-in {
    animation: slide-right-in var(--anim-normal) var(--ease-out) both;
}

.anim-slide-left-in {
    animation: slide-left-in var(--anim-normal) var(--ease-out) both;
}

.anim-scale-in {
    animation: scale-in var(--anim-normal) var(--ease-out) both;
}

.anim-scale-in-overshoot {
    animation: scale-in-overshoot var(--anim-slow) var(--spring) both;
}

.anim-pop {
    animation: pop var(--anim-normal) var(--ease-out) both;
}

.anim-pop-strong {
    animation: pop-strong var(--anim-slow) var(--spring) both;
}

.anim-fade-out {
    animation: fade-out var(--anim-normal) var(--ease-in-out) both;
}

.anim-scale-out {
    animation: scale-out var(--anim-normal) var(--ease-in-out) both;
}

.delay-100 {
    animation-delay: 100ms !important;
}

.delay-150 {
    animation-delay: 150ms !important;
}

.delay-200 {
    animation-delay: 200ms !important;
}

.delay-250 {
    animation-delay: 250ms !important;
}

.delay-300 {
    animation-delay: 300ms !important;
}

.transition-base {
    transition: all var(--anim-normal) var(--ease-in-out);
}

@keyframes fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade-in-strong {
    0% {
        opacity: 0;
        transform: scale(var(--enter-scale));
        filter: saturate(.9);
    }

    60% {
        opacity: 1;
        transform: scale(var(--overshoot-scale));
    }

    100% {
        transform: none;
        filter: none;
    }
}

@keyframes slide-up-in {
    from {
        transform: translateY(10px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes slide-up-in-strong {
    0% {
        transform: translateY(var(--enter-translate));
        opacity: 0
    }

    60% {
        transform: translateY(-4px);
        opacity: 1
    }

    100% {
        transform: none
    }
}

@keyframes slide-right-in {
    from {
        transform: translateX(-12px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes slide-left-in {
    from {
        transform: translateX(12px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes scale-in {
    from {
        transform: scale(.985);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes scale-in-overshoot {
    0% {
        transform: scale(var(--enter-scale));
        opacity: 0
    }

    60% {
        transform: scale(var(--overshoot-scale));
        opacity: 1
    }

    100% {
        transform: none
    }
}

@keyframes pop {
    0% {
        transform: scale(.98);
        opacity: 0
    }

    100% {
        transform: none;
        opacity: 1
    }
}

@keyframes pop-strong {
    0% {
        transform: scale(.94);
        opacity: 0
    }

    60% {
        transform: scale(1.02);
        opacity: 1
    }

    100% {
        transform: none
    }
}

@keyframes fade-out {
    to {
        opacity: 0
    }
}

@keyframes scale-out {
    to {
        transform: scale(.96);
        opacity: 0;
        filter: blur(1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}