@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-reverse-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes spin-medium {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

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

.animate-spin-reverse-slow {
    animation: spin-reverse-slow 6s linear infinite;
}

.animate-spin-medium {
    animation: spin-medium 4s linear infinite;
}

.animate-fade-in {
    animation: fade-in 1s ease-out forwards;
}