/* css/transitions.css (Corrected) */
/* This file handles the smooth fade-in/fade-out page transitions */

/* Apply the animation to the main content area, not the body */
main {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* A subtle slide-up effect */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* When a link is clicked, this class will be added to the main tag */
main.fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px); /* A subtle slide-down effect */
    }
}