.laser-flow,
.light-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1s ease;
}

.laser-flow { z-index: 1; }
.light-rays { z-index: 0; }
.laser-flow[data-state="ready"] { opacity: .8; }
.light-rays[data-state="ready"] { opacity: .5; }
.laser-flow canvas,
.light-rays canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

.installation > .beam,
.installation > .light-pool { transition: opacity 1s ease; }
.laser-flow[data-state="ready"] ~ .beam,
.laser-flow[data-state="ready"] ~ .light-pool { opacity: 0; }

@media (max-width: 700px) {
  .light-rays[data-state="ready"] { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .laser-flow,
  .light-rays { display: none; transition: none; }
  .installation > .beam,
  .installation > .light-pool { opacity: 1; transition: none; }
}