/* 头像悬停交互效果 - 响应式设计 */

/* 基础头像类的悬停效果 */
.avatar-box:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 不同尺寸头像的悬停效果 */
.avatar-xs:hover,
.avatar-sm:hover,
.avatar-md:hover,
.avatar-lg:hover,
.avatar-xl:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border-color: var(--primary-color) !important;
}

/* 博主头像悬停效果增强 */
.blogger-avatar:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border-color: var(--primary-color) !important;
  filter: brightness(1.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 评论头像悬停效果 */
.comment-avatar:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 用户中心头像悬停效果 */
.avatar-container .avatar-lg:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  border-color: var(--success-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 导航栏头像特殊悬停效果 */
.dropdown-toggle .avatar-md:hover {
  transform: scale(1.15);
  background-color: var(--primary-color) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 登录状态下的首字母头像悬停效果 */
.dropdown-toggle .avatar-md.d-flex:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* 未登录状态的默认头像悬停效果 */
.dropdown-toggle .avatar-md.img:hover {
  border: 2px solid var(--primary-color) !important;
}

/* 响应式调整 - 小屏幕设备 */
@media (max-width: 768px) {
  /* 在小屏幕上调整效果强度 */
  .avatar-md:hover {
    transform: scale(1.08);
  }
  
  .blogger-avatar:hover {
    transform: scale(1.05) rotate(1deg);
  }
}

/* 响应式调整 - 非常小的屏幕设备 */
@media (max-width: 480px) {
  /* 在非常小的屏幕上简化效果 */
  .avatar-md:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }
  
  .blogger-avatar:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
}

/* 动画增强效果 - 使用keyframes */
@keyframes pulse-shadow {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* 为重要头像添加脉冲阴影效果 */
.avatar-lg:hover,
.blogger-avatar:hover {
  animation: pulse-shadow 2s infinite;
}