/* Page Transition Overlay */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none; 
    
    /* DEFAULT FALLBACK COLOR */
    --bg-color: #FFB7B2;

    /* 
       THE GRADIENT LOGIC (Fixed 5px Width + Smoothness):
       1. Transparent center -> var(--r)
       2. Black Start -> var(--r) + 1px (Smoothness buffer)
       3. Black End -> var(--r) + 6px (1px buffer + 5px width)
       4. Color Start -> var(--r) + 7px (Smoothness buffer)
    */
    background: radial-gradient(
        circle at center, 
        transparent var(--r), 
        #000 calc(var(--r) + 1px), 
        #000 calc(var(--r) + 6px), 
        var(--bg-color) calc(var(--r) + 7px) 
    );
    
    will-change: background;
    transition: --r 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 
   IGNORE THE RED 'X' HERE. 
   This is valid modern CSS that tells the browser how to animate the gradient.
*/
@property --r {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* STATE: LOADING (Hole is closed) */
.transition-overlay {
    --r: 0%; 
}

/* STATE: REVEAL (Hole opens up) */
.transition-overlay.reveal {
    --r: 150%; 
}

/* STATE: EXITING (Hole closes) */
.transition-overlay.exit {
    --r: 0%;
    pointer-events: all;
}