/* v3 page-change progress bar (reference §1, §5; core §8). Ledger 2 (decision
   319 (7)): 3px --primary under the top bar after 150 ms (js/v3/progress.js),
   grows with transform: scaleX — never width; after 300 ms the old page dims
   and takes no clicks; the new page fades in. Nothing ever covers the page. */

.lg-progress {
  position: fixed;
  inset: calc(var(--bar-height) + env(safe-area-inset-top)) 0 auto 0;
  z-index: var(--layer-progress);
  height: 0.1875rem;   /* 3px */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.lg-progress__bar {
  display: block;
  height: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
}
.lg-progress--on { opacity: 1; }
.lg-progress--on .lg-progress__bar {
  /* Creeps toward 90% while the request runs; the finish jumps to 100%. */
  transform: scaleX(0.9);
  transition: transform 8s cubic-bezier(0.1, 0.6, 0.2, 1);
}
.lg-progress--done { opacity: 0; transition: opacity var(--dur-exit) var(--ease) 120ms; }
.lg-progress--done .lg-progress__bar { transform: scaleX(1); transition: transform 120ms var(--ease); }

/* The old page while the next one loads, and the new one arriving. */
.lg-main { transition: opacity var(--dur-exit) var(--ease); }
.lg-main.lg-loading { opacity: 0.55; pointer-events: none; }
.lg-main.lg-entered { animation: lg-page-in var(--dur-fast) var(--ease); }
@keyframes lg-page-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* No movement: the bar simply appears full; no fade-in. */
  .lg-progress--on .lg-progress__bar, .lg-progress--done .lg-progress__bar { transform: scaleX(1); transition: none; }
  .lg-main.lg-entered { animation: none; }
}