/*
 * spa.css — top-of-page progress bar driven by static/js/spa.js.
 *
 * Three states:
 *   - hidden          (default; no class)
 *   - is-loading      (animates from 0 → 80% width over ~3s, easing
 *                      out so it never quite reaches 100%; that gap
 *                      reserves room for a "near done" feel)
 *   - is-done         (snap to 100% then fade out)
 *
 * Position: fixed at the very top of the viewport, above the sticky
 * header (z-index above --z-header). Subtle by default.
 */

.spa-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: hsl(var(--foreground));
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  will-change: width, opacity;
}

.spa-progress--loading {
  opacity: 1;
  width: 80%;
  transition: width 3s cubic-bezier(0.1, 0.6, 0.1, 1), opacity 100ms ease;
}

.spa-progress--done {
  opacity: 0;
  width: 100%;
  transition: width 200ms ease, opacity 400ms ease 200ms;
}