/* =========================
   UDANNA LIKES
   Чистый лайк страницы:
   счётчик слева, сердечко справа
========================= */

/* Страховка от горизонтального скролла из-за лайков и вылетающих сердечек */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.ud-like-wrap,
.ud-like-box,
.ud-like-button {
  box-sizing: border-box;
}

.ud-like-wrap {
  width: min(100%, 58rem);
  max-width: 100%;
  margin-inline: auto;

  /* близко к последнему листу */
  margin-top: clamp(0.12rem, 0.45vw, 0.25rem);

  margin-bottom: clamp(1.5rem, 5vw, 3rem);
  padding-inline: clamp(1.2rem, 5vw, 2.6rem);
  overflow-x: clip;

  display: flex;
  justify-content: flex-start;
}

.ud-like-box {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1.2vw, 0.6rem);
}

.ud-like-count {
  min-width: 1.5em;
  text-align: right;

  font-size: clamp(1rem, 2.5vw, 1.15rem);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;

  color: #6f3b3b;

  text-shadow:
    0 0.05rem 0.1rem rgba(255, 255, 255, 0.6),
    0 0.12rem 0.22rem rgba(0, 0, 0, 0.08);
}

.ud-like-button {
  appearance: none;
  -webkit-appearance: none;

  border: 0;
  background: transparent;
  box-shadow: none;

  margin: 0;
  padding: 0.22rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: clamp(2.15rem, 7vw, 2.8rem);
  min-height: clamp(2.15rem, 7vw, 2.8rem);

  /* свой цвет лайка, без золота темы */
  color: #8f4a4a;

  font: inherit;
  line-height: 1;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    color 220ms ease,
    transform 220ms ease,
    filter 220ms ease,
    opacity 220ms ease;
}

.ud-like-button:hover {
  color: #b22222;
  transform: scale(1.1);

  filter:
    drop-shadow(0 0.12rem 0.18rem rgba(255, 255, 255, 0.55))
    drop-shadow(0 0.2rem 0.35rem rgba(0, 0, 0, 0.16));
}

.ud-like-button:active {
  transform: scale(0.92);
}

.ud-like-button:focus-visible {
  outline: 0.14rem solid rgba(198, 40, 40, 0.35);
  outline-offset: 0.18rem;
  border-radius: 999rem;
}

.ud-like-button:disabled {
  pointer-events: none;
}

.ud-like-button.is-loading {
  opacity: 0.68;
  cursor: wait;
}

.ud-like-button.is-liked {
  color: #c62828;

  filter:
    drop-shadow(0 0.12rem 0.2rem rgba(255, 255, 255, 0.55))
    drop-shadow(0 0.18rem 0.32rem rgba(0, 0, 0, 0.14))
    drop-shadow(0 0 0.42rem rgba(198, 40, 40, 0.32));
}

.ud-like-button.is-locked {
  animation: ud-like-locked 420ms ease;
}

.ud-like-icon {
  display: inline-block;
  font-size: clamp(1.55rem, 5.4vw, 2.1rem);
  line-height: 1;
  transform-origin: center;

  text-shadow:
    0 0.05rem 0.08rem rgba(255, 255, 255, 0.7),
    0 0.18rem 0.35rem rgba(0, 0, 0, 0.14);
}

.ud-like-button.is-liked .ud-like-icon,
.ud-like-button.is-bursting .ud-like-icon {
  animation: ud-like-heart-pop 460ms ease;
}

/* Вылетающие сердечки */
.ud-like-fly-heart {
  position: fixed;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1em;
  height: 1em;

  color: #d32f2f;
  font-size: clamp(1.15rem, 4.5vw, 1.85rem);
  line-height: 1;

  pointer-events: none;
  user-select: none;

  opacity: 0;

  filter:
    drop-shadow(0 0.08rem 0.12rem rgba(255, 255, 255, 0.5))
    drop-shadow(0 0.2rem 0.38rem rgba(0, 0, 0, 0.12));

  transform:
    translate(-50%, -50%)
    scale(var(--ud-like-fly-start-scale, 0.45))
    rotate(0deg);

  animation:
    ud-like-fly 7600ms
    linear
    forwards;
}

@keyframes ud-like-heart-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }

  38% {
    transform: scale(1.28) rotate(-5deg);
  }

  68% {
    transform: scale(0.96) rotate(4deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes ud-like-locked {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-0.12rem);
  }

  70% {
    transform: translateX(0.12rem);
  }
}

@keyframes ud-like-fly {
  0% {
    opacity: 0.54;
    transform:
      translate(-50%, -50%)
      scale(var(--ud-like-fly-start-scale, 0.45))
      rotate(0deg);
  }

  6% {
    opacity: 0.62;
  }

  48% {
    opacity: 0.5;
  }

  74% {
    opacity: 0.24;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--ud-like-fly-x, 0rem)),
        calc(-50% - var(--ud-like-fly-y, 70svh))
      )
      scale(var(--ud-like-fly-end-scale, 1.72))
      rotate(var(--ud-like-fly-rotate, 24deg));
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 48rem) {
  .ud-like-wrap {
    width: 100%;
    max-width: 100%;

    /* почти вплотную к последнему листу на мобильном */
    margin-top: clamp(0.12rem, 0.45svh, 0.25rem);

    /* почти без воздуха перед подвалом */
    margin-bottom: clamp(0.2rem, 0.8svh, 0.45rem);

    padding-inline: clamp(1.1rem, 6vw, 1.8rem);
    overflow-x: clip;
  }

  .ud-like-button {
    min-width: clamp(2.35rem, 10vw, 3rem);
    min-height: clamp(2.35rem, 10vw, 3rem);
  }

  .ud-like-icon {
    font-size: clamp(1.65rem, 7vw, 2.15rem);
  }

  .ud-like-fly-heart {
    font-size: clamp(1.45rem, 7vw, 2.2rem);
    --ud-like-fly-start-scale: 0.68 !important;
  }
}