/*
 * Wardenclyffe page loader — slim top progress bar.
 *
 * 3px-tall bar pinned to the very top of the viewport. While
 * loading, a theme-coloured fill slides across the bar with a soft
 * glow underneath; a tiny spinning brass gear hovers at the
 * leading edge so the steampunk personality still reads without
 * eating the page.
 *
 * The shape is engine-shared. Colours come from two CSS custom
 * properties set by the active theme:
 *   --wcy-loader-accent  — fill + gear stroke (theme-primary)
 *   --wcy-loader-bg      — bar trough (faint, semi-transparent)
 *
 * Hidden by default. The loader.js controller adds .is-visible
 * after a 220ms delay so quick navigations don't flash.
 */
.wcy-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1500;
    background: var(--wcy-loader-bg, rgba(120, 80, 80, 0.18));
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.wcy-loader.is-visible {
    opacity: 1;
    /* Bar accepts pointer events so the user knows something's in
       flight, but it's only 3px so it never actually blocks a click. */
    pointer-events: none;
}

/* Sliding fill — a 30%-wide chunk that travels left-to-right and
   loops. The travel reads as "something's happening" without
   pretending to measure real progress (we don't have one). */
.wcy-loader-bar {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.wcy-loader-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 30%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--wcy-loader-accent, #d6a89c) 20%,
        var(--wcy-loader-accent, #d6a89c) 80%,
        transparent 100%);
    box-shadow: 0 0 8px var(--wcy-loader-accent, #d6a89c);
    animation: wcy-loader-slide 1.4s ease-in-out infinite;
}

/* Tiny gear hovering at the leading edge of the fill. Spins
   continuously, sits 14px above the bar so its silhouette reads
   over the page chrome (header) without overlapping content
   columns. */
.wcy-loader-gear {
    position: absolute;
    top: -7px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--wcy-loader-accent, #d6a89c);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px var(--wcy-loader-accent, #d6a89c));
    animation: wcy-loader-gear-travel 1.4s ease-in-out infinite,
               wcy-loader-gear-spin 1.2s linear infinite;
}
.wcy-loader-gear-fill {
    fill: var(--wcy-loader-accent, #d6a89c);
    fill-opacity: 0.25;
    stroke: var(--wcy-loader-accent, #d6a89c);
    stroke-width: 0.8;
}

@keyframes wcy-loader-slide {
    0%   { left: -30%; }
    100% { left: 100%; }
}
@keyframes wcy-loader-gear-travel {
    /* Tracks the leading edge of the fill — same easing + duration
       so the gear sits at the front of the wave the whole way. */
    0%   { left: -10%; }
    100% { left: 110%; }
}
@keyframes wcy-loader-gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Reduced-motion: keep a static low-opacity fill so users still
   get a "something's loading" cue without the slide. */
@media (prefers-reduced-motion: reduce) {
    .wcy-loader-bar::before,
    .wcy-loader-gear {
        animation: none;
    }
    .wcy-loader-bar::before {
        left: 0;
        width: 100%;
        opacity: 0.5;
    }
    .wcy-loader-gear {
        left: calc(50% - 9px);
    }
}