@keyframes heart-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}

@keyframes sparks-appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.like-icon,
.heart,
.sparks {
  transform-origin: center;
}

.like-icon.is-liked .heart {
  animation: heart-scale 0.3s ease-in 0.1s;
}

.like-icon.is-liked .sparks {
  animation: sparks-appear 0.3s ease-in 0.3s;
}

.contour {
  transition: fill linear 0.1s;
}

.like-icon.is-liked .contour {
  fill: var(--animation-fill-color);
  transition: fill linear 0.3s 0.06s;
}

.core {
  fill: transparent;
  transition: fill linear 0.3s 0.03s;
}

.like-icon:hover .core {
  fill: var(--contour-color);
  transition: fill linear 0.3s;
}

.like-icon:active .core {
  fill: var(--contour-color);
  transition: fill linear 0.3s;
}

.like-icon.is-liked .core {
  fill: var(--animation-fill-color);
  transition: fill linear 0.3s;
}

.main-body {
  fill: transparent;
  transition: fill linear 0.3s;
}

.like-icon:hover .main-body {
  fill: var(--contour-color);
  transition: fill linear 0.3s 0.05s;
}

.like-icon:active .main-body {
  fill: var(--contour-color);
  transition: fill linear 0.3s 0.05s;
}

.like-icon.is-liked .main-body {
  fill: var(--animation-fill-color);
  transition: fill 0.3s linear 0s;
}

/* .like-icon.is-liked .contour {
  fill: var(--animation-fill-color);
  transition: fill linear 0.3s 0.06s;
} */

/*творческий попытки фантазии вместо добавления своего контента*/
/* 
.start {
  animation: fadeIn 1.5s ease-out forwards;
}
.clean {
  animation: cleanSheet 2s ease-in-out forwards;
}
.fear {
  animation: fearPulse 3s ease-in-out infinite;
}
.ideal {
  animation: idealGlow 4s ease-in-out infinite;
}
.strategy1 {
  animation: togetherPulse 3.5s ease-in-out infinite;
}
.strategy2 {
  animation: strategyBlur 5s ease-in-out infinite;
}
.strategy3 {
  animation: hopelessFlicker 4.5s ease-in-out infinite;
}
.final {
  animation: finalFlash 3s ease-in-out 1;
} */

/* .content__img:hover {
  animation-play-state: paused;
  transform: scale(1.02);
  transition: transform 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
} */

/* .content__img:hover {
  animation: none;
  filter: none;
  transition: 0.5s ease;
} */