/* splash.css */

#splash-screen {
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--splash-bg); /* Use the splash screen background color variable */
    display: flex; /* Enable flexbox for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    z-index: 1000; /* Ensure it's on top of other content */
    color: var(--splash-text); /* Use the splash screen text color variable */
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease-in-out;
}

.splash-content {
    display: flex;
    flex-direction: column; /* Stack logo and tagline vertically */
    align-items: center; /* Center items horizontally */
}

.logo-container {
    opacity: 0; /* Initially hidden */
    transform: scale(0.9); /* Slightly smaller initially */
    animation: fadeInScale 1.2s ease-out forwards; /* Fade in and scale up animation */
}

.logo-container img {
    max-width: 250px; /* Set maximum width for the logo */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent extra spacing below the image */
}

/* Keyframes for the logo fade-in and scale animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tagline {
    font-size: 1.5em;
    margin-top: 20px;
    opacity: 0; /* Initially hidden */
    animation: fadeIn 1s ease-in-out forwards 1s; /* Fade in animation with a delay */
    text-align: center;
    color: var(--splash-text);
    transition: color 0.3s ease, opacity 0.5s ease-in-out;
}

/* Keyframes for the tagline fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}