/* scroll-progress — @tokens: --scroll-progress-height */
/* ─── Scroll progress ─────────────────────────────────────────────────
   Thin reading-progress bar fixed at the top of the viewport, filling
   left→right as the page scrolls. Decorative (aria-hidden in markup, not
   focusable). JS sets the fill ratio via the --hzo-scroll-progress custom
   property (0..1); the bar is scaled on the X axis from that ratio. No
   transition — the value updates every scroll frame, so a transition would
   lag behind the pointer; hence no reduced-motion block is needed (this is
   scroll-driven, not autonomous motion). */
.hzo-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--scroll-progress-height, 3px);
    background: transparent;
    z-index: var(--z-overlay);
    pointer-events: none;
}

.hzo-scroll-progress__bar {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--brand);
    transform-origin: left center;
    transform: scaleX(var(--hzo-scroll-progress, 0));
}

/* ── Colour modifier (recolour the bar) ── */
.hzo-scroll-progress--accent .hzo-scroll-progress__bar {
    background: var(--accent);
}