/* Салют лайка: звёздочки разлетаются, круги расходятся.
   Слой рисуется поверх страницы отдельным узлом в body, поэтому
   переполнение карточки его не режет. Префикс классов — like-burst-.

   Геометрию (углы, дистанции, задержки) считает like-burst.ts и
   кладёт в переменные --dx / --dy / --delay: анимации тут общие,
   разброс — в инлайновых значениях. */

.like-burst {
  /* Палитра салюта живёт тут, а не в токенах: розовый и сиреневый
     в оформлении сайта не участвуют, это цвета одной анимации.
     Скрипт раскидывает их по искрам через --tint. */
  --spark-amber: #c8a85a;
  --spark-gold: #f0b429;
  --spark-lilac: #a98cd9;
  --spark-pink: #ef7fae;
  --spark-yellow: #f7d64a;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: calc(var(--z-toast) + 5);
}

/* Круги: расходятся от центра кнопки и тают */
.like-burst-ring {
  --dur: 620ms;
  --delay: 0ms;
  --size: 44px;
  --to: 1.75;
  animation: like-burst-ring var(--dur) cubic-bezier(0.16, 0.84, 0.44, 1) var(--delay) both;
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  left: 0;
  position: absolute;
  top: 0;
  width: var(--size);
  height: var(--size);
}

/* Заливная вспышка под кругами — короткая, чтобы не спорить с ними */
.like-burst-flash {
  --dur: 420ms;
  --size: 32px;
  animation: like-burst-flash var(--dur) ease-out both;
  background: radial-gradient(circle, var(--accent-primary) 0%, rgb(200 168 90 / 0%) 70%);
  border-radius: 50%;
  left: 0;
  position: absolute;
  top: 0;
  width: var(--size);
  height: var(--size);
}

/* Звёздочки и точки */
.like-burst-spark {
  --dur: 900ms;
  --delay: 0ms;
  --dx: 0px;
  --dy: 0px;
  --size: 12px;
  --spin: 180deg;
  --tint: var(--accent-primary);
  animation: like-burst-fly var(--dur) cubic-bezier(0.22, 0.68, 0.24, 1) var(--delay) both;
  background: var(--tint);
  /* Свечение вокруг искры: без него мелкая точка теряется и на
     светлой карточке, и на тёмной обложке ролика. Именно filter,
     а не box-shadow: тень звезды обрезалась бы её же clip-path.
     Цвет берётся от самой искры, иначе розовая светилась бы золотом. */
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tint) 70%, transparent));
  left: 0;
  position: absolute;
  top: 0;
  width: var(--size);
  height: var(--size);
}

/* Четырёхлучевая звезда — та самая «искра» из старого YouTube */
.like-burst-spark.is-star {
  clip-path: polygon(
    50% 0%, 61% 39%, 100% 50%, 61% 61%,
    50% 100%, 39% 61%, 0% 50%, 39% 39%
  );
}

.like-burst-spark.is-dot {
  border-radius: 50%;
}

@keyframes like-burst-ring {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--to));
  }
}

@keyframes like-burst-flash {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.3);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.9);
  }
}

@keyframes like-burst-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }

  10% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx) * 0.18), calc(-50% + var(--dy) * 0.18)) scale(1.15) rotate(calc(var(--spin) * 0.15));
  }

  65% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.7) rotate(var(--spin));
  }
}

/* Уважаем системную настройку: без движения — вообще без салюта.
   Скрипт тоже выходит раньше (см. likeBurst), это страховка на
   случай, если слой уже успел появиться. */
@media (prefers-reduced-motion: reduce) {
  .like-burst {
    display: none;
  }
}