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

@keyframes fadeInDelayed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-fade-in-delayed {
    animation: fadeInDelayed 1.2s ease-out forwards;
}

body {
    transition: background 0.3s ease;
    background-color: #F8F9FC;
}

body.dark {
    background-color: #1A1C3D;
}