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

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

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes glow {
    0% { box-shadow: 0 0 5px var(--primary-accent); }
    50% { box-shadow: 0 0 20px var(--primary-accent); }
    100% { box-shadow: 0 0 5px var(--primary-accent); }
}

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

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

.animate-fade-in { animation: fadeIn var(--transition-normal); }
.animate-slide-up { animation: slideUp var(--transition-normal); }
.animate-pulse { animation: pulse 2s infinite ease-in-out; }
.animate-glow { animation: glow 2s infinite ease-in-out; }

.page-enter {
    animation: fadeIn 0.3s ease-out;
}

.stagger-1 { animation-delay: 0.05s; animation-fill-mode: both; }
.stagger-2 { animation-delay: 0.1s; animation-fill-mode: both; }
.stagger-3 { animation-delay: 0.15s; animation-fill-mode: both; }
.stagger-4 { animation-delay: 0.2s; animation-fill-mode: both; }
.stagger-5 { animation-delay: 0.25s; animation-fill-mode: both; }