/* Loader Overlay Wrapper */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
}

/* Blinds Container */
#loader-blinds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1; /* Behind text content */
}

/* Individual Blind Column */
.loader-blind-col {
    flex: 1; /* 10 columns take equal space */
    height: 100%;
    background-color: var(--clr-accent, #006D5B);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
    /* No border to ensure seamless look */
}

/* Content Container - Centered */
.loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: var(--clr-white, #FFFFFF);
    text-align: center;
    font-family: var(--font-heading, sans-serif);
    mix-blend-mode: normal;
    width: 100%;
    /* Strict hide by default */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.loader-content-active .loader-content {
    display: block;
    opacity: 1;
}

/* Rolling 3D Text Animation */
.loader-text-wrapper {
    height: 120px; 
    overflow: hidden;
    position: relative;
    /* Perspective for 3D effect */
    perspective: 600px;
    width: 600px; /* Wider to accommodate long text */
    margin: 0 auto;
}

.loader-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Faster for rapid text changes */
}

.loader-face {
    position: absolute;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 2px;
    backface-visibility: hidden; /* Hide back for cleaner look */
    background: transparent; /* Or match background if needed */
}

/* 4 Faces of the Cube (Rotating around X axis) */
/* Front Face */
.face-front {
    transform: rotateX(0deg) translateZ(60px); /* 60px is half of height 120px */
}

/* Bottom Face (Next item) */
.face-bottom {
    transform: rotateX(-90deg) translateZ(60px);
}

/* Back Face */
.face-back {
    transform: rotateX(-180deg) translateZ(60px);
}

/* Top Face */
.face-top {
    transform: rotateX(90deg) translateZ(60px);
}

/* Progress Bar */
.loader-progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px; /* As requested */
    background: rgba(255, 255, 255, 0.2);
    z-index: 3;
    /* Issue 2 Fix */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.loader-content-active .loader-progress-bar-container {
    display: block;
    opacity: 1;
}

.loader-progress-bar {
    height: 100%;
    background: var(--clr-white, #FFFFFF);
    width: 0%;
    transition: width 0.1s linear;
}

/* Percentage Text - Bottom Left */
.loader-percentage {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: auto;
    color: var(--clr-white, #FFFFFF);
    font-family: var(--font-heading, sans-serif); 
    font-size: 50px; /* Requested size */
    font-weight: 800; /* Solid */
    letter-spacing: 1px;
    z-index: 3;
    /* Issue 2 Fix */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.loader-content-active .loader-percentage {
    display: block;
    opacity: 1;
}

/* Text Fade Out */
#loader-overlay.loaded .loader-content,
#loader-overlay.loaded .loader-progress-bar-container,
#loader-overlay.loaded .loader-percentage {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Blinds Animation - Moves Up */
#loader-overlay.loaded .loader-blind-col {
    transform: translateY(-100%);
}

/* Staggered Delays (for 10 bars) */
/* The base delay starts after text fades (0.3s) */
.loader-blind-col:nth-child(1) { transition-delay: 0.3s; }
.loader-blind-col:nth-child(2) { transition-delay: 0.35s; }
.loader-blind-col:nth-child(3) { transition-delay: 0.4s; }
.loader-blind-col:nth-child(4) { transition-delay: 0.45s; }
.loader-blind-col:nth-child(5) { transition-delay: 0.5s; }
.loader-blind-col:nth-child(6) { transition-delay: 0.55s; }
.loader-blind-col:nth-child(7) { transition-delay: 0.6s; }
.loader-blind-col:nth-child(8) { transition-delay: 0.65s; }
.loader-blind-col:nth-child(9) { transition-delay: 0.7s; }
.loader-blind-col:nth-child(10) { transition-delay: 0.75s; }
/* Inner Page Reveal - 90% Opacity */
#loader-overlay.inner-page-reveal .loader-blind-col {
    background-color: rgba(0, 109, 91, 0.9);
}

#loader-overlay.inner-page-reveal .loader-content,
#loader-overlay.inner-page-reveal .loader-progress-bar-container,
#loader-overlay.inner-page-reveal .loader-percentage {
    display: none !important;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .loader-text-wrapper {
        width: 100%;
        height: 80px;
        perspective: 400px;
    }

    .loader-face {
        height: 80px;
        font-size: 2.2rem;
        letter-spacing: 1px;
    }

    /* Adjust Z-translation for smaller height (half of 80px) */
    .face-front { transform: rotateX(0deg) translateZ(40px); }
    .face-bottom { transform: rotateX(-90deg) translateZ(40px); }
    .face-back { transform: rotateX(-180deg) translateZ(40px); }
    .face-top { transform: rotateX(90deg) translateZ(40px); }

    .loader-percentage {
        bottom: 25px;
        left: 20px;
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .loader-face {
        font-size: 1.8rem;
    }
    
    .loader-percentage {
        font-size: 26px;
    }
}