/* ============================================================
   SCROLL PROGRESS

   A hairline at the very top showing how far through the page the
   visitor is. Split out of the old header stylesheet when the nav
   bar was replaced by the hamburger — the header is gone, this
   is not.
   ============================================================ */

.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: var(--z-progress);          /* above the menu panel, below nothing */
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  background-image: var(--grad-cta);

  /* The document is RTL, so progress grows from the right edge.
     scaleX with a right origin does that without animating a
     width, which would relayout on every frame. */
  transform-origin: right center;
  transform: scaleX(0);
  will-change: transform;
}