.likes_w {
  position: relative;
}
.likes_w .likes_button {
  display: inline-block;
  min-width: 0.72rem;
  height: 40px;
  line-height: 40px;
  padding-left: 0.16rem;
  padding-right: 0.16rem;
  font-weight: normal;
  text-align: center;
  color: var(--color_muted);
  background-color: var(--ec_bg_light);
  color: var(--color_primary);
  background-color: #2c374c;
  border-radius: 0.32rem;
}
.likes_w .likes_button i {
  position: relative;
  display: inline-block;
  font-size: 16px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.likes_w .likes_button:hover i {
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg); 
}
.likes_w .likes_button.requesting i {
  font-size: 18px;
  transform: rotate(-16deg);
}
.likes_w .likes_button.liked {
  color: var(--color_dark);
  background-color: var(--color_primary);
  background: linear-gradient(-90deg, #00ffed 0%, #f8f9fb 100%);
  box-shadow: 0px 8px 16px rgba(45, 182, 166, 0.16);
}
.likes_w .likes_button .likes_count {
  font-family: num, Helvetica, arial, sans-serif;
}
.likes_w .likes_button .likes_count em {
  font-size: 14px;
}

.likes_w .likes_button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.likes_w .likes_button.liked {
  color: var(--color_dark);
}

.likes_w .likes_button.requesting {
  opacity: 0.7;
  cursor: wait;
}

.likes_w .icon_thumbs_up {
  margin-right: 5px;
}

/* 大拇指弹跳动画 */
@keyframes thumbBounce {
  0% {
    transform: scale(1) translateY(0);
  }

  40% {
    transform: scale(1.2) translateY(-4px);
  }
  80% {
    transform: scale(0.88) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.likes_w .requesting i {
  font-size: 18px;
  transform: rotate(-40deg);
   animation: thumbBounce 0.8s ease-out; 
}

.likes_w .requesting {
 
}

/* 数字动画样式 */

.likes_animations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

/* 单个数字动画 */
.likes_change {
  position: absolute;
  right: 0;
  bottom: 100%;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  animation: float_up 0.8s ease-out forwards;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.likes_change.plus {
  color: #00ffed;
  animation: float_up 0.8s ease-out forwards;
}

.likes_change.minus {
  color: #747d8c;
  animation: float_down 0.8s ease-out forwards;
}

@keyframes float_up {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: translate(0, -10px) scale(1.2);
  }
  100% {
    transform: translate(0, -50px) scale(0.8);
    opacity: 1;
  }
}

@keyframes float_down {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: translate(0, 30px) scale(1.2);
  }
  100% {
    transform: translate(0, 80px) scale(0.8);
    opacity: 1;
  }
}