/* ======================================// ...省略其他代码... 


// ==== 修改后代码 ====
   文件：assets/css/animations.css
   作用：定义页面元素的动画关键帧与触发类
   包括：淡入上升、滑入等效果，用于 Hero、功能卡片、文字区块等
   所有样式均为标准 CSS，中文为注释说明
   ============================================= */

/* ===== 淡入并向上滑动动画（最常用） ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); /* 初始位置：向下偏移 30px */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 最终位置：回到原位 */
  }
}

/* 为需要触发动画的元素预设初始状态（通常配合 .animated 类动态添加） */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 当元素被添加了 .animated 类时，触发动画（一般由 JS 控制） */
.fade-in-up.animated {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 可选：从左侧淡入动画 ===== */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.animated {
  opacity: 1;
  transform: translateX(0);
}

/* ===== 可选：从右侧淡入动画 ===== */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.fade-in-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* ===== 可选：缩放淡入动画 ===== */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-in-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-scale.animated {
  opacity: 1;
  transform: scale(1);
}

/* ===== 提示：您可以在 HTML 中为元素设置不同的动画类，例如：
     <div class="fade-in-up" style="animation-delay: 0.2s;"></div>
     然后通过 JS 在适当时机为其添加 .animated 类来触发动画。
  ===== */