.scene .scene-art {
  animation: none;
  transform: scale(1.012) translateX(-2px);
}

.scene {
  container-type: size;
}

/* Project water coordinates through the artwork's existing cover crop. */
.scene [data-scene-motion] {
  --art-width: max(100cqw, 179.166667cqh);
  --art-height: max(100cqh, 55.813953cqw);
  --crop-x: .64;
  --crop-y: .5;
  position: absolute;
  left: calc((100cqw - var(--art-width)) * var(--crop-x) + var(--art-width) * var(--water-x));
  top: calc((100cqh - var(--art-height)) * var(--crop-y) + var(--art-height) * var(--water-y));
  width: calc(var(--art-width) * var(--water-width));
  height: 4px;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #ffc890 20%, #fff3c9 48%, #ffd09c 72%, transparent);
  box-shadow: 0 3px 0 -1px #ffe3b16b;
  opacity: .3;
  transform-origin: center;
  animation: sunset-water-highlight 3.6s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.scene .water-highlight--far {
  --water-x: .46;
  --water-y: .562;
  --water-width: .072;
  animation-delay: -.6s;
}

.scene .water-highlight--middle {
  --water-x: .45;
  --water-y: .604;
  --water-width: .088;
  animation-delay: -1.8s;
}

.scene .water-highlight--near {
  --water-x: .41;
  --water-y: .652;
  --water-width: .105;
  animation-delay: -3s;
}

@keyframes sunset-water-highlight {
  0%, 100% { transform: translateX(-12px) scaleX(.72); opacity: .24; }
  50% { transform: translateX(12px) scaleX(1.08); opacity: .78; }
}

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

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 [data-scene-motion] {
    /* The mobile picture stays 460px tall inside the 650px scene. */
    --art-width: max(100cqw, 823.880597px);
    --art-height: max(460px, 55.833333cqw);
    --crop-x: .72;
    --crop-y: 0;
    height: 2px;
    box-shadow: none;
  }

  .scene .water-highlight--far { --water-x: .46; --water-y: .535; --water-width: .054; }
  .scene .water-highlight--middle { --water-x: .45; --water-y: .554; --water-width: .065; }
  .scene .water-highlight--near { --water-x: .43; --water-y: .573; --water-width: .073; }

  @keyframes sunset-water-highlight {
    0%, 100% { transform: translateX(-8px) scaleX(.72); opacity: .2; }
    50% { transform: translateX(8px) scaleX(1.08); opacity: .66; }
  }
}