/* loader.css */

#loader-container {
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color); /* Use the background color variable */
    display: flex; /* Enable flexbox for centering content */
    flex-direction: column; /* Stack loader elements vertically */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    z-index: 999; /* Ensure it's below the splash screen but above the main content */
    transition: background-color 0.3s ease, opacity 0.5s ease-in-out;
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-logo-container {
    width: 80px; /* Smaller logo in the loader */
    height: auto;
    margin-bottom: 20px;
    opacity: 0; /* Initially hidden */
    animation: pulseLogo 1.5s infinite alternate ease-in-out 0.5s, fadeInLoader 0.5s ease-in-out forwards 0.2s; /* Pulse and fade in animation */
}

.loader-logo-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Keyframes for the logo pulse animation */
@keyframes pulseLogo {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

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

.progress-bar-container {
    background-color: var(--progress-bg); /* Use the progress bar background color variable */
    width: 200px;
    height: 16px; /* Increased height for better visibility */
    border-radius: 8px;
    overflow: hidden; /* Hide content that goes beyond the container */
    margin-bottom: 15px;
    opacity: 0; /* Initially hidden */
    animation: fadeInLoader 0.5s ease-in-out forwards 0.4s; /* Fade in animation */
}

.progress-bar {
    background-color: var(--progress-color); /* Use the progress bar color variable */
    height: 100%;
    width: 0%; /* Start with zero width */
    border-radius: 8px;
    color: var(--progress-binary-color); /* Use the progress bar binary color variable */
    font-family: monospace; /* Use a fixed-width font for the binary */
    font-size: 1em;
    white-space: nowrap; /* Prevent wrapping */
    line-height: 16px; /* Match the height of the progress bar */
    padding-left: 10px;
    overflow: hidden; /* Hide binary text that overflows */
    animation: fillProgressBar 3s linear forwards; /* Animate the width to simulate progress */
    position: relative; /* For the before pseudo-element */
}

/* Create an infinite scrolling binary text effect */
.progress-bar::before {
    content: "1010101010101010101010101010101010101010101010101010101010101010"; /* Long repeating binary sequence */
    display: inline-block;
    animation: scrollBinary 0.5s linear infinite; /* Animate the horizontal scrolling */
    position: absolute;
    left: 0;
}

/* Keyframes for the progress bar fill animation */
@keyframes fillProgressBar {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Keyframes for the infinite scrolling binary text */
@keyframes scrollBinary {
    0% {
        transform: translateX(0%); /* Start from the beginning */
    }
    100% {
        transform: translateX(-100%); /* Scroll to the left, creating the infinite effect */
    }
}

.loading-text {
    font-size: 0.9em;
    color: var(--text-color); /* Use the text color variable */
    opacity: 0; /* Initially hidden */
    animation: fadeInLoader 0.5s ease-in-out forwards 0.6s; /* Fade in animation */
}