/* 1.4.1 / Independent durations. The second delay is measured from the first start. */
.opening-curtain {
  /* Show only the vertical pleats and lower fringe of the existing material. */
  background-size: 100% 100%,100% 165%;
  background-position: center,center bottom;
  z-index: 4;
  animation: opening-inner-rise var(--opening-duration, 3s) cubic-bezier(.32,0,.32,1) 0s both;
}
.opening-valance {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
  /* Keep the upper curtain in place until its independently configured start. */
  animation: opening-valance-rise var(--opening-valance-duration, 3s) cubic-bezier(.42,0,.42,1) var(--opening-valance-delay, 2s) both;
}
.opening-valance__art { display: block; width: 100%; height: 100%; overflow: visible; }
.opening-shade,.opening-bloom,.opening-flare,.opening-curtain::after {
  animation-duration: var(--opening-duration, 3s);
}
@keyframes opening-inner-rise {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,-106%,0); }
}
@keyframes opening-valance-rise {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,-43%,0); }
}
@media(max-width:767px) {
  .opening-curtain { background-size: 100% 100%,auto 165%; }
  .opening-valance__art { position: absolute; left: 50%; width: auto; max-width: none; height: 100%; aspect-ratio: 1672 / 941; transform: translateX(-50%); }
}