/* ===== LOADING SCREEN STYLES ===== */

.loading-screen {
    /* Position fixed to cover the entire viewport */
    position: fixed;
    inset: 0;
    
    /* Center the content */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Set the black background color */
    background-color: #000;
    
    /* Ensure it's on top of everything else */
    z-index: 9999;
    
    /* Initial state for the fade-out effect */
    opacity: 1;
    visibility: visible;
    
    /* Much faster transition for the fade-out (0.2s) */
    transition: opacity 0.5s ease, visibility 1.2s;
    pointer-events: none;
}

/* This class will be added by JavaScript to hide the loading screen */
.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ===== LOGO ANIMATION ===== */

.loader-logo {
    /* Set a size for the logo */
    width: 200px; /* Adjust as needed */
    height: auto;
    
    /* Apply the animation */
    /* Animation duration is now 1.5s to fit the new timeout */
    animation: logoZoom 0.5s forwards;
}

@keyframes logoZoom {
    0% {
        /* Starts at original size */
        transform: scale(1); 
    }
    50% {
        /* Zooms in slightly */
        transform: scale(1.10); 
    }
    100% {
        /* Returns to original size */
        transform: scale(1.05);
    }
}