/* Living fire, smoke and sparks behind the demon, plus the angel inspector. Compositor-friendly: transform and opacity only. */
#stage .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame-flicker var(--d, .8s) ease-in-out var(--l, 0s) infinite alternate; }
@keyframes flame-flicker {
  0% { transform: scaleY(.84) scaleX(.94) skewX(-5deg); }
  50% { transform: scaleY(1.08) scaleX(1.02) skewX(3deg); }
  100% { transform: scaleY(1.16) scaleX(.96) skewX(6deg); }
}
#stage .spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: spark-rise var(--d, 2.4s) cubic-bezier(.2, .6, .4, 1) var(--l, 0s) infinite; }
@keyframes spark-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  60% { opacity: .9; transform: translate(calc(var(--dx, 10px) * .6), -90px) scale(.8); }
  100% { opacity: 0; transform: translate(var(--dx, 10px), -150px) scale(.2); }
}
#stage .smoke { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: smoke-rise var(--d, 5s) ease-out var(--l, 0s) infinite; }
@keyframes smoke-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  25% { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--dx, 14px), -115px) scale(1.8); }
}
/* The inspector hovers and flaps while it is on screen. */
#stage #insBob { transform-box: fill-box; transform-origin: center; animation: ins-bob 2.2s ease-in-out infinite; }
@keyframes ins-bob { 50% { transform: translateY(-3px); } }
#stage .ins-wing { transform-box: fill-box; animation: ins-flap .45s ease-in-out infinite alternate; }
#stage .ins-wl { transform-origin: 100% 50%; }
#stage .ins-wr { transform-origin: 0% 50%; animation-direction: alternate-reverse; }
@keyframes ins-flap { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
/* Baker wanders: smooth travel between rests, with a waddle (body bob and tilt) only while a leg of the walk is in progress. */
#stage #demon { animation: demon-travel 18s ease-in-out infinite; }
#stage #imp { transform-box: fill-box; transform-origin: 50% 100%; animation: demon-waddle 18s ease-in-out infinite; }
@keyframes demon-travel {
  0% { transform: translateX(0px); }
  6% { transform: translateX(0px); }
  22% { transform: translateX(-28px); }
  30% { transform: translateX(-28px); }
  46% { transform: translateX(0px); }
  52% { transform: translateX(0px); }
  68% { transform: translateX(28px); }
  76% { transform: translateX(28px); }
  92% { transform: translateX(0px); }
  100% { transform: translateX(0px); }
}
@keyframes demon-waddle {
  0% { transform: translateY(0px) rotate(0deg); }
  6% { transform: translateY(0px) rotate(0deg); }
  7.6% { transform: translateY(-3.2px) rotate(-2.6deg); }
  9.2% { transform: translateY(0px) rotate(0deg); }
  10.8% { transform: translateY(-3.2px) rotate(2.6deg); }
  12.4% { transform: translateY(0px) rotate(0deg); }
  14% { transform: translateY(-3.2px) rotate(-2.6deg); }
  15.6% { transform: translateY(0px) rotate(0deg); }
  17.2% { transform: translateY(-3.2px) rotate(2.6deg); }
  18.8% { transform: translateY(0px) rotate(0deg); }
  20.4% { transform: translateY(-3.2px) rotate(-2.6deg); }
  22% { transform: translateY(0px) rotate(0deg); }
  30% { transform: translateY(0px) rotate(0deg); }
  31.6% { transform: translateY(-3.2px) rotate(-2.6deg); }
  33.2% { transform: translateY(0px) rotate(0deg); }
  34.8% { transform: translateY(-3.2px) rotate(2.6deg); }
  36.4% { transform: translateY(0px) rotate(0deg); }
  38% { transform: translateY(-3.2px) rotate(-2.6deg); }
  39.6% { transform: translateY(0px) rotate(0deg); }
  41.2% { transform: translateY(-3.2px) rotate(2.6deg); }
  42.8% { transform: translateY(0px) rotate(0deg); }
  44.4% { transform: translateY(-3.2px) rotate(-2.6deg); }
  46% { transform: translateY(0px) rotate(0deg); }
  52% { transform: translateY(0px) rotate(0deg); }
  53.6% { transform: translateY(-3.2px) rotate(-2.6deg); }
  55.2% { transform: translateY(0px) rotate(0deg); }
  56.8% { transform: translateY(-3.2px) rotate(2.6deg); }
  58.4% { transform: translateY(0px) rotate(0deg); }
  60% { transform: translateY(-3.2px) rotate(-2.6deg); }
  61.6% { transform: translateY(0px) rotate(0deg); }
  63.2% { transform: translateY(-3.2px) rotate(2.6deg); }
  64.8% { transform: translateY(0px) rotate(0deg); }
  66.4% { transform: translateY(-3.2px) rotate(-2.6deg); }
  68% { transform: translateY(0px) rotate(0deg); }
  76% { transform: translateY(0px) rotate(0deg); }
  77.6% { transform: translateY(-3.2px) rotate(-2.6deg); }
  79.2% { transform: translateY(0px) rotate(0deg); }
  80.8% { transform: translateY(-3.2px) rotate(2.6deg); }
  82.4% { transform: translateY(0px) rotate(0deg); }
  84% { transform: translateY(-3.2px) rotate(-2.6deg); }
  85.6% { transform: translateY(0px) rotate(0deg); }
  87.2% { transform: translateY(-3.2px) rotate(2.6deg); }
  88.8% { transform: translateY(0px) rotate(0deg); }
  90.4% { transform: translateY(-3.2px) rotate(-2.6deg); }
  92% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.scene-paused #stage #demon, .scene-paused #stage #imp,
.scene-paused #stage .flame, .scene-paused #stage .spark, .scene-paused #stage .smoke,
.scene-paused #stage #insBob, .scene-paused #stage .ins-wing { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #stage .flame, #stage .spark, #stage .smoke, #stage #insBob, #stage .ins-wing, #stage #demon, #stage #imp { animation: none; }
}