.scene {
  /* Match the supplied artwork's cover crop and existing object-position. */
  --art-width: max(100vw, 179.166667vh);
  --art-height: max(100vh, 55.813953vw);
  --art-left: calc((100vw - var(--art-width)) * .28);
  --art-top: calc((100vh - var(--art-height)) * .5);
}

.scene .scene-art {
  animation: none;
  transform: none;
}

.scene [data-scene-motion] {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform-origin: center;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scene .lantern-breath {
  left: calc(var(--art-left) + var(--art-width) * .336);
  top: calc(var(--art-top) + var(--art-height) * .386);
  width: calc(var(--art-width) * .042);
  height: calc(var(--art-height) * .062);
  background: radial-gradient(ellipse, #fff5cfad 0%, #ffc97780 30%, #f3a65c26 60%, transparent 75%);
  animation-name: lotus-lantern-breathe;
}

.scene .water-lantern-breath {
  left: calc(var(--art-left) + var(--art-width) * .422);
  top: calc(var(--art-top) + var(--art-height) * .806);
  width: calc(var(--art-width) * .043);
  height: calc(var(--art-height) * .048);
  background: radial-gradient(ellipse, #fff0c89c, #ffc67b63 35%, transparent 73%);
  animation-name: lotus-lantern-breathe;
  animation-delay: -.6s;
}

.scene .water-reflection {
  left: calc(var(--art-left) + var(--art-width) * .423);
  top: calc(var(--art-top) + var(--art-height) * .852);
  width: calc(var(--art-width) * .071);
  height: calc(var(--art-height) * .031);
  background: repeating-linear-gradient(0deg, transparent 0 3px, #ffd69894 3px 5px, transparent 5px 8px);
  mask-image: radial-gradient(ellipse, #000 18%, transparent 72%);
  animation-name: lotus-water-reflect;
  animation-delay: -.3s;
}

@keyframes lotus-lantern-breathe {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes lotus-water-reflect {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) translateX(-4px) scaleX(.94); }
  50% { opacity: .8; transform: translate(-50%, -50%) translateX(4px) scaleX(1.025); }
}

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 {
    --art-width: max(100vw, 1074.626866px);
    --art-height: max(600px, 55.833333vw);
    --art-left: calc((100vw - var(--art-width)) * .24);
    --art-top: 0px;
  }

  .scene .water-lantern-breath { display: none; }

  .scene .water-reflection {
    /* Use the bridge's distant water reflection above the mobile heading. */
    left: calc(var(--art-left) + var(--art-width) * .402);
    top: calc(var(--art-top) + var(--art-height) * .455);
    width: 36px;
    height: 8px;
  }
}