/* ==========================================================================
   Scroll progress indicator
   ==========================================================================
   A thin fixed line across the very top of the viewport, above the sticky
   header (z-index: 101 vs the header's 100), that fills left to right as
   the visitor scrolls the page. js/global.js's initScrollProgress() sets
   --scroll-progress (0 to 1) on <html> via a rAF-throttled scroll listener;
   this file only draws the bar.

   Self-contained on purpose, same pattern as atmosphere.css and
   splash-cube.css: drop this <link> and the bar simply never appears, with
   nothing else on the page affected.

   Respects prefers-reduced-motion by dropping the fill transition, so the
   bar still shows accurate progress, it just jumps instead of easing.
   ========================================================================== */

html {
  --scroll-progress: 0;
}

.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 101;
  background: transparent;
  pointer-events: none;
}

.scroll-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--scroll-progress) * 100%);
  background: linear-gradient(90deg, var(--am-600), var(--am-500), var(--am-300));
  transition: width 120ms linear;
}

/* Logical inline direction already makes this correct for RTL: the bar
   fills from the reading-start edge in both directions without a separate
   [dir="rtl"] override. */

@media (prefers-reduced-motion: reduce) {
  .scroll-progress::before {
    transition: none;
  }
}