/* Mikin Deploy's loading screen art (the shared layout is /games/shared/host.css):
   the sky and HOTFIX-1 flying, bobbing a pixel (mockups/Loader.dc.html). */

.stage {
  background-image: url("sky.png");
}

.runner {
  position: absolute;
  left: calc(var(--u) * 146);
  top: calc(var(--u) * 66);
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 18);
  overflow: hidden;
  animation: bob 0.8s steps(2) infinite;
}

/* fly_0 and fly_1 are the first two 28x18 frames of the 252x18 ship sheet. */
.fly {
  width: calc(var(--u) * 252);
  height: calc(var(--u) * 18);
  background: url("ship.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: fly 0.13s steps(2) infinite;
}

@keyframes fly {
  to {
    transform: translateX(calc(var(--u) * -56));
  }
}

@keyframes bob {
  50% {
    transform: translateY(var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .runner,
  .fly {
    animation: none;
  }
}