body.is-after-hero {
  background: #f3f0ea;
}

.hero.hero--curtained {
  visibility: hidden;
  pointer-events: none;
}

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

.curtain__leaf {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  opacity: 1;
  will-change: transform;
  backface-visibility: hidden;
}

.curtain__leaf--left {
  left: 0;
}

.curtain__leaf--right {
  left: 50%;
}

.curtain__shot {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 200%;
  height: 100%;
  pointer-events: none;
}

.curtain__leaf--right .curtain__shot {
  left: -100%;
}