.hero-scroll-bar {
  --hero-scroll-progress: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 910;
  width: clamp(4px, 0.34vw, 6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}

.hero-scroll-bar.is-ready {
  opacity: 1;
}

body.pddg-loader-active .hero-scroll-bar,
body.is-page-transitioning .hero-scroll-bar {
  opacity: 0 !important;
}

.hero-scroll-bar__track,
.hero-scroll-bar__fill {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 0;
}

.hero-scroll-bar__track {
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(185, 165, 119, 0.12), rgba(185, 165, 119, 0.2));
  box-shadow:
    inset 0 0 0 1px rgba(185, 165, 119, 0.08),
    0 0 12px rgba(255, 255, 255, 0.45);
}

.hero-scroll-bar__fill {
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(195, 175, 133, 0.9), rgba(185, 165, 119, 1));
  box-shadow:
    0 0 18px rgba(185, 165, 119, 0.34),
    0 0 30px rgba(185, 165, 119, 0.22);
  transform: scaleY(var(--hero-scroll-progress));
  transform-origin: 50% 0;
}

@media (max-width: 760px) {
  .hero-scroll-bar {
    left: 0;
    width: 4px;
  }
}