/* Base: 32×32 frames, 36 frames wide sheet (32 * 36 = 1152px) */
.heart {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  display: inline-block;
}

/* Animation helpers */
.heart.spin {
  animation: heartSpinY 0.9s steps(36) infinite;
}
.heart.is-paused { animation-play-state: paused; }
.heart.speed-fast { animation-duration: 0.5s; }      /* Very fast spin */
.heart.speed-normal { animation-duration: 0.9s; }    /* Default speed */
.heart.speed-slow { animation-duration: 1.5s; }      /* Slow spin */
.heart.speed-slower { animation-duration: 5.0s; }    /* 5 second spin - nice and calm */
.heart.speed-slowest { animation-duration: 3.0s; }   /* Very slow spin */
.heart.speed-custom { animation-duration: var(--heart-speed, 1.5s); } /* Custom via CSS variable */

/* Variants (swap sheet only) */
.heart.gold   { background-image: url("/assets/heart_sprite_sheets/Heart_spin_y_sheet_gold.png"); }
.heart.silver { background-image: url("/assets/heart_sprite_sheets/Heart_spin_y_sheet_silver.png"); }
.heart.bronze { background-image: url("/assets/heart_sprite_sheets/Heart_spin_y_sheet_bronze.png"); }

/* Keyframes for a horizontal sheet */
@keyframes heartSpinY {
  from { background-position:   0px 0; }
  to   { background-position: -1152px 0; } /* -(32 * 36) */
}

/* Optional: scale without blurring (1.5×, 2×, etc.) */
.heart.scale-2x { width: 64px; height: 64px; background-size: 1152px 32px; }