/* The SVG drifts as before; an inner group gives the heart its own pulse. */
.heart-button svg { transition: filter 2.8s cubic-bezier(.22,.61,.36,1); }
.heart-button .heart-pulse {
  transform-box: view-box;
  transform-origin: 50% 52%;
  animation: heart-rest-beat 4.8s ease-in-out infinite;
}
.heart-button.is-beating .heart-pulse {
  animation: heart-touch-beat 2.6s cubic-bezier(.33,0,.3,1) 2;
}
@keyframes heart-rest-beat {
  0%, 42%, 100% { transform: translateY(0) scale(1); }
  12% { transform: translateY(-2px) scale(1.025,1.018); }
  21% { transform: translateY(0) scale(.997,1.003); }
  30% { transform: translateY(-1px) scale(1.017,1.012); }
}
@keyframes heart-touch-beat {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
  13% { transform: translate(-3px,-9px) rotate(-1.5deg) scale(1.085,1.055); }
  25% { transform: translate(1px,2px) rotate(.5deg) scale(.985,1.008); }
  38% { transform: translate(4px,-6px) rotate(1deg) scale(1.055,1.04); }
  55% { transform: translate(1px,1px) rotate(.2deg) scale(.998,1.004); }
  76% { transform: translate(0,-2px) rotate(0deg) scale(1.008); }
}
.motion-paused .heart-button .heart-pulse { animation: none !important; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .heart-button .heart-pulse { animation: none !important; transform: none; }
  .heart-button svg { transition: filter .3s ease; }
}