.kc-dome-laser {
  --kc-laser-speed: 1.7s;
  --kc-show-time: 3s;
  opacity: 0;
  position: relative;
  width: 320px;
  aspect-ratio: 320/340;
  pointer-events: none;
  isolation: isolate;
}
.kc-dome-laser__lights {
  position: absolute;
  width: 175%;
  left: -21%;
  bottom: 43%;
  aspect-ratio: 17901/9700;
  z-index: 0;
}
.kc-dome-laser__fan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  animation: kc-laser-sweep var(--kc-laser-speed) cubic-bezier(.45, 0, .2, 1) infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 0 2px #fff36b);
}
.kc-dome-laser__fan--1 {
  clip-path: polygon(0 0, 34% 0, 41% 100%, 0 100%);
  transform-origin: 39.8% 96%;
  --from: -18deg;
  --to: 34deg;
  animation-delay: -1s;
}
.kc-dome-laser__fan--2 {
  clip-path: polygon(34% 0, 50% 0, 44% 100%, 41% 100%);
  transform-origin: 42.4% 97.5%;
  filter: hue-rotate(125deg) drop-shadow(0 0 3px #67fff4);
  --from: 32deg;
  --to: -30deg;
  animation-delay: -3s;
  animation-duration: calc(var(--kc-laser-speed)*1.18);
}
.kc-dome-laser__fan--3 {
  clip-path: polygon(50% 0, 85% 0, 49% 100%, 44% 100%);
  transform-origin: 45.3% 98.7%;
  filter: hue-rotate(265deg) drop-shadow(0 0 3px #ff72df);
  --from: -34deg;
  --to: 24deg;
  animation-delay: -4s;
  animation-duration: calc(var(--kc-laser-speed)*.92);
}
.kc-dome-laser__fan--4 {
  clip-path: polygon(85% 0, 100% 0, 100% 100%, 49% 100%);
  transform-origin: 48.8% 100%;
  --from: 18deg;
  --to: -38deg;
  animation-delay: -2s;
  animation-duration: calc(var(--kc-laser-speed)*1.1);
}
.kc-dome-laser__dome {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

@keyframes kc-laser-sweep {
  0%,
  100% {
    transform: rotate(var(--from));
    opacity: .85;
  }
  38% {
    transform: rotate(var(--to));
    opacity: 1;
  }
  55% {
    transform: rotate(var(--to));
    opacity: 1;
  }
  82% {
    transform: rotate(0deg);
    opacity: .75;
  }
}

.kc-dome-laser.is-playing {
  animation: kc-dome-exit var(--kc-show-time) ease-in-out both;
}

.kc-dome-laser.is-playing .kc-dome-laser__fan {
  animation-play-state: running;
}

@keyframes kc-dome-exit {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  25%,
  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
    visibility: hidden;
  }
}

.kc-dome-laser.is-finished {
  visibility: hidden;
  opacity: 0;
}

@media(prefers-reduced-motion:reduce) {
  .kc-dome-laser__fan {
    animation: none;
    will-change: auto;
  }
  .kc-dome-laser.is-playing {
    animation-name: kc-dome-reduced-exit;
  }
}

.kc-dome-anchor {
  position: absolute;
  left: max(-18%, -132px);
  bottom: 130px;
  width: 100%;
  height: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: inset(-600px 0 0 0);
}
.kc-dome-anchor > .kc-dome-laser {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50.4%;
  max-width: 412px;
}

@media(max-width:1634px) {
  .kc-dome-anchor {
    bottom: calc(50px + 3.25vw);
  }
}

@media(max-width:1032px) {
  .kc-dome-anchor {
    bottom: calc(50px + 8.6vw);
  }
}

@media(max-width:600px) {
  .kc-dome-anchor {
    left: -20%;
    bottom: calc(40px + 13.5vw);
  }
}

@keyframes kc-dome-reduced-exit {
  0% {
    opacity: 0;
  }
  25%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.kc-dome-laser__fan {
  animation-duration: var(--kc-show-time);
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.kc-dome-laser__fan--1 {
  --gather: 42deg;
}
.kc-dome-laser__fan--2 {
  --gather: 0deg;
}
.kc-dome-laser__fan--3 {
  --gather: -34deg;
}
.kc-dome-laser__fan--4 {
  --gather: -62deg;
}

@keyframes kc-laser-sweep {
  0% {
    transform: rotate(var(--from));
  }
  50% {
    transform: rotate(var(--to));
  }
  88%,
  100% {
    transform: rotate(var(--gather));
  }
}

.kc-dome-anchor {
  clip-path: inset(-600px 0 0 0);
}