.scene .scene-art {
  animation: none;
  transform: scale(1.005) translateX(0);
}

.scene [data-scene-motion] {
  position: absolute;
  pointer-events: none;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.scene .harbor-searchlight {
  left: 31%;
  top: 24%;
  width: 26%;
  height: 23%;
  transform-origin: 95% 95%;
  clip-path: polygon(0 0, 18% 0, 98% 98%);
  background: linear-gradient(35deg, transparent 8%, rgb(192 232 228 / 30%) 48%, rgb(225 245 240 / 62%) 100%);
  opacity: .48;
  animation-name: harbor-searchlight-sweep;
}

.scene .harbor-water-sheen {
  left: 42%;
  top: 50%;
  width: 20%;
  height: 9%;
  clip-path: ellipse(49% 42% at 50% 50%);
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgb(167 228 218 / 65%) 8px 9px, transparent 10px 15px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 65%, transparent);
  opacity: .56;
  animation-name: harbor-water-glide;
}

@keyframes harbor-searchlight-sweep {
  0%, 100% { transform: rotate(-17deg); opacity: .48; }
  50% { transform: rotate(14deg); opacity: .8; }
}

@keyframes harbor-water-glide {
  0%, 100% { transform: translate(-10px, 0) scaleX(1); opacity: .56; }
  50% { transform: translate(12px, -3px) scaleX(1.025); opacity: .85; }
}

html[data-motion="paused"] .scene [data-scene-motion],
html[data-motion="hidden"] .scene [data-scene-motion] {
  animation-play-state: paused;
}

@media (max-width: 700px) {
  .scene .harbor-searchlight {
    left: 0;
    top: 16%;
    width: 32%;
    height: 24%;
    transform-origin: 95% 95%;
  }

  .scene .harbor-water-sheen {
    left: 1%;
    top: 43%;
    width: 30%;
    height: 7%;
  }
}

@media (max-width: 350px) {
  .scene .harbor-water-sheen {
    top: 40%;
    height: 6%;
  }
}