.section-curtains {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.section-curtain {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
}

.section-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 150% 100% at 50% 100%, #ffffff 0%, #f4f4f4 42%, #b8b8b8 100%);
  opacity: 0;
  pointer-events: none;
}

.section-curtain.is-active {
  opacity: 1;
  visibility: visible;
}

.section-curtain.is-full::before {
  opacity: 1;
}

.section-curtain__col {
  flex: 0 0 calc(20vw + 1px);
  height: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  background: transparent;
}

.section-curtain__col:not(:last-child) {
  margin-right: -1px;
}

.section-curtain.is-full .section-curtain__col {
  opacity: 0;
}

.section-curtain__col::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  background: radial-gradient(ellipse 150% 100% at 50% 100%, #ffffff 0%, #f4f4f4 42%, #b8b8b8 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.section-curtain__col:nth-child(1)::before {
  left: 0;
}

.section-curtain__col:nth-child(2)::before {
  left: -20vw;
}

.section-curtain__col:nth-child(3)::before {
  left: -40vw;
}

.section-curtain__col:nth-child(4)::before {
  left: -60vw;
}

.section-curtain__col:nth-child(5)::before {
  left: -80vw;
}


main {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .section-curtain__col {
    will-change: auto;
  }
}