/* ==========================================================================
Preloader Styles
========================================================================== */

/* Prevent scrolling while loading */
body.loading-active {
    overflow: hidden !important; 
}

/* The Full-Screen Overlay */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #008864; /* Change if you want a dark background */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Container for the logo */
.logo-loader {
    position: relative;
    width: 120px; /* Adjust this to fit your specific logo size */
    height: auto;
}

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

/* Background image (Gray/Washed out) */
.logo-bg {
    filter: grayscale(100%);
    opacity: 0.15;
}

/* Foreground image (Full color, animated) */
.logo-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(100% 0 0 0); 
    animation: fillLogo 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* The fill-up animation */
@keyframes fillLogo {
    0% { clip-path: inset(100% 0 0 0); }
    50% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(100% 0 0 0); }
}

/* Class to trigger the dissolve */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}