/* Startup Overlay - Full Screen Liquid Glass Distortion */
#startup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    
    /* 
       1. Glass Background:
       Increased opacity slightly (0.05) to soften the light coming through.
       This acts as a gentle diffuser.
    */
    background-color: rgba(20, 20, 20, 0.1); 
    
    /* 
       2. The "Liquid Glass" Texture - Optimized for Comfort:
       - Blur: Reduced from 40px to 28px. Excessive blur can cause visual fatigue.
       - Saturation: Reduced from 200% to 140%. Removes the "neon" glare while keeping colors vibrant.
       - Brightness: Reduced from 1.2 to 1.05. Removes the harsh over-exposure.
    */
    backdrop-filter: blur(28px) saturate(140%) brightness(1.05);
    -webkit-backdrop-filter: blur(28px) saturate(140%) brightness(1.05);
    
    display: flex;
    justify-content: center;
    align-items: center;

    /* 
       3. The Transition:
       Smoothed out the curve. Using a slightly longer duration ensures
       the eye has time to track the focus change.
    */
    transition: 
        backdrop-filter 1.8s cubic-bezier(0.25, 1, 0.5, 1),
        -webkit-backdrop-filter 1.8s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 1.8s ease,
        opacity 1s ease 1s,
        visibility 0s linear 2s;
    
    /* Reduced animation amplitude to prevent motion sickness */
    animation: liquidSurface 12s ease-in-out infinite alternate;
}

/* Optional Shimmer - Made much more subtle */
#startup-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 50%);
    animation: shimmerMove 10s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.3;
}

#startup-overlay.reveal {
    /* 
       The "Clear" State:
       Everything returns to normal.
    */
    backdrop-filter: blur(0px) saturate(100%) brightness(1);
    -webkit-backdrop-filter: blur(0px) saturate(100%) brightness(1);
    background-color: rgba(20, 20, 20, 0);
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes liquidSurface {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); } /* Enhanced breathing (1.01 -> 1.03) */
}

@keyframes shimmerMove {
    0% { transform: translate(0, 0); }
    50% { transform: translate(1%, 1%); }
    100% { transform: translate(0, 0); }
}