@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 36%, transparent);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 7px transparent;
        opacity: .72;
    }
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-fade-in {
    animation: fadeIn 220ms ease-out both;
}

.animate-slide-up {
    animation: slideUp 260ms ease-out both;
}

.animate-spin {
    animation: spin 800ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-up,
    .animate-spin {
        animation: none;
    }
}