/* Nine 160 px cells per row, six roles. Existing 20 world-unit size and 95% foot anchor remain. */
.avatar[data-city-role] {
  --city-role-idle-x:0%;
  --city-role-step-a-x:12.5%;
  --city-role-step-b-x:25%;
  --city-role-flip:1;
}
.avatar[data-city-role][data-facing=up] {
  --city-role-idle-x:37.5%;
  --city-role-step-a-x:50%;
  --city-role-step-b-x:62.5%;
}
.avatar[data-city-role][data-facing=left],
.avatar[data-city-role][data-facing=right] {
  --city-role-idle-x:75%;
  --city-role-step-a-x:87.5%;
  --city-role-step-b-x:100%;
}
.avatar[data-city-role][data-facing=right] { --city-role-flip:-1; }
.avatar[data-city-role] .person {
  background-image:url('./assets/city-roles.png');
  background-size:900% 600%;
  background-position:var(--city-role-idle-x) var(--city-role-y);
  transform:scaleX(var(--city-role-flip));
  animation:none;
}
.avatar[data-city-role][data-moving=true] .person {
  animation:city-role-walk .4s steps(1,end) infinite;
}
@keyframes city-role-walk {
  0%,100% { background-position-x:var(--city-role-step-a-x); }
  50% { background-position-x:var(--city-role-step-b-x); }
}
@media(prefers-reduced-motion:reduce) {
  .avatar[data-city-role][data-moving=true] .person { animation:none; }
}