.palace-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

/* Completed buildings stay still when the interface is rendered again. */
.map .site-node.done .sprite {
  animation: none;
}

.map .site-node.working .sprite {
  transform-origin: 50% 90%;
  animation: palace-construction-work 2.8s ease-in-out infinite;
  animation-play-state: paused;
}

.map[data-scene-working="true"] .site-node.working .sprite {
  animation-play-state: running;
}

.map .site-node.completed-now .sprite {
  animation: palace-completion-light 900ms ease-out 1 both;
}

@keyframes palace-construction-work {
  0%, 18%, 30%, 64%, 76%, 100% {
    transform: translate(0, 0);
    filter: saturate(.76) brightness(1);
  }
  21%, 25% { transform: translate(.35px, -.25px); }
  23%, 27% { transform: translate(-.35px, 0); }
  44% { filter: saturate(.88) brightness(1.09); }
  67%, 71% { transform: translate(-.3px, -.25px); }
  69%, 73% { transform: translate(.3px, 0); }
}

@keyframes palace-completion-light {
  0% { filter: brightness(1.04) drop-shadow(0 0 0 rgba(255,222,157,0)); }
  32% { filter: brightness(1.15) drop-shadow(0 0 10px rgba(255,222,157,.6)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,222,157,0)); }
}

.map[data-scene-motion="hidden"] .site-node .sprite {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .palace-scene { display: none; }
  .map .site-node.working .sprite,
  .map .site-node.completed-now .sprite { animation: none; }
}