/* kit/scroll-progress — MIT, siehe LICENSE im selben Ordner. 0 Abhaengigkeiten.

   Fortschrittslinie am oberen Rand. Zwei Antriebe, dieselbe Optik:

   1. animation-timeline: scroll() — der Browser rechnet, 0 JS pro Bild.
   2. Fallback: scroll-progress.js schreibt --kit-p, rAF-gedrosselt.

   Das Element selbst wird IMMER von JavaScript erzeugt. Damit steht ohne JS
   auch kein leerer Balken da — ein 3px-Streifen, der nie waechst, saehe wie ein
   Ladefehler aus. */

[data-kit-progress] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2147483000;   /* ueber allem, aber unter dem Maximum: ein Cookie-Banner darf gewinnen */
  transform-origin: 0 50%;
  transform: scaleX(var(--kit-p, 0));
  background: currentColor;
  opacity: .85;
  pointer-events: none;  /* nie ein Klickziel — der Balken liegt ueber der Kopfzeile */
  contain: strict;
}

/* Der scroll()-Antrieb. Nur wo unterstuetzt; sonst bleibt --kit-p aus dem JS
   die Quelle. Beide zusammen sind harmlos: die Animation ueberschreibt den
   Startwert, sie widerspricht ihm nicht. */
@supports (animation-timeline: scroll()) {
  [data-kit-progress="css"] {
    animation: kit-progress linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes kit-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Kein prefers-reduced-motion-Ausschluss: der Balken bewegt sich ausschliesslich,
   WEIL der Nutzer scrollt — er ist eine Positionsanzeige, keine Eigenbewegung.
   Wer reduzierte Bewegung eingestellt hat, will Autoplay weniger, nicht seine
   Scrollposition. */