.hpb-button {
  cursor: pointer;
  position: relative;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
}

.hpb-button img {
  display: block;
  width: 45px;
  height: 45px;
  object-fit: contain;
  transform-origin: center center;
  animation: hpb-pulse 1.9s ease-in-out infinite;
}

.hpb-star {
  position: absolute;
  line-height: 1;
  color: #ffd733;
  pointer-events: none;
  opacity: 0;
  animation: hpb-star-twinkle 1.8s ease-in-out infinite;
}

.hpb-star--1 {
  top: 3px;
  left: -1px;
  font-size: 9px;
  animation-delay: 2.2s;
}

.hpb-star--2 {
  top: 12px;
  left: -3px;
  font-size: 11px;
  animation-delay: 1.25s;
}

.hpb-star--3 {
  bottom: 2px;
  right: 0;
  font-size: 18px;
  animation-delay: 1.9s;
}

.hpb-button:hover img,
.hpb-button:focus-visible img,
.hpb-button:hover .hpb-star,
.hpb-button:focus-visible .hpb-star {
  animation-play-state: paused;
}

.hpb-button:hover img,
.hpb-button:focus-visible img {
  transform: scale(1.04);
}

.hpb-button:focus-visible {
  outline: 2px solid #ffb4ab;
  outline-offset: 2px;
  border-radius: 50%;
}

@keyframes hpb-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes hpb-star-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }

  18% {
    opacity: 1;
    transform: scale(1) rotate(18deg);
  }

  36% {
    opacity: 0;
    transform: scale(0.2) rotate(36deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hpb-button img,
  .hpb-star {
    animation: none;
  }
}