/* No JavaScript: the scene is a finished, static drawing. */
#motion-stage .draft-line { stroke-dasharray: none; stroke-dashoffset: 0; }
#motion-stage .screen-trace { opacity: .9; }
#motion-stage .print-head, #motion-stage .coffee-steam { translate: 0 0; }
#motion-stage .coffee-steam { opacity: .4; }
#motion-stage .idea-orbit { opacity: .45; }
#motion-stage .character-ermi, #motion-stage .character-mio { animation: none !important; }

/* These definitions exist only when images are ready and motion is allowed. */
#motion-stage[data-motion-ready="true"] .draft-line {
  stroke-dasharray: 1;
  animation: atelier-draft 2.2s ease-out var(--draft-delay, 0s) 1 both;
}
#motion-stage[data-motion-ready="true"] .screen-trace {
  animation: atelier-screen 1.4s ease-out 1.8s 1 both;
}
#motion-stage[data-motion-ready="true"] .print-head {
  animation: atelier-print 9s ease-in-out 3.2s infinite;
}
#motion-stage[data-motion-ready="true"] .coffee-steam {
  animation: atelier-steam 7s ease-in-out 3.8s infinite;
}
#motion-stage[data-motion-ready="true"] .coffee-steam:nth-of-type(2n) { animation-delay: 4.7s; }
#motion-stage[data-motion-ready="true"] .idea-orbit {
  animation: atelier-idea 12s ease-in-out 4s infinite alternate;
}
#motion-stage:not([data-running="true"]),
#motion-stage:not([data-running="true"]) * { animation-play-state: paused !important; }
#motion-stage[data-running="true"],
#motion-stage[data-running="true"] * { animation-play-state: running; }

@keyframes atelier-draft {
  from { stroke-dashoffset: 1; opacity: .15; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes atelier-screen { from { opacity: .2; } to { opacity: 1; } }
@keyframes atelier-print {
  0%, 18%, 82%, 100% { translate: 0 0; }
  48%, 55% { translate: var(--print-travel-x, 6px) var(--print-travel-y, -3px); }
}
@keyframes atelier-steam {
  0%, 100% { translate: 0 0; opacity: .18; }
  50% { translate: 0 -4px; opacity: .55; }
}
@keyframes atelier-idea { from { opacity: .32; } to { opacity: .58; } }

@media (prefers-reduced-motion: reduce) {
  #motion-stage, #motion-stage * { animation: none !important; transition: none !important; }
  #motion-stage .draft-line { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
  #motion-stage .screen-trace { opacity: .9; }
  #motion-stage .print-head, #motion-stage .coffee-steam { translate: 0 0; }
}