@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInFromBottom 0.8s ease-out forwards;
}

.animate-fade-in-up-delay-100 {
    animation: fadeInFromBottom 0.8s ease-out 0.1s forwards;
    opacity: 0;
}

.animate-fade-in-up-delay-200 {
    animation: fadeInFromBottom 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.animate-fade-in-up-delay-300 {
    animation: fadeInFromBottom 0.8s ease-out 0.3s forwards;
    opacity: 0;
}

.animate-fade-in-down {
    animation: fadeInFromTop 0.8s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInFromLeft 0.8s ease-out forwards;
    opacity: 0;
}

.animate-spin-slow {
    animation: spinSlow 5s linear infinite;
}

.animate-pop-in {
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.animate-fade-in-up-delay-100, .animate-fade-in-up-delay-200, .animate-fade-in-up-delay-300, .animate-fade-in-left {
    opacity: 0;
}