:root {
  --tm-page-loading-color: var(--color-red, #8C0014);
}

html.tm-page-loading::before {
  content: "";
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: var(--tm-page-loading-color);
  transform: scaleX(0.12);
  transform-origin: left center;
  opacity: 1;
  /* One shot: crawl toward ~90% and hold — no infinite restart */
  animation: tm-page-loading-progress 10s cubic-bezier(0.08, 0.4, 0.2, 1) forwards;
}

html.tm-page-loading body {
  opacity: .98;
  transition: opacity .18s ease;
}

@keyframes tm-page-loading-progress {
  0% {
    transform: scaleX(0.08);
    opacity: 1;
  }
  20% {
    transform: scaleX(0.45);
  }
  55% {
    transform: scaleX(0.72);
  }
  100% {
    transform: scaleX(0.9);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.tm-page-loading::before {
    animation: none;
    transform: scaleX(.65);
    opacity: 1;
  }
}