/* ============================================================
   HELIOCASTLE — READING BAR
   A hairline across the top of the window that fills as the page
   is read. js/scroll-progress.js makes the element and writes --p.
   ============================================================ */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 20;                 /* over the nav, which sits at 10 */
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    rgb(var(--accent-rgb) / 0.35) 0%,
    var(--gold) 55%,
    var(--gold-light) 100%);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.45);
  pointer-events: none;
}