/* 通用动画样式 - 所有页面共用 */

/* 滚动触发动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 3D卡片效果 */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-3d:hover {
  transform: rotateY(5deg) rotateX(5deg) scale(1.03) translateZ(10px);
}

/* 按钮波纹效果 */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* 图标悬停动画 */
.icon-hover {
  transition: all 0.3s ease;
}
.icon-hover:hover {
  transform: scale(1.2) rotate(5deg);
  color: #3B82F6;
}

/* 图片缩放动画 */
.img-zoom {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.img-zoom:hover {
  transform: scale(1.1);
}

/* 渐变动画背景 */
.gradient-animated {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}