/* 动画样式 - 性能优化版 */

/* 全局性能优化 */
* {
  /* 避免不必要的重排 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 图片和动画元素的硬件加速 */
img, .fade-in, .card-hover, .img-zoom img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* 滚动容器优化 */
.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 减少滚动时的重绘 */
body {
  overflow-x: hidden;
}

/* 淡入动画 - 使用 will-change 优化 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
  will-change: opacity, transform;
}

/* 卡片悬停效果 - 简化 transition */
.card-hover {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.card-hover:hover {
  transform: translateY(-4px);
}

/* 平滑滚动 */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* 图片缩放 - 使用 will-change */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.img-zoom:hover img {
  transform: scale(1.05);
}

/* 移除不必要的动画以提升性能 */

/* 渐变背景动画 - 仅在需要时启用 */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  will-change: background-position;
}

/* 加载状态 */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* 延迟显示类 */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }