.scene {
  container-type: size;
}

.scene .scene-art {
  animation: none;
  transform: scale(1.008) translate3d(0, 0, 0);
  will-change: auto;
}

/* Match the artwork's cover sizing so highlights stay on the wet surfaces. */
.scene-reflections {
  position: absolute;
  left: 64%;
  top: 50%;
  width: max(100cqw, 179.166667cqh);
  height: max(100cqh, 55.813953cqw);
  transform: translate(-64%, -50%);
  pointer-events: none;
}

.scene-reflections [data-scene-motion] {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  transform: scale(1.008);
}

.reflection-bridge {
  left: 73%;
  top: 66%;
  width: 16%;
  height: 31%;
  clip-path: polygon(4% 0, 83% 0, 100% 100%, 0 100%);
}

.reflection-roof {
  left: 2%;
  top: 27%;
  width: 16%;
  height: 10%;
  clip-path: polygon(0 10%, 62% 29%, 100% 0, 91% 54%, 62% 82%, 0 63%);
}

.scene-reflections [data-scene-motion]::before {
  content: "";
  position: absolute;
  inset: -10% -35%;
  background: linear-gradient(110deg, transparent 31%, rgba(166, 223, 217, .08) 40%, rgba(220, 247, 232, .42) 49%, rgba(173, 222, 210, .13) 57%, transparent 65%);
  animation: jade-reflection-sweep 2.8s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

.scene-reflections .reflection-roof::before {
  background: linear-gradient(105deg, transparent 32%, rgba(170, 225, 221, .12) 43%, rgba(213, 242, 239, .48) 51%, transparent 64%);
  animation-delay: -1.4s;
}

@keyframes jade-reflection-sweep {
  0% { transform: translate3d(-50%, 0, 0); opacity: 0; }
  18% { opacity: .55; }
  48% { opacity: .85; }
  78% { opacity: .5; }
  100% { transform: translate3d(50%, 0, 0); opacity: 0; }
}

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

@media (max-width: 700px) {
  .scene-reflections {
    left: 66%;
    top: 0;
    width: max(100cqw, 179.104478cqh);
    height: max(100cqh, 55.833333cqw);
    transform: translateX(-66%);
  }

  /* The left pavilion is cropped out on phones; use the rear roof instead. */
  .reflection-roof {
    left: 78%;
    top: 38%;
    width: 15%;
    height: 6%;
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
  }

  .reflection-bridge {
    left: 73%;
    top: 66%;
    width: 16%;
    height: 28%;
  }

  .scene-reflections [data-scene-motion]::before {
    animation-duration: 2.8s;
  }
}