/*
 * The red figures that wander along the black band beside the ID card.
 * js/red-guys.js builds them and moves them sideways; the hop itself is the
 * same offset-path bounce the two original figures had.
 */

.red-guy {
  position: absolute;
  pointer-events: none;
  offset-rotate: 0deg;
  animation: red-guy-hop 0.5s ease-in-out infinite alternate;
}

.red-guy__art {
  width: 100%;
  height: 100%;
  filter: drop-shadow(rgb(126, 122, 122) -1px 4px 4px);
}

.red-guy__art img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The drawing faces right; walking left mirrors it. */
.red-guy.is-left .red-guy__art {
  transform: scaleX(-1);
}

@keyframes red-guy-hop {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}