/* YouTube-style top loading bar, driven by js/page-progress.js.
   Sits above everything (the header, the gold frame, the back-to-top button). */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.page-progress.is-active {
    opacity: 1;
}

.page-progress__bar {
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--theme-color1, #1e9e57);
    transform: translateX(-100%);
    will-change: transform;   /* page-progress.js moves it every frame; no CSS transition while it creeps */
}

/* The bright tip at the leading edge, like YouTube's. */
.page-progress__bar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px var(--theme-color1, #1e9e57), 0 0 5px var(--theme-color1, #1e9e57);
    opacity: .9;
    transform: rotate(3deg) translate(0, -3px);
}

/* 25-design-rules.md §7: every animation is off under reduced motion. The bar is a
   genuine loading indicator, not decoration, so it still appears - it just stops
   creeping and loses the glowing tip. page-progress.js holds it at a static position
   instead of moving it per frame. */
@media (prefers-reduced-motion: reduce) {
    .page-progress { transition: none; }
    .page-progress__bar::after { display: none; }
}