/* ==========================================================================
   FEB STORE - ULTRA-FAST NANO PROGRESS BAR (YOUTUBE / GITHUB STYLE)
   - 3px high-definition glowing progress bar at top of viewport
   - Electric Blue & Cyan gradient with neon leading edge spark
   - Zero layout reflow, pure GPU transform: scaleX()
   - Micro glowing spinner at top right
   ========================================================================== */

#febNanoBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999999;
    pointer-events: none;
    background: linear-gradient(90deg, #0052cc 0%, #0062ff 45%, #38bdf8 80%, #ffffff 100%);
    box-shadow: 0 0 10px rgba(0, 98, 255, 0.8), 0 0 4px rgba(56, 189, 248, 0.9);
    transform-origin: 0% 50%;
    transform: scaleX(0);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease-out;
}

#febNanoBar.is-active {
    opacity: 1;
}

#febNanoBar.is-finished {
    opacity: 0;
    transition: transform 0.1s ease-out, opacity 0.18s ease-out 0.06s;
}

/* Glowing Front Spark / Peg */
#febNanoBar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff);
    box-shadow: 0 0 12px #38bdf8, 0 0 6px #ffffff;
    opacity: 0.9;
    transform: rotate(2deg) translateY(-1px);
}

/* Micro Glowing Spinner in Top-Right Corner (subtle, non-intrusive) */
#febNanoSpinner {
    position: fixed;
    top: 14px;
    right: 18px;
    width: 18px;
    height: 18px;
    z-index: 9999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

#febNanoSpinner.is-active {
    opacity: 1;
    visibility: visible;
}

#febNanoSpinner .nano-spinner-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 98, 255, 0.2);
    border-top-color: #0062ff;
    border-right-color: #38bdf8;
    box-sizing: border-box;
    animation: febNanoSpin 0.55s linear infinite;
}

@keyframes febNanoSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}