/* ================================
   QVII — Life Hearts (Sprite-based)
   Same selectors; 2× scale, half spin, per-heart star twinkle
   ================================ */

/* Global controls (tweak here) */
:root {
  --heart-frame-size: 28px;   /* size of each source frame */
  --heart-frames: 36;         /* frames across the sheet */
  --spin-base: 50s;            /* 50s full rotation time (25s at half speed) */
  --heart-scale: 1.5;           /* default 2× scale */

  /* Star twinkle knobs */
  --twinkle-duration: 0.5s;   /* speed of the twinkle pulse */
  --twinkle-alpha: 0.5;      /* brightness of the sparkle (0–1) */
  --twinkle-size: 60%;        /* sparkle diameter relative to heart */
}

/* Base heart sprite styling */
.life-heart {
  --sheet-width: calc(var(--heart-frames) * var(--heart-frame-size) * var(--heart-scale));
  width:  calc(var(--heart-frame-size) * var(--heart-scale));
  height: calc(var(--heart-frame-size) * var(--heart-scale));

  display: inline-block;
  vertical-align: middle;
  position: relative;  /* for sparkle overlays */

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  background-repeat: no-repeat;
  background-size:
    calc(var(--heart-frames) * var(--heart-frame-size) * var(--heart-scale))
    calc(var(--heart-frame-size) * var(--heart-scale));

  /* Spin (half the original time) */
  animation-name: heartSpinY;
  animation-duration: calc(var(--spin-base) / 2);
  animation-timing-function: steps(36);
  animation-iteration-count: infinite;
  animation-play-state: running;
}

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

/* Traverse one sheet width */
@keyframes heartSpinY {
  from { background-position: 0 0; }
  to   { background-position: calc(-1 * var(--sheet-width)) 0; }
}

/* Pause control */
.life-heart.is-paused { animation-play-state: paused; }

/* =========================================
   Per-heart STAR TWINKLE (no extra classes)
   - Small radial highlight + cross-flare
   - Each heart animates on its own cadences
   ========================================= */

/* Soft radial “glint” */
.life-heart::after {
  content: "";
  position: absolute;
  pointer-events: none;

  /* size & anchor near top-left third (feels metallic) */
  width:  var(--twinkle-size);
  height: var(--twinkle-size);
  left:   26%;
  top:    18%;

  /* bright core fading outward */
  background:
    radial-gradient(
      circle,
      rgba(255,255,255, var(--twinkle-alpha)) 0%,
      rgba(255,255,255, calc(var(--twinkle-alpha) * 0.65)) 25%,
      rgba(255,255,255, 0) 60%
    );

  mix-blend-mode: screen;  /* metallic pop on modern browsers */
  opacity: 0;
  transform: scale(0.6);
  animation: starTwinkle var(--twinkle-duration) ease-in-out infinite;
}

/* Thin cross-flare to sharpen the sparkle */
.life-heart::before {
  content: "";
  position: absolute;
  pointer-events: none;

  width: calc(var(--twinkle-size) * 0.9);
  height: calc(var(--twinkle-size) * 0.9);
  left:  100%;
  top:   100%;

  background:
    conic-gradient(
      from 45deg,
      rgba(255,255,255,0) 0 10deg,
      rgba(255,255,255, calc(var(--twinkle-alpha) * 0.55)) 10deg 12deg,
      rgba(255,255,255,0) 12deg 78deg,
      rgba(255,255,255, calc(var(--twinkle-alpha) * 0.55)) 78deg 80deg,
      rgba(255,255,255,0) 80deg 360deg
    );
  filter: blur(0.3px);
  mix-blend-mode: screen;

  opacity: 0;
  transform: scale(0.6) rotate(10deg);
  animation: starTwinkle var(--twinkle-duration) ease-in-out infinite;
}

/* Pulse the sparkle in place (no sweeping) */
@keyframes starTwinkle {
  0%, 70%, 100% { opacity: 0; transform: scale(0.6); }
  35%           { opacity: 1; transform: scale(1);   }
}

/* Desynchronize hearts so they don't twinkle in unison */
.life-heart:nth-of-type(3n)      { --twinkle-duration: 2.0s; }
.life-heart:nth-of-type(3n+1)    { --twinkle-duration: 2.6s; }
.life-heart:nth-of-type(3n+2)    { --twinkle-duration: 2.2s; }
.life-heart:nth-of-type(4n)::after,
.life-heart:nth-of-type(4n)::before { animation-delay: .4s; }
.life-heart:nth-of-type(5n)::after,
.life-heart:nth-of-type(5n)::before { animation-delay: .9s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .life-heart { animation: none !important; background-position: 0 0; }
  .life-heart::before, .life-heart::after { animation: none !important; opacity: 0; }
}