.character-motion__sprite {
  background-image: var(--atlas);
  background-position: var(--frame-position, 0%) var(--row-position, 0%);
  background-repeat: no-repeat;
  background-size: calc(var(--columns) * 100%) calc(var(--rows) * 100%);
  will-change: transform, background-position;
}

.character-motion__sprite[hidden],
.character-motion__poster[hidden] {
  display: none !important;
}

.character-motion[data-playing='true'] .character-motion__poster { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .character-motion__sprite { display: none; }
  .character-motion__poster { visibility: visible !important; }
}