/* Freeze the approved framing; only the scene reflections move. */
.seascape img {
  animation: none;
  transform: scale(1.008) translateX(-2px);
}

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

.sea-caustic {
  background:
    repeating-linear-gradient(174deg,
      transparent 0 15px, #eaffff99 17px 19px,
      transparent 22px 36px, #b5fff570 39px 41px,
      transparent 44px 62px);
  border-radius: 50%;
  mask-image: radial-gradient(ellipse, #000 25%, transparent 72%);
  animation-name: a04-water-caustics;
}

.sea-caustic-near {
  left: -3%;
  top: 56%;
  width: 26%;
  height: 22%;
}

.sea-caustic-far {
  left: 46%;
  top: 52%;
  width: 10%;
  height: 21%;
  animation-delay: -1.6s;
}

.terrace-caustic {
  left: 1%;
  top: 82%;
  width: 48%;
  height: 13%;
  background:
    repeating-linear-gradient(153deg,
      transparent 0 32px, #efffff8c 35px 39px,
      transparent 44px 78px, #b8fff57a 82px 85px,
      transparent 91px 122px);
  mask-image: radial-gradient(ellipse, #000 20%, transparent 73%);
  animation-name: a04-terrace-caustics;
  animation-delay: -.8s;
}

@keyframes a04-water-caustics {
  0%, 100% { transform: translate3d(-12px, -3px, 0) skewX(-5deg); opacity: .3; }
  50% { transform: translate3d(12px, 4px, 0) skewX(5deg); opacity: .72; }
}

@keyframes a04-terrace-caustics {
  0%, 100% { transform: translate3d(-18px, 3px, 0) skewX(-4deg); opacity: .24; }
  50% { transform: translate3d(18px, -3px, 0) skewX(4deg); opacity: .62; }
}

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

@media (max-width: 700px) {
  .sea-caustic-near {
    left: -4%;
    top: 28%;
    width: 24%;
    height: 15%;
  }

  .sea-caustic-far {
    left: 79%;
    top: 25%;
    width: 24%;
    height: 19%;
  }

  .terrace-caustic {
    left: -4%;
    top: 41%;
    width: 46%;
    height: 8%;
  }
}