/* ========================================
   animations.css — 动画效果 & 滚动渐现
   作用：
   1. [data-reveal] — 区块整体滚动渐现（淡入 + 上移）
   2. [data-reveal-stagger] — 子项逐个渐现（依次延迟）
   3. Hero 区入场动画 — 页面加载时标题/描述/按钮逐项淡入
   实际的 .revealed 类由 scroll-reveal.js 在元素进入视口时添加
   ======================================== */

/* ===== 滚动渐现基础 =====
   初始状态：透明 + 向下偏移 24px
   .revealed 状态：完全可见 + 原位
   过渡时间 0.6s，由 JS 通过 IntersectionObserver 触发 */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 子项逐个渐现 =====
   与 data-reveal 类似，但子项之间有递增延迟（0.1s 步进）
   最多支持 12 个子项（用于项目展示页面的 12 张卡片网格）
   适用于卡片网格、步骤流程等需要"依次出现"的场景 */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* 各子项的延迟 — 第1项立即出现，第2项延迟0.1s，以此类推 */
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 0.2s; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 0.3s; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 0.4s; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 0.5s; }
[data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 0.6s; }
[data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: 0.7s; }
[data-reveal-stagger].revealed > *:nth-child(9) { transition-delay: 0.8s; }
[data-reveal-stagger].revealed > *:nth-child(10) { transition-delay: 0.9s; }
[data-reveal-stagger].revealed > *:nth-child(11) { transition-delay: 1.0s; }
[data-reveal-stagger].revealed > *:nth-child(12) { transition-delay: 1.1s; }