/* ============================================================================
   177X — THE ROUTE PROGRESS LINE
   Source of truth: 177X-ai/brand. Synced, never edited in a consumer repo.

   A 2px line on the chrome's own bottom boundary that fills while a navigation
   is in flight. Added for Diamond, put here because every product will want one
   and because of what it claims:

   VOLTAGE MEANS LIVE. That reading already had one claimant — the accent on a
   fill, a chip, a bar. This is the second, and two independent products each
   inventing their own progress colour is how an accent stops meaning anything.
   So the colour is `--x-accent` by role, and a consumer that hardcodes
   `#C8F23A` here has broken the rule this file exists to hold.

   Load after house/tokens.css and the surface file, like lockup.css.

       <div class="x-route-progress" data-state="loading">
         <span class="x-route-progress__bar"></span>
       </div>

   `data-state` is `idle` | `loading` | `done`. The consumer owns the state; the
   geometry and the timing are here so five venues cannot drift into five
   different progress bars.

   THREE THINGS ABOUT THE TIMING ARE DECISIONS, not defaults.

   1. IT NEVER COMPLETES ON ITS OWN. The fill decelerates hard toward 90% and
      stops there. A bar that reaches the end while the page is still loading
      has told the reader something false, and the next time it fills they will
      not believe it.

   2. IT IS DELAYED 150ms. Most navigations in a prefetched app finish inside
      that window, and a bar that flashes on every click is noise that trains
      people to stop seeing it. Below 150ms nothing appears at all.

   3. REDUCED MOTION GETS A SEGMENT, NOT TRAVEL. `prefers-reduced-motion` is
      not "make the animation shorter" — the thing being avoided is movement.
      So the bar appears at a fixed width and holds. It still says "working",
      it just does not move to say it.
   ========================================================================== */

:root {
  --x-route-progress-h: 2px;
  /* How far the fill creeps before it gives up and waits. Not 100 — see 1. */
  --x-route-progress-max: 90%;
  /* Long enough that the deceleration is still visibly happening on a slow
     route rather than having flattened out seconds ago. */
  --x-route-progress-duration: 12s;
  --x-route-progress-delay: 150ms;
}

.x-route-progress {
  position: absolute;
  left: 0;
  right: 0;
  /* Over the chrome's own hairline rather than under it: the boundary is
     already there, and this replaces it for the length of a navigation instead
     of adding a second line and moving the content down 2px. */
  bottom: calc(var(--x-route-progress-h) * -0.5);
  height: var(--x-route-progress-h);
  overflow: hidden;
  pointer-events: none;
}

.x-route-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--x-accent);
  opacity: 0;
}

.x-route-progress[data-state="loading"] .x-route-progress__bar {
  animation:
    x-route-progress-fill var(--x-route-progress-duration)
      cubic-bezier(0, 0.75, 0.25, 1) var(--x-route-progress-delay) forwards,
    x-route-progress-in 120ms linear var(--x-route-progress-delay) forwards;
}

/* Arrival. The width transition is what makes the last tenth read as "landed"
   rather than as more creeping, so it is fast and linear; the fade is slower so
   the eye registers that it got there. */
.x-route-progress[data-state="done"] .x-route-progress__bar {
  width: 100%;
  opacity: 1;
  transition: width 120ms linear, opacity 220ms ease 120ms;
}
.x-route-progress[data-state="done"] .x-route-progress__bar[data-settled="true"] {
  opacity: 0;
}

@keyframes x-route-progress-fill {
  from { width: 0; }
  to   { width: var(--x-route-progress-max); }
}
@keyframes x-route-progress-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* A segment that appears and holds. Still delayed, so a fast navigation is
     still silent — the delay is about noise, not about motion, and it applies
     either way. */
  .x-route-progress[data-state="loading"] .x-route-progress__bar {
    animation: x-route-progress-in 1ms linear var(--x-route-progress-delay) forwards;
    width: 28%;
  }
  .x-route-progress[data-state="done"] .x-route-progress__bar {
    transition: opacity 1ms linear;
  }
}