/* ===============================
   LOADER VISIBILITY CONTROL
   =============================== */
#loader {
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    /* 🔥 PERFORMANCE */
    will-change: opacity, transform;
    transform: translateZ(0);
}

#loader.show {
    display: flex;
}

/* ===============================
   PULSE WAVE LOADER (UNIQUE)
   =============================== */

.dot-loader {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 140px;
}

/* Base bar */
.dot-loader span {
    width: 18px;
    height: 40px;
    border-radius: 10px;
    transform-origin: bottom;
    animation: pulseWave 1.6s cubic-bezier(.4,0,.2,1) infinite;
    will-change: height, box-shadow, transform, opacity;
}

/* ===============================
   GOOGLE COLOR + SOFT GLOW
   =============================== */

/* ===============================
   PRIMARY / SECONDARY ALTERNATING
   =============================== */

.dot-loader span:nth-child(odd) {
    background: linear-gradient(
        180deg,
        var(--primary),
        color-mix(in srgb, var(--primary), #000 25%)
    );
}

.dot-loader span:nth-child(even) {
    background: linear-gradient(
        180deg,
        var(--secondary),
        color-mix(in srgb, var(--secondary), #000 25%)
    );
}

/* ===============================
   STAGGERED ANIMATION TIMING
   =============================== */

.dot-loader span:nth-child(1) { animation-delay: -0.6s; }
.dot-loader span:nth-child(2) { animation-delay: -0.3s; }
.dot-loader span:nth-child(3) { animation-delay: 0s; }
.dot-loader span:nth-child(4) { animation-delay: -0.3s; }
.dot-loader span:nth-child(5) { animation-delay: -0.6s; }

/* ===============================
   PULSE + GLOW ANIMATION
   =============================== */

@keyframes pulseWave {
    0% {
        height: 40px;
        opacity: 0.6;
        box-shadow: none;
    }

    25% {
        height: 90px;
        opacity: 0.85;
    }

    50% {
        height: 140px;
        opacity: 1;
        box-shadow:
            0 0 18px currentColor,
            0 0 32px color-mix(in srgb, currentColor, transparent 60%);
    }

    75% {
        height: 80px;
        opacity: 0.85;
    }

    100% {
        height: 40px;
        opacity: 0.6;
        box-shadow: none;
    }
}
/* ===============================
   LOADING TEXT SYNC ANIMATION
   =============================== */
.loader-text {
    margin-top: 18px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    animation: loadingPulse 1.6s ease-in-out infinite;
}

/* Dots animation */
.loader-text::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: loadingDots 1.6s steps(3, end) infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes loadingDots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}