/* ==========================================================================
   LAYERS — Cinematic Page Transitions
   Black curtain overlay that sweeps over the page during navigation
   ========================================================================== */

#page-transition-overlay {
    position: fixed;
    inset: 0;
    background-color: #0a0a0a;
    z-index: 9998;
    /* Below cursor (99999), above everything else */
    pointer-events: none;

    /* Start offscreen — beneath the page */
    transform: translateY(100%);
    transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay logo shown while transitioning */
#page-transition-overlay .transition-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
}

/* ENTER: overlay sweeps UP, covering the screen */
#page-transition-overlay.is-entering {
    transform: translateY(0%);
    pointer-events: all;
}

#page-transition-overlay.is-entering .transition-logo {
    opacity: 1;
}

/* EXIT: overlay sweeps UP and OUT, revealing new page */
#page-transition-overlay.is-exiting {
    transform: translateY(-100%);
}