/* Meowllo sprite runtime — shared by all landing pages.
   A .sprite element plays one horizontal strip from ../assets/sprites.
   JS (sprite.js) sets --sheet and --frames from data-skin / data-anim. */

.sprite {
  --size: 192px;
  --frames: 15;
  --fps: 12;
  --sheet: none;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--size) * var(--frames)) var(--size);
  image-rendering: auto;
  animation: sprite-play calc(var(--frames) / var(--fps) * 1s)
    steps(var(--frames)) infinite;
}

.sprite[data-frames="1"] {
  animation: none;
}

@keyframes sprite-play {
  to {
    background-position-x: calc(var(--size) * var(--frames) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sprite {
    animation: none;
  }
}