/* Page transition effects - exclude header and footer */
main, #pagecontainer, .container:not(#mainNav .container):not(.footer .container) {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

body.loaded main,
body.loaded #pagecontainer,
body.loaded .container:not(#mainNav .container):not(.footer .container) {
    opacity: 1;
}

/* Smooth fade out on page leave - only for main content */
body.page-transition main,
body.page-transition #pagecontainer,
body.page-transition .container:not(#mainNav .container):not(.footer .container) {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

/* Header and footer stay visible */
#mainNav, .footer {
    opacity: 1 !important;
}

/* Animate main content sections */
.page-section, .post-content-wrapper {
    opacity: 0;
    animation: fadeIn 0.2s ease-in-out forwards;
    animation-delay: 0.05s;
}

body.loaded .page-section,
body.loaded .post-content-wrapper {
    animation-delay: 0.05s;
}

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