@keyframes hvp-favorite-heart-pop {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(0.78);
  }
  58% {
    transform: scale(1.42);
    filter: drop-shadow(0 0 5px #ff3158);
  }
  78% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes hvp-favorite-heart-burst {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  30% {
    opacity: 1;
    transform: scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.7);
  }
}

button.favorite-like-pop {
  animation: hvp-favorite-heart-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

button.favorite-like-pop::after {
  content: "♥";
  grid-area: 1 / 1;
  z-index: 1;
  color: #ff3158;
  font-size: 1.15em;
  pointer-events: none;
  animation: hvp-favorite-heart-burst 620ms ease-out forwards;
}

button.favorite-like-pop svg {
  animation: hvp-favorite-heart-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

button.favorite-like-button[aria-pressed="true"] {
  background: #ff3158;
  color: #fff;
}

#favorite-button[aria-pressed="true"] {
  background: #ff3158;
  color: #fff;
}

#favorite-button[aria-pressed="true"] svg {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  button.favorite-like-pop,
  button.favorite-like-pop::after,
  button.favorite-like-pop svg {
    animation-duration: 1ms;
  }
}