/* Scroll progress bar -- a 2px line pinned to the top of the window that
   fills left to right as the page scrolls. Shared by every page (index.html
   and every page in case-studies/); the element itself is created by
   js/scroll-progress.js.

   Change the color in one place: --progress-color in css/theme.css, one
   value per theme. Light: #39afee, a light sky blue nudged slightly toward
   the site's indigo accent (#3f46a8) -- the bar sits over the light
   glacier-blue background or the frosted header, so a paler blue (like
   #7dd3fc) would nearly disappear there. Dark: #7dd3fc, the paler sky blue,
   which is the one that reads on the midnight-navy page. The fallback below
   is only used if a page loads this file without theme.css. */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  /* Above the sticky header (z-index 10). */
  z-index: 9999;
  width: 100%;
  height: 2px;
  background: var(--progress-color, #39afee);
  /* Filled by scaling a full-width bar from its left edge, not by animating
     width: transform is composited, so it doesn't trigger layout. The short
     transition is what makes the bar ease slightly behind the scroll
     position instead of jumping with it. */
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  /* Never intercept clicks on whatever is underneath it. */
  pointer-events: none;
}

/* The page is too short to scroll, so there's no progress to show. */
.scroll-progress.is-idle { opacity: 0; }

/* Reduced motion: still show progress, just without the easing. */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

@media print {
  .scroll-progress { display: none; }
}