html::before {
  content: '';
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
html[data-navigation-state='loading']::before {
  opacity: 1;
  animation: navigation-progress 8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html[data-navigation-state='finishing']::before {
  transform: scaleX(1);
  opacity: 0;
  transition:
    transform 150ms ease-out,
    opacity 180ms ease-out 150ms;
}
@keyframes navigation-progress {
  from {
    transform: scaleX(0.08);
  }
  to {
    transform: scaleX(0.88);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-navigation-state='loading']::before {
    animation: none;
    transform: scaleX(1);
  }
  html[data-navigation-state='finishing']::before {
    transition: none;
  }
}