.like-effect {
  position: relative;
  /* overflow: hidden; */
}

.like-float-item {
  position: absolute;
  left: var(--like-x);
  top: var(--like-y);
  z-index: 20;
  width: var(--like-size, 40px);
  height: var(--like-size, 40px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55) rotate(0deg);
  will-change: transform, opacity;
  animation: likeFloat var(--like-duration, 1500ms) cubic-bezier(0.16, 0.72, 0.28, 1) forwards;
}

@keyframes likeFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(0deg);
  }

  12% {
    opacity: 1;
    transform:
      translate(calc(-50% + var(--like-dx0)), calc(-50% - 12px))
      scale(var(--like-scale1))
      rotate(var(--like-r0));
  }

  55% {
    opacity: 0.95;
    transform:
      translate(calc(-50% + var(--like-dx1)), calc(-50% - var(--like-rise1)))
      scale(var(--like-scale2))
      rotate(var(--like-r1));
  }

  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--like-dx2)), calc(-50% - var(--like-rise2)))
      scale(0.76)
      rotate(var(--like-r2));
  }
}

/* 用户系统设置“减少动态效果”时，缩短动画距离和时间 */
@media (prefers-reduced-motion: reduce) {
  .like-float-item {
    animation-duration: 700ms;
  }
}