/* Personagens da pista em pixel art (folhas geradas por scripts/dj-sprites.mjs): 8 quadros × 5 animações,
   cada quadro 40×56. O sprite ocupa a largura de quem o contém e anda quadro a quadro (steps).
   Linhas: 0 parado · 1 pula-pula · 2 passinho · 3 mãos pro alto · 4 DJ.
   Na pista (.is-playing), cada boneco dança a linha do seu data-dance; o DJ fica na linha 4;
   quem reagiu (is-hype) pula de mãos pro alto. Sem música, todo mundo respira e pisca. */
.dj-sprite {
  --row: 0; --dur: 1.9s;
  display: block; width: 100%; aspect-ratio: 40 / 56;
  background: var(--sprite) no-repeat; background-size: 800% 500%;
  background-position: 0 calc(var(--row) * 25%);
  image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated;
  animation: dj-sprite-frames var(--dur) steps(8) infinite var(--phase, 0s);
}
@keyframes dj-sprite-frames { to { background-position-x: calc(800% / 7); } }

.is-playing .dj-char .dj-sprite { --dur: calc(var(--beat, .5s) * 2); }
.is-playing .dj-char[data-dance="1"] .dj-sprite { --row: 1; }
.is-playing .dj-char[data-dance="2"] .dj-sprite { --row: 2; }
.is-playing .dj-char[data-dance="3"] .dj-sprite { --row: 3; }
.is-playing .dj-char.is-dj .dj-sprite { --row: 4; }
.dj-char.is-hype .dj-sprite {
  --row: 3; --dur: .5s;
  animation: dj-sprite-frames var(--dur) steps(8) infinite, dj-sprite-hop .9s cubic-bezier(.3, .7, .4, 1) both;
}
@keyframes dj-sprite-hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 -22%; } 62% { translate: 0 -3%; } 78% { translate: 0 -7%; } }

/* Mítico (nível 20): a aura já vem na arte; aqui ela respira. */
.dj-sprite[data-rarity="Mítico"] { filter: drop-shadow(0 0 6px rgba(180, 107, 255, .55)); animation: dj-sprite-frames var(--dur) steps(8) infinite var(--phase, 0s), dj-sprite-aura 2.4s ease-in-out infinite; }
@keyframes dj-sprite-aura { 50% { filter: drop-shadow(0 0 12px rgba(94, 242, 255, .7)); } }

@media (prefers-reduced-motion: reduce) {
  .dj-sprite, .dj-char.is-hype .dj-sprite, .dj-sprite[data-rarity="Mítico"] { animation: none; }
}