.hero-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: #0b99ff;
  pointer-events: auto;
  contain: strict;
}

.hero-curtain__panels {
  position: absolute;
  top: -10%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120vh;
  margin: auto;
  font-size: 0;
  white-space: nowrap;
  background: #0b99ff;
  transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(0.7, 0, 0.2, 1);
  transform-origin: -120% top;
}

.hero-curtain__panel {
  display: inline-block;
  width: 10vw;
  height: 120vh;
  border: 0;
  background: repeating-linear-gradient(
    to left,
    #0b99ff 4vw,
    hsl(205 100% 32%) 8vw,
    hsl(205 100% 72%) 10vw
  );
  background-size: 100% 100%;
  transform: rotate(3deg);
  transform-origin: 0 0;
  animation: hero-curtain-sway 2s ease infinite;
}

.hero-curtain__panel:nth-child(1) { animation-delay: -0.1s; }
.hero-curtain__panel:nth-child(2) { animation-delay: -0.2s; }
.hero-curtain__panel:nth-child(3) { animation-delay: -0.3s; }
.hero-curtain__panel:nth-child(4) { animation-delay: -0.4s; }
.hero-curtain__panel:nth-child(5) { animation-delay: -0.5s; }
.hero-curtain__panel:nth-child(6) { animation-delay: -0.6s; }
.hero-curtain__panel:nth-child(7) { animation-delay: -0.7s; }
.hero-curtain__panel:nth-child(8) { animation-delay: -0.8s; }
.hero-curtain__panel:nth-child(9) { animation-delay: -0.9s; }
.hero-curtain__panel:nth-child(10) { animation-delay: -1s; }

html.home-ready .hero-curtain {
  background: transparent;
  pointer-events: none;
}

html.home-ready .hero-curtain__panels {
  transform: scaleX(0);
}

@keyframes hero-curtain-sway {
  50% { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-curtain__panel {
    animation: none;
  }

  html.home-ready .hero-curtain__panels {
    opacity: 0;
    transform: none;
    transition: opacity 120ms linear;
  }
}