/* 16 evenly spaced poses in a 4 by 4 atlas. Keep positions discrete:
   blending photographs produces ghost limbs instead of extra motion. */
.maasai-figure {
  width: 435px;
  height: 580px;
  left: 0;
  bottom: 2%;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.maasai-figure.is-walking { animation: none; }
.maasai-sprite {
  width: 100%;
  height: 100%;
  background-image: url('assets/maasai-walk-16.png');
  background-size: 400% 400%;
  background-position: 0 0;
}
.maasai-figure.is-walking .maasai-sprite {
  animation: maasai-human-stride 1.12s steps(1, end) infinite;
}
@keyframes maasai-human-stride {
  0% { background-position: 0% 0%; }
  6.25% { background-position: 33.333333% 0%; }
  12.5% { background-position: 66.666667% 0%; }
  18.75% { background-position: 100% 0%; }
  25% { background-position: 0% 33.333333%; }
  31.25% { background-position: 33.333333% 33.333333%; }
  37.5% { background-position: 66.666667% 33.333333%; }
  43.75% { background-position: 100% 33.333333%; }
  50% { background-position: 0% 66.666667%; }
  56.25% { background-position: 33.333333% 66.666667%; }
  62.5% { background-position: 66.666667% 66.666667%; }
  68.75% { background-position: 100% 66.666667%; }
  75% { background-position: 0% 100%; }
  81.25% { background-position: 33.333333% 100%; }
  87.5% { background-position: 66.666667% 100%; }
  93.75%, 100% { background-position: 100% 100%; }
}
@media(max-width:768px) { .maasai-figure { bottom:28%; } }
@media(prefers-reduced-motion:reduce) { .maasai-stage { display:none!important; } }