.sh-performance-interlude {
  isolation: isolate;
}

.sh-performance-interlude::before {
  content: "";
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(176, 199, 195, .24) 0%, rgba(176, 199, 195, .09) 38%, transparent 72%),
    radial-gradient(ellipse at 20% 72%, rgba(201, 150, 50, .065) 0%, transparent 56%);
  position: absolute;
  inset: 7% 1% 4% 5%;
  filter: blur(18px);
}

.sh-performance-interlude__wrap {
  z-index: 1;
  position: relative;
}

.sh-performance-interlude__media {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 93%, rgba(0, 0, 0, .82) 96.5%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 93%, rgba(0, 0, 0, .82) 96.5%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.sh-performance-interlude.is-performance-active .sh-performance-interlude__media {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}

.sh-inline-lucy-preparing {
  z-index: 7;
  pointer-events: none;
  color: #fff;
  letter-spacing: .04em;
  text-shadow: 0 1px 10px rgba(7, 59, 83, .76);
  align-items: center;
  gap: 11px;
  font-family: Lato, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  display: none;
  position: absolute;
  bottom: clamp(18px, 3vw, 30px);
  left: clamp(18px, 3vw, 34px);
}

.sh-performance-interlude.is-preparing .sh-inline-lucy-preparing {
  display: flex;
}

.sh-inline-lucy-preparing::before {
  content: "";
  background-color: #c99632;
  width: clamp(34px, 5vw, 58px);
  height: 1px;
  transform-origin: left center;
  animation: shvs-performance-hairline 1.35s ease-in-out infinite;
}

@keyframes shvs-performance-hairline {
  0%, 100% { opacity: .38; transform: scaleX(.62); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-inline-lucy-preparing::before {
    opacity: .72;
    transform: none;
    animation: none;
  }
}