/*------------------------------------*\
  #LOADING SCREEN
\*------------------------------------*/
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black; /* Default black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
    opacity: 1; /* Initially visible */
    transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1); /* Slow reveal */
}

/* Theme-specific background for loading screen (overrides default black) */
body.light-mode #loading-screen {
    background-color: white; /* Light mode background */
}

/* Styling for the logos */
.loading-logo {
    position: absolute; /* To layer them on top of each other */
    max-width: 150px; /* Adjust logo size as needed */
    height: auto;
    opacity: 0; /* Initially hidden, JavaScript will control visibility */
    transition: opacity 1s ease-in-out; /* NEW: Increased to 1.5 seconds for slower logo transition */
}

/* Class to hide the loading screen (added by JavaScript) */
#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none; /* Allows interaction with content underneath after fade */
}