/* Page Transition Overlay (Entry) */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: -100%; /* Start fully to the left */
    width: 200%;
    height: 100%;
    background: linear-gradient(-58deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
        box-shadow: 1000px 0px 450px 204px #fff; /* Strong white shadow effect */
    z-index: 9999;
    pointer-events: none; /* Prevent blocking user interaction */
    transform: translateX(-5%); /* Initial position */
    transition: transform 0.65s ease-in-out, left 0.65s ease-in-out; /* Smooth transition */
}

/* Fade-In Effect (On Load) */
body.loaded .page-transition-overlay {
    transform: translateX(130%); /* Slide out to the right */
}

/* Page Transition Overlay (Exit) */
.page-transition-overlay-exit {
    position: fixed;
    top: 0;
    left: -150%; /* Start at the center of the page */
    width: 200%; /* Ensure it covers the full width with rotation */
    height: 100%; /* Full height */
    background: #fff; /* Solid white background */
    box-shadow: -255px 0px 650px 604px #fff; /* Strong white shadow effect */
    z-index: 9999;
    pointer-events: none; /* Prevent blocking user interaction */
    transform: translateX(-50%) rotate(131deg); /* Start at the center with rotation */
    transition: transform 0.65s ease-in-out, left 0.65s ease-in-out; /* Smooth transitions */
    visibility: hidden; /* Hide by default */
    opacity: 0; /* Invisible by default */
}

/* Show the Exit Overlay (When Triggered) */
body.exiting .page-transition-overlay-exit {
    visibility: visible; /* Make it visible */
    opacity: 1; /* Fully visible */
    transform: translateX(0) rotate(131deg); /* Animate into position */
}