/* ===== 滚动动画定义 ===== */

/* 初始隐藏状态 */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  
  /* 显示状态 */
  .animate-on-scroll.animated {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  
  /* 从下方渐显+上移 */
  .animate-fade-up {
    transform: translateY(50px);
  }
  
  /* 从左侧进入 */
  .animate-fade-left {
    transform: translateX(-50px);
  }
  
  /* 从右侧进入 */
  .animate-fade-right {
    transform: translateX(50px);
  }
  
  /* 缩放进入 */
  .animate-zoom-in {
    transform: scale(0.8);
  }
  
  /* 旋转进入（谨慎使用） */
  .animate-rotate-in {
    transform: rotate(-10deg) scale(0.9);
    transform-origin: center;
  }
  
  /* 弹跳效果（需要更长的动画时间） */
  .animate-bounce-up.animated {
    animation: bounceUp 0.8s ease forwards;
  }
  
  @keyframes bounceUp {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }
    60% {
      opacity: 1;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 交错延迟类 */
  .delay-1 { transition-delay: 0.1s; }
  .delay-2 { transition-delay: 0.2s; }
  .delay-3 { transition-delay: 0.3s; }
  .delay-4 { transition-delay: 0.4s; }
  .delay-5 { transition-delay: 0.5s; }
  
  /* 针对游戏卡片的特殊动画 */
  .games-grid .game-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }
  
  .games-grid .game-card.animated {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 为每个卡片设置不同的延迟 */
  .games-grid .game-card:nth-child(1) { transition-delay: 0.1s; }
  .games-grid .game-card:nth-child(2) { transition-delay: 0.2s; }
  .games-grid .game-card:nth-child(3) { transition-delay: 0.3s; }
  
  /* 统计数字的动画 */
  .stat-item {
    transition: all 0.6s ease;
  }
  
  .stat-item.animated .stat-number {
    animation: countUp 1s ease;
  }
  
  @keyframes countUp {
    from {
      opacity: 0.5;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* 移动端优化 */
  @media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
      transition: none;
      opacity: 1;
      transform: none;
    }
  }