/* A narrow brand progress track gives immediate feedback without moving layout. */
.l8-navigation-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--cx-z-toast, 70) + 1);
  height: var(--cx-line-accent, 3px);
  overflow: hidden;
  background: var(--cx-brand-soft);
  opacity: 0;
  pointer-events: none;
  contain: strict;
}

.l8-navigation-progress > span {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--cx-brand);
  transform: translateX(-100%);
}

html[data-l8-navigating="true"] .l8-navigation-progress {
  opacity: 1;
}

html[data-l8-navigating="true"] .l8-navigation-progress > span {
  animation: l8-navigation-progress 1s var(--cx-ease) infinite;
}

@keyframes l8-navigation-progress {
  from { transform: translateX(0); }
  to { transform: translateX(290%); }
}

:is(button, input[type="submit"], input[type="button"], input[type="reset"], a)[data-l8-pressed="true"]:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px var(--cx-brand);
}

:is(button, input[type="submit"], a)[data-l8-pending="true"][aria-busy="true"] {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  html[data-l8-navigating="true"] .l8-navigation-progress > span {
    width: 35%;
    animation: none;
    transform: none;
  }

  :is(button, input[type="submit"], input[type="button"], input[type="reset"], a)[data-l8-pressed="true"]:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}