/* Keep the approved artwork crop still; motion belongs to the atelier scene. */
.scene .scene-art {
  animation: none;
  transform: scale(1.006);
}

.scene [data-scene-motion] {
  position: absolute;
  display: block;
  pointer-events: none;
  animation-play-state: paused;
}

/* Edge-bound window light stays outside the character's face. */
.scene .atelier-window-light {
  top: 12%;
  right: -2%;
  width: 10%;
  height: 56%;
  background: linear-gradient(110deg, transparent 12%, rgba(255, 255, 255, .65) 47%, rgba(255, 246, 225, .3) 65%, transparent 82%);
  clip-path: polygon(48% 0, 100% 0, 58% 100%, 0 100%);
  transform-origin: right top;
  animation: a16-window-light 4.8s ease-in-out infinite alternate;
}

.scene .atelier-silk-light {
  right: -1%;
  bottom: 12%;
  width: 25%;
  height: 18%;
  background: linear-gradient(155deg, transparent 10%, rgba(166, 18, 40, .12) 32%, rgba(255, 178, 183, .5) 46%, rgba(178, 21, 44, .18) 60%, transparent 82%);
  clip-path: polygon(0 44%, 24% 19%, 53% 36%, 77% 8%, 100% 0, 100% 80%, 71% 60%, 45% 83%, 19% 67%);
  transform-origin: right center;
  animation: a16-silk-light 3.6s ease-in-out infinite alternate;
}

.scene .atelier-floor-reflection {
  right: 4%;
  bottom: 3%;
  width: 29%;
  height: 10%;
  background: linear-gradient(165deg, transparent 25%, rgba(255, 255, 255, .7) 47%, rgba(255, 255, 255, .2) 65%, transparent 80%);
  clip-path: polygon(22% 8%, 100% 0, 79% 88%, 0 100%);
  animation: a16-floor-reflection 4.2s ease-in-out infinite alternate;
}

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;
}

@keyframes a16-window-light {
  from { transform: translate3d(-9px, -7px, 0) rotate(-2deg); opacity: .3; }
  to { transform: translate3d(9px, 10px, 0) rotate(2deg); opacity: .85; }
}

@keyframes a16-silk-light {
  from { transform: translate3d(-8px, 5px, 0) rotate(-2deg); opacity: .4; }
  to { transform: translate3d(8px, -6px, 0) rotate(2deg); opacity: .8; }
}

@keyframes a16-floor-reflection {
  from { transform: translate3d(-12px, 3px, 0); opacity: .3; }
  to { transform: translate3d(12px, -3px, 0); opacity: .75; }
}

@media (max-width: 700px) {
  .scene .atelier-window-light {
    top: 8%;
    right: -3%;
    width: 13%;
    height: 57%;
  }

  .scene .atelier-silk-light {
    right: -2%;
    bottom: 17%;
    width: 34%;
    height: 19%;
  }

  .scene .atelier-floor-reflection {
    right: 6%;
    bottom: 11%;
    width: 39%;
    height: 9%;
  }
}