body {
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  z-index: 2;
  top: 34vh;
  left: -20vw;
  width: 140vw;
  height: clamp(88px, 12vw, 176px);
  transform: rotate(-11deg);
  transform-origin: center;
  animation: tricolor-pass 18s linear infinite;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 153, 51, 0.08) 12%,
    rgba(255, 153, 51, 0.14) 25%,
    rgba(225, 236, 255, 0.25) 43%,
    rgba(225, 236, 255, 0.25) 57%,
    rgba(19, 136, 8, 0.14) 75%,
    rgba(19, 136, 8, 0.08) 88%,
    transparent 100%
  );
  pointer-events: none;
}

@keyframes tricolor-pass {
  from { transform: translateY(-110vh) rotate(-11deg); }
  to { transform: translateY(110vh) rotate(-11deg); }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}