/* ================================================
   PAGE TRANSITIONS - Smooth page loading effect
   ================================================ */

/* Smooth fade-in for main content */
main {
    animation: fadeInPage 0.4s ease-in;
}

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

/* Add transition class for links */
.page-transitioning {
    animation: fadeOutPage 0.25s ease-out forwards;
}

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

/* Improve loader appearance */
#loading {
    transition: opacity 0.3s ease-in-out;
}