/**
 * 评价动画效果
 * 为评价内容添加动态效果和微交互
 */

/* 渐入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 添加动画到评价元素 */
.evaluation-detail {
  animation: scaleIn 0.4s ease-out forwards;
}

.evaluation-item {
  animation: slideIn 0.3s ease-out forwards;
  animation-fill-mode: both;
}

/* 为列表项添加依次渐入效果 */
.evaluation-item:nth-child(1) { animation-delay: 0.1s; }
.evaluation-item:nth-child(2) { animation-delay: 0.2s; }
.evaluation-item:nth-child(3) { animation-delay: 0.3s; }
.evaluation-item:nth-child(4) { animation-delay: 0.4s; }
.evaluation-item:nth-child(5) { animation-delay: 0.5s; }
.evaluation-item:nth-child(6) { animation-delay: 0.6s; }

/* 添加高亮聚焦效果 */
.evaluation-item:focus-within {
  background: rgba(106, 17, 203, 0.05);
  box-shadow: 0 2px 10px rgba(106, 17, 203, 0.1);
}

/* 为图标添加脉动效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.evaluation-item-title i {
  animation: pulse 2s infinite;
}

.evaluation-item.positive .evaluation-item-title i {
  animation-delay: 0.2s;
}

.evaluation-item.negative .evaluation-item-title i {
  animation-delay: 0.5s;
}

.evaluation-item.suggestion .evaluation-item-title i {
  animation-delay: 0.8s;
}

/* 问题句子高亮效果 */
.problem-sentence-enhanced {
  position: relative;
  overflow: hidden;
}

.problem-sentence-enhanced::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #FF5722, transparent);
  animation: slideInWidth 1.5s ease-out forwards;
}

@keyframes slideInWidth {
  from { width: 0; }
  to { width: 100%; }
}

/* 建议高亮效果 */
.suggestion-enhanced {
  position: relative;
  overflow: hidden;
}

.suggestion-enhanced::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #2196F3, transparent);
  animation: slideInWidth 1.5s ease-out forwards;
  animation-delay: 0.3s;
}

/* 交互状态效果 */
.evaluation-item-content {
  position: relative;
  transition: all 0.3s ease;
}

.evaluation-item-content:hover {
  transform: translateX(3px);
}

/* 评分星星动画 */
@keyframes starPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.rating-stars i {
  display: inline-block;
  animation: starPulse 1.5s infinite;
}

.rating-stars i:nth-child(1) { animation-delay: 0.1s; }
.rating-stars i:nth-child(2) { animation-delay: 0.2s; }
.rating-stars i:nth-child(3) { animation-delay: 0.3s; }
.rating-stars i:nth-child(4) { animation-delay: 0.4s; }
.rating-stars i:nth-child(5) { animation-delay: 0.5s; }

/* 专门针对改进建议的交互效果 */
.suggestion-enhanced {
  cursor: pointer;
  transition: all 0.3s ease;
}

.suggestion-enhanced:hover {
  background-color: rgba(33, 150, 243, 0.12);
  transform: translateX(5px);
}

/* 增加卡片阴影深度的悬停效果 */
.evaluation-detail:hover {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}