/* =========================
   UDANNA SCROLL HEARTS
   Летающие сердечки при скролле
   Только для ветки "Разговор за чаем"
========================= */

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.ud-scroll-heart {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9997;

  width: var(--ud-scroll-heart-size, 1.1rem);
  height: var(--ud-scroll-heart-size, 1.1rem);

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

  opacity: 0;

  transform:
    translate3d(0, 0, 0)
    scale(0.7);

  animation:
    ud-scroll-heart-float var(--ud-scroll-heart-fly-time, 3s)
    ease-out
    forwards;

  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout style paint;
}

.ud-scroll-heart span {
  display: block;
  width: 100%;
  height: 100%;

  /*
   * Облегчённый неон.
   * Старый сильный drop-shadow и blur могли тормозить слабые телефоны.
   */
  filter:
    drop-shadow(0 0 0.25rem rgba(255, 0, 80, 0.55))
    drop-shadow(0 0 0.5rem rgba(255, 0, 140, 0.28));

  animation:
    ud-scroll-heart-spin var(--ud-scroll-heart-spin-time, 3.2s)
    linear
    forwards;

  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.ud-scroll-heart svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes ud-scroll-heart-float {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 0, 0)
      scale(0.7);
  }

  18% {
    opacity: 0.75;
  }

  42% {
    opacity: 0.55;
    transform:
      translate3d(
        calc(var(--ud-scroll-heart-spread, 0rem) * 0.4),
        -40svh,
        0
      )
      scale(0.95);
  }

  78% {
    opacity: 0.24;
    transform:
      translate3d(
        calc(var(--ud-scroll-heart-spread, 0rem) * 0.85),
        -86svh,
        0
      )
      scale(1.16);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        var(--ud-scroll-heart-spread, 0rem),
        -112svh,
        0
      )
      scale(1.32);
  }
}

@keyframes ud-scroll-heart-spin {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

/* На ПК отключаем полностью */
@media (min-width: 64.0625rem) {
  .ud-scroll-heart {
    display: none !important;
  }
}

/* На мобильном чуть крупнее, но без тяжёлых эффектов */
@media (max-width: 48rem) {
  .ud-scroll-heart {
    width: var(--ud-scroll-heart-size, 1.2rem);
    height: var(--ud-scroll-heart-size, 1.2rem);
  }
}

/* Если у пользователя включено уменьшение анимации */
@media (prefers-reduced-motion: reduce) {
  .ud-scroll-heart {
    display: none !important;
  }
}