/* Slim top-of-viewport loading bar for hx-boosted in-app navigation
   (templates/base/league_public_base.html's #hl-league-shell). htmx adds
   the .htmx-request class to this element itself for the duration of any
   boosted request (hx-indicator="#hl-nav-progress" on the shell) - no
   bespoke JS needed here, just react to that class. Distinct from
   page-loader.css's full-screen overlay, which only ever shows once per
   real (non-boosted) page load. */
.hl-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hl-nav-progress {
    transition: opacity 0.2s ease;
  }

  /* Never actually reaches 100% while the request is still in flight
     (classic progress-bar illusion) - eases fast at first, slows down
     the longer a request takes, so a quick navigation still reads as
     "moving" rather than snapping to a fixed width. */
  .hl-nav-progress.htmx-request {
    opacity: 1;
    width: 78%;
    transition: width 2.4s cubic-bezier(0.1, 0.7, 0.4, 1), opacity 0.2s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-nav-progress.htmx-request {
    opacity: 1;
  }
}