.wanderer {
  position: fixed;

  width: var(--display-width);
  height: var(--display-height);

  background-repeat: no-repeat;
  background-size: var(--sheet-width) var(--display-height);

  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2147483000;
}

.wanderer.movement-hop {
  animation: frogHopFrames var(--step-speed) steps(var(--frames)) forwards;
  animation-play-state: paused;
}

@keyframes frogHopFrames {
  from {
    background-position: 0 0;
  }

  to {
    background-position: calc(-1 * var(--sheet-width)) 0;
  }
}

.wanderer.from-right {
  left: calc(100vw + var(--display-width));

  animation:
    wandererSteps var(--step-speed) steps(var(--frames)) infinite,
    wandererTravelRight var(--travel-speed) linear forwards;
}

.wanderer.from-left {
  left: calc(-1 * var(--display-width) - 40px);
  transform: scaleX(-1);

  animation:
    wandererSteps var(--step-speed) steps(var(--frames)) infinite,
    wandererTravelLeft var(--travel-speed) linear forwards;
}

@keyframes wandererSteps {
  from { background-position: 0 0; }
  to { background-position: calc(-1 * var(--sheet-width)) 0; }
}

@keyframes wandererTravelRight {
  from { left: calc(100vw + var(--display-width)); }
  to { left: calc(-1 * var(--display-width) - 40px); }
}

@keyframes wandererTravelLeft {
  from { left: calc(-1 * var(--display-width) - 40px); }
  to { left: calc(100vw + var(--display-width)); }
}

.wanderer-debug {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9999;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(128,235,255,.35);
  color: rgba(128,235,255,.9);

  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;

  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wanderer {
    display: none;
  }
}