/* 入场动画样式 */
  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .fade-in.active {
    opacity: 1;
    transform: translateY(0);
  }

  .fade-out {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .fade-out.active {
    opacity: 1;
    transform: translateY(0);
  }

  .zoom-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .zoom-in.active {
    opacity: 1;
    transform: scale(1);
  }

  .zoom-out {
    opacity: 0;
    transform: scale(1.15);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .zoom-out.active {
    opacity: 1;
    transform: scale(1);
  }

  .slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .slide-up.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* 延迟动画 */
  .delay-1 {
    transition-delay: 0.2s;
  }

  .delay-2 {
    transition-delay: 0.4s;
  }

  .delay-3 {
    transition-delay: 0.6s;
  }

  .delay-4 {
    transition-delay: 0.8s;
  }

  /* 滑入动画 */
  .slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
  }

  .slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
  }