@keyframes slideInUp {
    from {
        transform: scale(1.85) rotate(-40deg) translateY(100%);
        opacity: 1;
    }
    
    to {
        transform: scale(1.85) rotate(0deg)translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(64px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(calc(64px * -1));
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(64px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(calc(64px * -1));
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.4);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shake {
    0% {
        transform: translateX(0);
        background-color: var(--red-200);
    }
    20% {
        transform: translateX(calc(8px * -1));
        background-color: var(--red-200);
    }
    40% {
        transform: translateX(8px);
        background-color: var(--slate-50);
    }
    60% {
        transform: translateX(calc(4px * -1));
        background-color: var(--red-200);
    }
    80% {
        transform: translateX(4px);
        background-color: var(--red-200);
    }
    100% {
        transform: translateX(0);
        background-color: var(--slate-50);
    }
}

.animate-fadeIn {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.animate-fadeInUp {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

.animate-fadeInDown {
    opacity: 0;
    animation: fadeInDown 0.5s ease forwards;
}

.animate-fadeInRight {
    opacity: 0;
    animation: fadeInRight 0.5s ease forwards;
}

.animate-fadeInLeft {
    opacity: 0;
    animation: fadeInLeft 0.5s ease forwards;
}

.animate-zoomIn {
    opacity: 0;
    animation: zoomIn 0.5s ease forwards;
}

.animate-zoomOut {
    opacity: 0;
    animation: zoomOut 0.5s ease forwards;
}

.delay-0 { animation-delay: 0.0s !important; }
.delay-1 { animation-delay: 0.2s !important; }
.delay-2 { animation-delay: 0.4s !important; }
.delay-3 { animation-delay: 0.6s !important; }
.delay-4 { animation-delay: 0.8s !important; }
.delay-5 { animation-delay: 1.0s !important; }
.delay-6 { animation-delay: 1.2s !important; }
.delay-7 { animation-delay: 1.4s !important; }
.delay-8 { animation-delay: 1.6s !important; }
.delay-9 { animation-delay: 1.8s !important; }
.delay-10 { animation-delay: 2.0s !important; }

.duration-instant        { animation-duration: 0.00s !important; }
.duration-extremely-fast { animation-duration: 0.05s !important; }
.duration-very-fast      { animation-duration: 0.10s !important; }
.duration-fast           { animation-duration: 0.18s !important; }
.duration-medium-fast    { animation-duration: 0.26s !important; }
.duration-medium         { animation-duration: 0.35s !important; }
.duration-medium-slow    { animation-duration: 0.50s !important; }
.duration-slow           { animation-duration: 0.75s !important; }
.duration-very-slow      { animation-duration: 1.10s !important; }
.duration-extremely-slow { animation-duration: 1.50s !important; }
.duration-super-slow     { animation-duration: 2.00s !important; }

.duration-0 { animation-duration: 0.00s !important; }
.duration-1 { animation-duration: 0.05s !important; }
.duration-2 { animation-duration: 0.10s !important; }
.duration-3 { animation-duration: 0.18s !important; }
.duration-4 { animation-duration: 0.26s !important; }
.duration-5 { animation-duration: 0.35s !important; }
.duration-6 { animation-duration: 0.50s !important; }
.duration-7 { animation-duration: 0.75s !important; }
.duration-8 { animation-duration: 1.10s !important; }
.duration-9 { animation-duration: 1.50s !important; }
.duration-10 { animation-duration: 2.00s !important; }

.easing-linear           { animation-timing-function: linear !important; }
.easing-ease             { animation-timing-function: ease !important; }
.easing-ease-in          { animation-timing-function: ease-in !important; }
.easing-ease-out         { animation-timing-function: ease-out !important; }
.easing-ease-in-out      { animation-timing-function: ease-in-out !important; }

.easing-accelerate       { animation-timing-function: cubic-bezier(0.7, 0, 1, 0.5) !important; }
.easing-decelerate       { animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1) !important; }
.easing-snappy           { animation-timing-function: cubic-bezier(0.75, -0.5, 0.25, 1.5) !important; }
.easing-bouncy           { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.easing-super-bouncy     { animation-timing-function: cubic-bezier(0.5, 1.8, 0.8, -0.3) !important; }
.easing-smooth           { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }

.easing-overshoot        { animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045) !important; }
.easing-back-in          { animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045) !important; }
.easing-back-out         { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.easing-back-in-out      { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }