/* motion.css — 全站动效层
   ─────────────────────────────────────────────────────────────
   四条设计原则：
   1. 渐进增强 —— 无 JS 时内容完整可见，动效只是"锦上添花"，不是"内容门槛"
   2. 尊重偏好 —— prefers-reduced-motion 下全部降为瞬时（见 base.css 全局规则）
   3. 只动 opacity / transform —— 不触发重排，移动端不掉帧
   4. hover 只给指针设备 —— 触屏不再出现"点完样式粘住"的尴尬
   ───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════
   1. 滚动入场
   .reveal 元素在无 JS 时完全正常显示；
   仅当 JS 给 <html> 加上 .js-reveal 后，才启用「先隐藏 → 入场显示」。
   ─────────────────────────────────────────── */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slower) var(--ease-out-expo),
    transform var(--dur-slower) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* 方向 / 形式变体 */
.js-reveal .reveal--left {
  transform: translateX(-26px);
}
.js-reveal .reveal--right {
  transform: translateX(26px);
}
.js-reveal .reveal--scale {
  transform: scale(0.965);
}
.js-reveal .reveal--fade {
  transform: none;
}
.js-reveal .reveal--intro {
  transform: translateY(28px);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto; /* 入场结束即释放合成层，长列表不吃内存 */
}

/* ═══════════════════════════════════════════
   2. 列表错峰入场
   给容器加 .reveal-group，其直接子级 .reveal 会依次延迟出现。
   （CSS 实现，零 JS 开销；.is-in 规则写在最后以便覆盖延时）
   ─────────────────────────────────────────── */

.js-reveal .reveal-group > .reveal:nth-child(1) {
  --reveal-delay: 0ms;
}
.js-reveal .reveal-group > .reveal:nth-child(2) {
  --reveal-delay: 70ms;
}
.js-reveal .reveal-group > .reveal:nth-child(3) {
  --reveal-delay: 140ms;
}
.js-reveal .reveal-group > .reveal:nth-child(4) {
  --reveal-delay: 210ms;
}
.js-reveal .reveal-group > .reveal:nth-child(5) {
  --reveal-delay: 280ms;
}
.js-reveal .reveal-group > .reveal:nth-child(6) {
  --reveal-delay: 350ms;
}
.js-reveal .reveal-group > .reveal:nth-child(7) {
  --reveal-delay: 420ms;
}
.js-reveal .reveal-group > .reveal:nth-child(n + 8) {
  --reveal-delay: 490ms;
}

/* 入场完毕后清掉错峰延时，避免影响它自身的 hover 过渡 */
.js-reveal .reveal-group > .reveal.is-in {
  transition-delay: 0ms;
}

/* ═══════════════════════════════════════════
   3. 首屏入场（不依赖滚动，页面加载即播）
   作用在容器层，内部按钮的 hover 位移不受影响。
   ─────────────────────────────────────────── */

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js-reveal .hero__inner > *,
.js-reveal .page-hero__inner > *,
.js-reveal .list-hero__inner > * {
  animation: riseIn var(--dur-slower) var(--ease-out-expo) both;
}

.js-reveal .hero__inner > *:nth-child(1),
.js-reveal .page-hero__inner > *:nth-child(1),
.js-reveal .list-hero__inner > *:nth-child(1) {
  animation-delay: 60ms;
}
.js-reveal .hero__inner > *:nth-child(2),
.js-reveal .page-hero__inner > *:nth-child(2),
.js-reveal .list-hero__inner > *:nth-child(2) {
  animation-delay: 150ms;
}
.js-reveal .hero__inner > *:nth-child(3),
.js-reveal .page-hero__inner > *:nth-child(3) {
  animation-delay: 240ms;
}
.js-reveal .hero__inner > *:nth-child(4),
.js-reveal .page-hero__inner > *:nth-child(4) {
  animation-delay: 330ms;
}
.js-reveal .hero__inner > *:nth-child(5),
.js-reveal .page-hero__inner > *:nth-child(5) {
  animation-delay: 420ms;
}
.js-reveal .hero__inner > *:nth-child(n + 6),
.js-reveal .page-hero__inner > *:nth-child(n + 6) {
  animation-delay: 500ms;
}

/* 首屏配图：略微放大淡入，与左侧文字错开 */
.js-reveal .hero__visual,
.js-reveal .page-hero__visual {
  animation: scaleIn calc(var(--dur-slower) + 220ms) var(--ease-out-expo) 220ms both;
}

/* ═══════════════════════════════════════════
   4. 数字滚动（配合 main.js）
   ─────────────────────────────────────────── */

.counting {
  display: inline-block;
  min-width: 1ch;
}

/* ═══════════════════════════════════════════
   5. 交互反馈（仅指针设备 —— 触屏不做 hover）
   ─────────────────────────────────────────── */

/* 卡片浮起：从 -2px / 单层阴影 提升到 -4px / 双层阴影 */
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
  }

  .entry:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .honor-item {
    transition:
      border-color var(--dur) var(--ease),
      transform var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease);
  }

  .honor-item:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }

  /* 链接箭头位移放大，指示性更强 */
  .link-arrow:hover::after {
    transform: translateX(5px);
  }

  /* 主按钮微抬 + 光圈扩散 */
  .btn--cta:hover {
    transform: translateY(-1px);
  }

  .btn--primary:hover {
    transform: translateY(-1px);
  }

  .btn--ghost:hover {
    background: var(--brand-50);
  }

  /* 快速锚点条 */
  .quick-bar a:hover {
    transform: translateY(-1px);
  }

  /* 表格行高亮，长表格更好扫读 */
  .table tbody tr {
    transition: background var(--dur-fast) var(--ease);
  }

  .table tbody tr:hover {
    background: var(--bg-softer);
  }
}

/* 按压反馈：所有设备都生效 */
.btn:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: var(--dur-fast);
}

.quick-bar a:active {
  transform: scale(0.98);
}

/* 入场结束后恢复按钮本身的过渡节奏 */
.card--hover,
.entry,
.honor-item,
.quick-bar a,
.btn {
  transition-timing-function: var(--ease);
}

/* ═══════════════════════════════════════════
   6. 移动端导航遮罩
   ─────────────────────────────────────────── */

@media (max-width: 1199px) {
  body.nav-open {
    overflow: hidden;
  }

  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99; /* 低于 .site-header(100)，高于正文 */
    background: rgba(11, 37, 69, 0.32);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fadeIn var(--dur) var(--ease) both;
  }
}

/* ═══════════════════════════════════════════
   7. 深色区块入场时的一道光
   纯装饰，不做位移，避免长页面入场时视觉噪声过多。
   ─────────────────────────────────────────── */

.js-reveal .section--dark.reveal {
  transform: none;
}

/* ═══════════════════════════════════════════
   8. 回到顶部按钮
   ─────────────────────────────────────────── */

.to-top {
  transform: translateY(10px) scale(0.9);
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    transform var(--dur) var(--ease-spring),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.to-top.is-visible {
  transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .to-top:hover {
    background: var(--brand-50);
    border-color: var(--brand-400);
  }
}