/**
 * Animations
 * System-wide animation definitions
 */

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

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

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

.fade-in {
    animation: fadeIn 300ms ease-in-out;
}

.fade-out {
    animation: fadeOut 300ms ease-in-out;
}

.slide-in {
    animation: slideIn 300ms ease-out;
}