/* Опишите в этом файле все keyframes для проекта и стили анимаций иконки Like.

Будьте внимательны! Для корректной работы скриптов на этом сайте нужно, чтобы в HTML некоторые классы были названы особым образом:
✦ like-icon — для svg-иконки анимированного сердца
✦ card__like-button — для кнопки Like рядом с иконкой
✦ card__icon-button — для кнопки, оборачивающей иконку
✦ card__icon-button — для кнопки, оборачивающей иконку
✦ is-liked — для обозначения состояния лайкнутой иконки в виде сердца
✦ button__text — для обозначения текстового элемента внутри кнопки

*/
@keyframes icon-size {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
  }
}

@keyframes sparks {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1; /* искры полностью видны только в середине анимации */
    fill: #ff0000;
  }
  100% {
    opacity: 0;
    fill: #ff0000;
  }
}

/*новое*/
@keyframes heart-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes arrow {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-4px);
  }
}

.like-icon .core,
.like-icon .main-body {
  fill: #fff;
}

.like-icon .contour {
  fill: #000;
}

.like-icon .core,
.like-icon .main-body,
.like-icon .contour {
  transition: fill 0.3s linear;
}

.card__icon-button {
  cursor: pointer;
}

.card__icon-button:focus-visible {
  border: 2px solid currentColor;
  transition: border-color 0.3s ease; /* сокращенное свойство для управления анимацией; 1-е - св которое будет анимироваться; ease - медл быстр бедл*/
}

.card__like-button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.like-icon:hover .core,
.like-icon:hover .main-body,
.like-icon:hover .contour {
  fill: var(--hover-contour, #000);
  transition: fill 0.3s linear;
}

.like-icon:active .core,
.like-icon:active .main-body {
  fill: var(--active-fill, #ff0000);
  transition: fill 0.3s linear;
}

.like-icon:active .contour {
  fill: var(--hover-contour, #000);
  transition: fill 0.3s linear;
}

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

.is-liked .sparks {
  animation: sparks 0.5s ease-in-out;
}

.is-liked .core,
.is-liked .main-body,
.is-liked .contour {
  fill: #ff0000;
  transition: fill 0.3s linear;
}

.like-icon .sparks {
  opacity: 0;
  fill: #ff0000;
}

/*убрала лишний селектор для кнопки сохранения*/
.button:focus-visible {
  box-shadow: 2px 2px 0 currentColor;
  transition: box-shadow 0.3s ease;
}

/*убрала лишний селектор для кнопки сохранения*/
.button__text {
  line-height: 90%;
  font-family: var(--accent-font-family, "PressStart2P"), Arial, sans-serif;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.blend-botton {
  position: relative;
  overflow: hidden;
  background: var(--background-main-color, #fff);
}

.blend-botton__content {
  position: relative;
  z-index: 1;
  color: var(--accent-color, #000); /* начальный цвет текста - чёрный */
  transition: color 0.5s ease-in-out;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.blend-botton::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--accent-color, #000);
  z-index: 0;
  transform: translateX(-100%); /*изначально псевдоэл скрыт за пределами кнопки слева*/
  transition: transform 0.5s ease-in-out; /*плавное появление*/
}

.blend-botton:hover::before {
  transform: translateX(0); /*при наведении псевдоэл возвращ в исходн положение, плавно выезжая слева*/
}

.blend-botton:hover .blend-botton__content {
  color: var(--blend-content-color, #fff); /* цвет текста при наведении */
}

.blend-botton:hover .like-icon .core,
.blend-botton:hover .like-icon .main-body,
.blend-botton:hover .like-icon .contour {
  fill: #fff;
  transition: fill 0.3s linear;
}