/* ==========================================================================
   sprite.css — planche d'animation jouée en CSS, sans JavaScript
   La planche est une grille pleine de --cols × --rows images de --fw × --fh
   pixels, lue ligne par ligne, à --fps images par seconde. Exemple :
     <div class="sprite" role="img" aria-label="…"
          style="background-image: url('…/run.webp');
                 --cols: 51; --rows: 3; --fps: 60; --fw: 118; --fh: 97;"></div>

   .sprite--cell : dans un conteneur carré, la planche reprend la place
   qu'avait le personnage dans sa case d'origine (--cell px de côté, recadrée
   à partir de --x, --y). Toutes les animations ont ainsi la même échelle et
   la même ligne de sol.
   ========================================================================== */

.sprite {
  --frames: calc(var(--cols) * var(--rows));
  --duration: calc(var(--frames) / var(--fps) * 1s);

  width: 100%;
  aspect-ratio: var(--fw) / var(--fh);
  background-repeat: no-repeat;
  background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  image-rendering: pixelated; /* pixels nets à l'agrandissement */
  animation:
    sprite-x calc(var(--duration) / var(--rows)) steps(var(--cols)) infinite,
    sprite-y var(--duration) steps(var(--rows)) infinite;
}

/* Avec une image n fois plus large que la boîte, la colonne k se trouve à
   background-position k / (n - 1) × 100 % : on va donc jusqu'à n / (n - 1)
   en n paliers. max() évite la division par zéro pour une seule colonne. */
@keyframes sprite-x {
  from { background-position-x: 0%; }
  to   { background-position-x: calc(100% * var(--cols) / max(var(--cols) - 1, 1)); }
}

@keyframes sprite-y {
  from { background-position-y: 0%; }
  to   { background-position-y: calc(100% * var(--rows) / max(var(--rows) - 1, 1)); }
}

.sprite--cell {
  position: absolute;
  top: calc(var(--y) / var(--cell) * 100%);
  left: calc(var(--x) / var(--cell) * 100%);
  width: calc(var(--fw) / var(--cell) * 100%);
}

/* Moins d'animations : première image, fixe */
@media (prefers-reduced-motion: reduce) {
  .sprite {
    animation: none;
  }
}