:root {
  --site-progress-height: 4px;
  --site-progress-z: 12050;
}
.site-progress {
  height: var(--site-progress-height);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: translate3d(0, -100%, 0);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: var(--site-progress-z);
}
.site-progress.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.site-progress__bar {
  background: linear-gradient(90deg, #ffd34d 0%, #ed3142 42%, #500390 100%);
  box-shadow: 0 0 18px rgba(237, 49, 66, 0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate3d(-100%, 0, 0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.32, 1);
  width: 100%;
}
.site-progress__bar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  content: "";
  height: 100%;
  position: absolute;
  right: -18%;
  top: 0;
  transform: skewX(-18deg);
  width: 34%;
}
.site-progress.is-active .site-progress__bar::after {
  animation: site-progress-shine 1.1s ease-in-out infinite;
}
.site-progress__peg {
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255, 211, 77, 0.88), 0 0 34px rgba(237, 49, 66, 0.52);
  height: 100%;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(50%);
  width: 72px;
}
body.site-is-loading {
  cursor: progress;
}
@keyframes site-progress-shine {
  0% {
    opacity: 0;
    transform: translateX(-280%) skewX(-18deg);
  }
  38% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateX(160%) skewX(-18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-progress,
  .site-progress__bar {
    transition-duration: 0.01ms;
  }
  .site-progress.is-active .site-progress__bar::after {
    animation: none;
  }
}