.card__icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
}

.like-icon .frame {
  opacity: 0;
}

.card__icon-button:not(.is-liked):not(:hover):not(.is-hover-to-liked)
  .frame-default {
  opacity: 1;
}

.like-icon:not(.is-liked):hover .frame-hover-1 {
  animation: hover-stage-1 0.3s forwards;
}
.like-icon:not(.is-liked):hover .frame-hover-2 {
  animation: hover-stage-2 0.3s forwards;
}
.like-icon:not(.is-liked):hover .frame-hover-3 {
  animation: hover-stage-3 0.3s forwards;
}

@keyframes hover-stage-1 {
  0%,
  33.3% {
    opacity: 1;
  }
  33.31%,
  100% {
    opacity: 0;
  }
}
@keyframes hover-stage-2 {
  0%,
  33.3% {
    opacity: 0;
  }
  33.31%,
  66.6% {
    opacity: 1;
  }
  66.61%,
  100% {
    opacity: 0;
  }
}
@keyframes hover-stage-3 {
  0%,
  66.6% {
    opacity: 0;
  }
  66.61%,
  100% {
    opacity: 1;
  } /* Остается на 3-й стадии ховера */
}

.is-liked .frame-like-1 {
  animation: like-stage-1 0.6s forwards;
}
.is-liked .frame-like-2 {
  animation: like-stage-2 0.6s forwards;
}
.is-liked .frame-like-3 {
  animation: like-stage-3 0.6s forwards;
}
.is-liked .frame-like-4 {
  animation: like-stage-4 0.6s forwards;
}
.is-liked .frame-like-5 {
  animation: like-stage-5 0.6s forwards;
}
.is-liked .frame-like-6 {
  animation: like-stage-6 0.6s forwards;
}

.is-liked:active .frame-hover-to-like-3 {
  opacity: 1;
}

.is-liked.is-unliking .frame-like-6 {
  animation: unlike-stage-6 0.3s forwards;
}
.is-liked.is-unliking .frame-like-5 {
  animation: unlike-stage-5 0.3s forwards;
}
.is-liked.is-unliking .frame-like-4 {
  animation: unlike-stage-4 0.3s forwards;
}
.is-liked.is-unliking .frame-like-3 {
  animation: unlike-stage-3 0.3s forwards;
}
.is-liked.is-unliking .frame-like-2 {
  animation: unlike-stage-2 0.3s forwards;
}
.is-liked.is-unliking .frame-like-1 {
  animation: unlike-stage-1 0.3s forwards;
}

@keyframes like-stage-1 {
  0%,
  16.6% {
    opacity: 1;
  }
  16.61%,
  100% {
    opacity: 0;
  }
}
@keyframes like-stage-2 {
  0%,
  16.6% {
    opacity: 0;
  }
  16.61%,
  33.3% {
    opacity: 1;
  }
  33.31%,
  100% {
    opacity: 0;
  }
}
@keyframes like-stage-3 {
  0%,
  33.3% {
    opacity: 0;
  }
  33.31%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@keyframes like-stage-4 {
  0%,
  50% {
    opacity: 0;
  }
  50.01%,
  66.6% {
    opacity: 1;
  }
  66.61%,
  100% {
    opacity: 0;
  }
}
@keyframes like-stage-5 {
  0%,
  66.6% {
    opacity: 0;
  }
  66.61%,
  83.3% {
    opacity: 1;
  }
  83.31%,
  100% {
    opacity: 0;
  }
}
@keyframes like-stage-6 {
  0%,
  83.3% {
    opacity: 0;
  }
  83.31%,
  100% {
    opacity: 1;
  } /* В конце сердце остается закрашенным */
}

@keyframes unlike-stage-6 {
  0%,
  16.6% {
    opacity: 1;
  }
  16.61%,
  100% {
    opacity: 0;
  }
}
@keyframes unlike-stage-5 {
  0%,
  16.6% {
    opacity: 0;
  }
  16.61%,
  33.3% {
    opacity: 1;
  }
  33.31%,
  100% {
    opacity: 0;
  }
}
@keyframes unlike-stage-4 {
  0%,
  33.3% {
    opacity: 0;
  }
  33.31%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@keyframes unlike-stage-3 {
  0%,
  50% {
    opacity: 0;
  }
  50.01%,
  66.6% {
    opacity: 1;
  }
  66.61%,
  100% {
    opacity: 0;
  }
}
@keyframes unlike-stage-2 {
  0%,
  66.6% {
    opacity: 0;
  }
  66.61%,
  83.3% {
    opacity: 1;
  }
  83.31%,
  100% {
    opacity: 0;
  }
}
@keyframes unlike-stage-1 {
  0%,
  83.3% {
    opacity: 0;
  }
  83.31%,
  100% {
    opacity: 1;
  }
}

.is-liked:hover .frame-hover-to-like-1 {
  animation: to-like-stage-1 0.3s forwards;
}
.is-liked:hover .frame-hover-to-like-2 {
  animation: to-like-stage-2 0.3s forwards;
}
.is-liked:hover .frame-hover-to-like-3 {
  animation: to-like-stage-3 0.3s forwards;
}

@keyframes to-like-stage-1 {
  0%,
  33.3% {
    opacity: 1;
  }
  33.31%,
  100% {
    opacity: 0;
  }
}
@keyframes to-like-stage-2 {
  0%,
  33.3% {
    opacity: 0;
  }
  33.31%,
  66.6% {
    opacity: 1;
  }
  66.61%,
  100% {
    opacity: 0;
  }
}
@keyframes to-like-stage-3 {
  0%,
  66.6% {
    opacity: 0;
  }
  66.61%,
  100% {
    opacity: 1;
  }
}