/* Preserve the illustration's initial framing; motion belongs to the water. */
.lagoon-scene .lagoon-art {
  animation: none;
  transform: scale(1.012) translate3d(-2px, 0, 0);
}

.lagoon-caustics {
  position: absolute;
  inset: -10% -12%;
  overflow: hidden;
  pointer-events: none;
}

.lagoon-caustics [data-scene-motion] {
  position: absolute;
  display: block;
  pointer-events: none;
  border: 3px solid rgba(198, 255, 244, .5);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 48% 52% 42% 58%;
  background: linear-gradient(164deg, transparent 43%, rgba(216, 255, 247, .28) 48%, rgba(139, 239, 226, .12) 52%, transparent 57%);
  animation: lagoon-caustic-flow 4s ease-in-out infinite;
  transform-origin: center;
}

.caustic-ribbon::before,
.caustic-ribbon::after {
  content: "";
  position: absolute;
  inset: 22% -4%;
  pointer-events: none;
  border-top: 2px solid rgba(225, 255, 249, .55);
  border-bottom: 1px solid rgba(152, 244, 231, .38);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.caustic-ribbon::after {
  inset: 42% 9% -12%;
  transform: rotate(12deg);
  opacity: .6;
}

.lagoon-caustics .caustic-ribbon-left {
  left: 12%;
  top: 49%;
  width: 21%;
  height: 17%;
}

.lagoon-caustics .caustic-ribbon-right {
  right: 12%;
  top: 29%;
  width: 19%;
  height: 27%;
  animation-delay: -2s;
}

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

@keyframes lagoon-caustic-flow {
  0%, 100% {
    transform: translate3d(-8px, -10px, 0) rotate(-7deg) skewX(-5deg);
    opacity: .3;
  }
  50% {
    transform: translate3d(8px, 10px, 0) rotate(7deg) skewX(5deg);
    opacity: .85;
  }
}

@media (max-width: 700px) {
  .lagoon-caustics {
    inset: 150px -3% 140px;
  }

  .lagoon-caustics .caustic-ribbon-left {
    left: 3%;
    top: 43%;
    width: 18%;
    height: 22%;
  }

  .lagoon-caustics .caustic-ribbon-right {
    right: 3%;
    top: 23%;
    width: 18%;
    height: 28%;
  }

  .lagoon-caustics [data-scene-motion] {
    animation-name: lagoon-caustic-flow-mobile;
    border-width: 2px;
  }
}

@keyframes lagoon-caustic-flow-mobile {
  0%, 100% {
    transform: translate3d(-3px, -8px, 0) rotate(-6deg) skewX(-4deg);
    opacity: .3;
  }
  50% {
    transform: translate3d(3px, 8px, 0) rotate(6deg) skewX(4deg);
    opacity: .85;
  }
}