:root {
  --motion-navy: #06245c;
  --motion-blue: #1689f5;
  --motion-red: #ef1821;
  --motion-orange: #ff8b0b;
  --motion-green: #16b850;
  --motion-pink: #e93379;
  --motion-teal: #06baa8;
}

html.has-gsap-subpage-motion {
  overflow-x: clip;
}

.has-gsap-subpage-motion .gsap-motion-char,
.has-gsap-subpage-motion .gsap-motion-word,
.has-gsap-subpage-motion .gsap-motion-line {
  will-change: transform, opacity;
}

.has-gsap-subpage-motion .gsap-motion-char {
  display: inline-block;
  transform-style: preserve-3d;
}

.has-gsap-subpage-motion .gsap-motion-line-mask {
  overflow: clip;
}

.gsap-page-progress {
  width: 5px;
  height: 150px;
  position: fixed;
  z-index: 18;
  top: 50%;
  right: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(6, 36, 92, .10);
  transform: translateY(-50%);
  pointer-events: none;
}

.gsap-page-progress span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    var(--motion-red) 0 16.66%,
    var(--motion-orange) 16.66% 33.33%,
    var(--motion-green) 33.33% 50%,
    var(--motion-teal) 50% 66.66%,
    var(--motion-blue) 66.66% 83.33%,
    var(--motion-pink) 83.33% 100%
  );
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

@media (max-width: 850px) {
  .gsap-page-progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gsap-page-progress {
    display: none !important;
  }

  .gsap-motion-char,
  .gsap-motion-word,
  .gsap-motion-line {
    opacity: 1 !important;
    transform: none !important;
  }
}