:root {
  --page-loader-height: 3px;
  --page-loader-progress: 0;
  --page-loader-track: rgba(16, 24, 40, 0.08);
  --page-loader-accent-start: #35c46a;
  --page-loader-accent-end: #1f8a4b;
  --page-loader-glow: 0 0 14px rgba(31, 138, 75, 0.28);
}

html::before,
html::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--page-loader-height);
  top: env(safe-area-inset-top, 0px);
  pointer-events: none;
  opacity: 0;
  z-index: 12000;
}

html::before {
  background: var(--page-loader-track);
  transition: opacity 180ms ease;
}

html::after {
  z-index: 12001;
  transform-origin: left center;
  transform: scaleX(var(--page-loader-progress));
  background: linear-gradient(90deg, var(--page-loader-accent-start) 0%, var(--page-loader-accent-end) 72%, var(--page-loader-accent-start) 100%);
  box-shadow: var(--page-loader-glow);
  will-change: transform, opacity;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease;
}

html.is-page-loading::before,
html.is-page-loading::after {
  opacity: 1;
}

html.is-page-loading.is-page-loading-finish::before,
html.is-page-loading.is-page-loading-finish::after {
  opacity: 0;
  transition: transform 180ms ease, opacity 140ms ease;
}

html[data-theme="dark"] {
  --page-loader-track: rgba(255, 255, 255, 0.12);
  --page-loader-glow: 0 0 16px rgba(53, 196, 106, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after {
    transition: none;
  }
}