.prism-preview .background__light {
  display: none;
}

.prism-layer {
  position: fixed;
  inset: -8vh -8vw;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(5px) saturate(155%);
  background:
    linear-gradient(
      34deg,
      transparent 0 32%,
      rgba(255, 82, 88, 0.46) 37%,
      rgba(255, 220, 82, 0.38) 41%,
      rgba(84, 232, 212, 0.42) 45%,
      rgba(119, 102, 255, 0.36) 49%,
      rgba(255, 108, 205, 0.32) 53%,
      transparent 61% 100%
    ),
    radial-gradient(ellipse 18% 4% at 28% 42%, rgba(255, 255, 246, 0.38), rgba(255, 235, 205, 0.12) 38%, transparent 72%),
    radial-gradient(ellipse 10% 3% at 42% 55%, rgba(255, 255, 246, 0.32), rgba(255, 228, 216, 0.1) 42%, transparent 78%),
    radial-gradient(ellipse 15% 5% at 70% 36%, rgba(255, 255, 246, 0.28), rgba(210, 245, 255, 0.1) 44%, transparent 76%),
    radial-gradient(ellipse 8% 2.5% at 58% 72%, rgba(255, 255, 246, 0.26), transparent 72%),
    radial-gradient(ellipse at 22% 34%, rgba(255, 255, 235, 0.38), transparent 18%),
    radial-gradient(ellipse at 63% 64%, rgba(122, 203, 255, 0.32), transparent 22%),
    radial-gradient(ellipse at 76% 42%, rgba(255, 155, 210, 0.28), transparent 20%);
  mask-image: radial-gradient(
    ellipse at var(--light-cx, 50%) var(--light-cy, 34%),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.74) 16%,
    rgba(0, 0, 0, 0.28) 38%,
    rgba(0, 0, 0, 0.06) 56%,
    transparent 74%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at var(--light-cx, 50%) var(--light-cy, 34%),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.74) 16%,
    rgba(0, 0, 0, 0.28) 38%,
    rgba(0, 0, 0, 0.06) 56%,
    transparent 74%
  );
  transform: rotate(-1.5deg);
  transition: opacity 900ms ease, filter 900ms ease;
}

.prism-preview--still .prism-layer {
  opacity: 0;
}

.prism-preview--soft .prism-layer {
  opacity: 0.44;
}

.prism-preview--visible .prism-layer {
  opacity: 0.67;
  filter: blur(3px) saturate(175%);
}

@media (max-width: 620px) {
  .prism-layer {
    filter: blur(12px) saturate(118%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prism-layer {
    opacity: 0.12;
    mask-image: none;
    -webkit-mask-image: none;
  }
}