/* =========================================================
   GLOBAL APP LOADER (Reusable, Theme-safe, Overlay)
========================================================= */

#app-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 18, 20, 0.35);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* prevent pointer interaction while hidden; enable when visible */
    pointer-events: none;
    /* prevent text selection behind */
    user-select: none;
    /* hint to browser to promote compositing and avoid repaints */
    will-change: opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


    /* Hidden state */
    #app-loader.loader-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

/* =========================================================
   LOADER CONTENT WRAPPER
========================================================= */

.loader-content {
    text-align: center;
    transform: translateY(-10px);
}

/* =========================================================
   LOGO ANIMATION
========================================================= */

.loader-logo {
    width: 70px;
    height: auto;
    margin-bottom: 18px;
    opacity: 0.9;
    animation: loaderLogoPulse 1.6s ease-in-out infinite;
    will-change: transform;
}

/* Smooth pulse */
@keyframes loaderLogoPulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* =========================================================
   PROGRESS BAR WRAPPER
========================================================= */

.loader-progress {
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* =========================================================
   ANIMATED BAR
========================================================= */

.loader-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient( 90deg, #7c9cff, #4f7cff, #7c9cff );
    border-radius: 10px;
    animation: loaderSlide 1.2s infinite ease-in-out;
}

/* Sliding effect */
@keyframes loaderSlide {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(300%);
    }
}

/* =========================================================
   OPTIONAL VARIANTS (Theme-aware future proofing)
========================================================= */

/* Success theme loader */
.loader-success .loader-bar {
    background: linear-gradient(90deg, #28a745, #4cd964, #28a745);
}

/* Primary theme loader */
.loader-primary .loader-bar {
    background: linear-gradient(90deg, #0d6efd, #6ea8fe, #0d6efd);
}

/* Warning theme loader */
.loader-warning .loader-bar {
    background: linear-gradient(90deg, #ffc107, #ffda6a, #ffc107);
}

/* =========================================================
   REDUCED MOTION SUPPORT
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .loader-logo,
    .loader-bar {
        animation: none !important;
    }
}