/* ============================================================
   animation.css · 入场动效
   ------------------------------------------------------------
   轻微 fade-in + translateY，单次播放。
   顺序：英雄区 → 左栏章节 → 右栏章节，左右交错呼吸。
   打印时由 print.css 关闭；减少动效偏好下静态显示。
   依赖：variables.css（--dur / --ease-out）
   ============================================================ */

/* 关键帧：自下淡入 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 所有标记入场的元素：初始隐藏，播放后停留终态 */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  animation: fadeUp var(--dur) var(--ease-out) forwards;
}

/* 英雄区最先出场 */
.hero { animation-delay: 0.05s; }

/* 左栏章节 stagger：Contact → Education → Skills */
.rail > :nth-child(1) { animation-delay: 0.15s; }
.rail > :nth-child(2) { animation-delay: 0.25s; }
.rail > :nth-child(3) { animation-delay: 0.35s; }

/* 右栏章节 stagger（About含经历 / Projects / Languages）：与左栏交错 */
.main > :nth-child(1) { animation-delay: 0.20s; }
.main > :nth-child(2) { animation-delay: 0.30s; }
.main > :nth-child(3) { animation-delay: 0.40s; }

/* 减少动效偏好：直接显示，避免内容被 opacity:0 锁住 */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}