/* ============================================================
 * motion.css — data-motion 声明式滚动入场动效（M-16 / ADR-06）
 * 初始 opacity:0 + translateY(24px)；.is-visible 以 0.6s ease 过渡到可见。
 * 变体：fade-up（默认，位移淡入）/ fade（纯淡入）/ zoom（缩放淡入）。
 * prefers-reduced-motion 下直接可见，不承载任何信息传达。
 * 依赖 tokens.css
 * ============================================================ */

[data-motion] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

[data-motion="fade"] {
  transform: none;
}

[data-motion="zoom"] {
  transform: scale(0.92);
}

[data-motion].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

/* 三卡与案例卡的交错入场延迟 */
.intro-grid .intro-card:nth-child(2).is-visible,
.case-grid .case-card:nth-child(2).is-visible {
  transition-delay: 0.12s;
}

.intro-grid .intro-card:nth-child(3).is-visible,
.case-grid .case-card:nth-child(3).is-visible {
  transition-delay: 0.24s;
}

/* 降级：用户偏好减少动效时直接可见 */
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}