/* 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;
}

/* --- GLOBAL BEER WIDGET --- */
.beer-widget {
    position: fixed;
    bottom: 30px;
    right: 30px; 
    width: 60px; height: 60px;
    background: rgba(0, 0, 0, 0.8);
    /* Try Sub-page var, then Root var, then default Teal */
    border: 1px solid var(--accent, var(--accent-color, #00ffc3)); 
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    text-decoration: none;
    /* Glow matches border color */
    box-shadow: 0 0 15px var(--accent, var(--accent-color, rgba(0, 255, 195, 0.2))); 
    z-index: 990; /* Just below the transition overlay (9999) */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px);
}

.beer-icon {
    font-size: 30px; line-height: 1;
    filter: drop-shadow(0 0 5px rgba(255, 200, 0, 0.5));
    transition: transform 0.3s;
}

.beer-widget:hover {
    transform: scale(1.1) rotate(-10deg);
    background: var(--accent, var(--accent-color, #00ffc3));
    box-shadow: 0 0 25px var(--accent, var(--accent-color, #00ffc3));
    border-color: #fff;
}

/* Tooltip (Hidden on mobile usually) */
@media (min-width: 768px) {
    .beer-widget::before {
        content: "Buy me a beer?";
        position: absolute; right: 70px;
        background: #000; color: #fff;
        padding: 5px 10px; border-radius: 4px;
        font-family: 'Space Mono', monospace; font-size: 0.7rem;
        border: 1px solid #333;
        opacity: 0; pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
        transform: translateX(10px); white-space: nowrap;
    }
    .beer-widget:hover::before { opacity: 1; transform: translateX(0); }
}