/**
 * 自定义动画样式
 * 配合 Animate.css 使用
 */

/* 动画基础设置 */
.animate__animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

/* 快速动画 */
.animate__fast {
  animation-duration: 0.5s;
}

/* 慢速动画 */
.animate__slow {
  animation-duration: 1.2s;
}

/* 自定义延迟类 */
.animate__delay-100ms {
  animation-delay: 0.1s;
}
.animate__delay-200ms {
  animation-delay: 0.2s;
}
.animate__delay-300ms {
  animation-delay: 0.3s;
}
.animate__delay-400ms {
  animation-delay: 0.4s;
}
.animate__delay-500ms {
  animation-delay: 0.5s;
}

/* 统计数据动画增强 */
.stat-item {
  transition: all 0.3s ease;
}

.stat-item.animate__animated {
  animation-duration: 0.6s;
}

/* 产品卡片动画增强 */
.product-card.animate__animated {
  animation-duration: 0.7s;
}

/* 案例卡片动画增强 */
.case-card.animate__animated {
  animation-duration: 0.6s;
}

/* 解决方案模块动画增强 */
.solution-module.animate__animated {
  animation-duration: 0.5s;
}

/* 导航菜单动画增强 */
.navbar-menu li.animate__animated {
  animation-duration: 0.4s;
}

/* 滚动时触发的元素初始状态 */
[data-animate] {
  opacity: 0;
  visibility: hidden;
}

/* 特殊动画效果 */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

/* 自定义动画类 */
.custom-slideInLeft {
  animation: slideInFromLeft 0.8s ease-out forwards;
}

.custom-slideInRight {
  animation: slideInFromRight 0.8s ease-out forwards;
}

.custom-scaleIn {
  animation: scaleIn 0.6s ease-out forwards;
}

/* 响应式动画调整 */
@media (max-width: 1000px) {
  .animate__animated {
    animation-duration: 0.6s;
  }

  /* 移动端减少动画延迟 */
  .animate__delay-100ms {
    animation-delay: 0.05s;
  }
  .animate__delay-200ms {
    animation-delay: 0.1s;
  }
  .animate__delay-300ms {
    animation-delay: 0.15s;
  }
  .animate__delay-400ms {
    animation-delay: 0.2s;
  }
  .animate__delay-500ms {
    animation-delay: 0.25s;
  }
}

/* 减少动画效果的设置（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
