/* ============================================================
 * anim-enhance.css
 * 网页交互动画增强（hover 悬浮 + 滚动入场）
 * 独立隔离说明：
 * 1. 全部规则包裹在 @layer anim-enhance 中；项目原有样式表均为
 *    「未分层样式」，根据 CSS 级联规则，未分层样式优先级永远高于
 *    分层样式，因此本文件不可能覆盖任何原有声明，只在原样式未
 *    定义的属性上生效；
 * 2. 类名统一使用 anim-hover-* / anim-scroll-* / anim-in / anim-d*
 *    专属前缀，不引用、不修改任何原有 class；
 * 3. 动效只使用 transform / opacity / box-shadow，不改动布局属性；
 * 4. 初始隐藏态仅在 <html class="anim-js">（由 anim-enhance.js 注入）
 *    下生效，JS 异常或被禁用时内容全部正常显示，不会白屏。
 * ============================================================ */

@layer anim-enhance {

  /* ==========================================================
   * 一、鼠标悬浮 hover 交互
   * 仅在「真实鼠标 + 支持 hover」设备上启用，避免移动端粘滞
   * ========================================================== */
  @media (hover: hover) and (pointer: fine) {

    /* 通用卡片：轻微上浮 + 柔和阴影渐变 */
    .anim-hover-card {
      transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease;
      will-change: transform;
    }
    .anim-hover-card:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
    }

    /* 按钮：上浮放大，按下回弹 */
    .anim-hover-btn {
      transition:
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease;
      will-change: transform;
    }
    .anim-hover-btn:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .anim-hover-btn:active {
      transform: translateY(-1px) scale(0.98);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
    }

    /* 文字链接：轻微右移（用于上一篇/下一篇等） */
    .anim-hover-link {
      transition: transform 0.3s ease;
    }
    .anim-hover-link:hover {
      transform: translateX(5px);
    }
  }

  /* ==========================================================
   * 二、页面滚动入场动效（IntersectionObserver 驱动）
   * 进入视口 -> 增加 .anim-in（淡入 + 滑入）
   * 离开视口 -> 移除 .anim-in（自动重置，下次进入再次播放）
   * ========================================================== */

  /* 初始隐藏态（JS 未接管时不隐藏，保证可用性） */
  html.anim-js .anim-scroll-up,
  html.anim-js .anim-scroll-left,
  html.anim-js .anim-scroll-right,
  html.anim-js .anim-scroll-zoom {
    opacity: 0;
    transition:
      opacity 0.7s ease,
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--anim-delay, 0s);
    will-change: opacity, transform;
  }
  html.anim-js .anim-scroll-up    { transform: translateY(30px); }
  html.anim-js .anim-scroll-left  { transform: translateX(-40px); }
  html.anim-js .anim-scroll-right { transform: translateX(40px); }
  html.anim-js .anim-scroll-zoom  { transform: scale(0.94); }

  /* 入场终态 */
  html.anim-js .anim-scroll-up.anim-in,
  html.anim-js .anim-scroll-left.anim-in,
  html.anim-js .anim-scroll-right.anim-in,
  html.anim-js .anim-scroll-zoom.anim-in {
    opacity: 1;
    transform: none;
  }

  /* 逐个延迟工具类（手动挂在元素上） */
  .anim-d1 { --anim-delay: 0.08s; }
  .anim-d2 { --anim-delay: 0.16s; }
  .anim-d3 { --anim-delay: 0.24s; }
  .anim-d4 { --anim-delay: 0.32s; }
  .anim-d5 { --anim-delay: 0.40s; }
  .anim-d6 { --anim-delay: 0.48s; }
  .anim-d7 { --anim-delay: 0.56s; }
  .anim-d8 { --anim-delay: 0.64s; }

  /* 列表自动错落：给父容器追加 anim-stagger，
     其直接子元素按 8 个一组循环递增延迟（子元素需带 anim-scroll-*） */
  .anim-stagger > *:nth-child(8n + 1) { --anim-delay: 0.05s; }
  .anim-stagger > *:nth-child(8n + 2) { --anim-delay: 0.12s; }
  .anim-stagger > *:nth-child(8n + 3) { --anim-delay: 0.19s; }
  .anim-stagger > *:nth-child(8n + 4) { --anim-delay: 0.26s; }
  .anim-stagger > *:nth-child(8n + 5) { --anim-delay: 0.33s; }
  .anim-stagger > *:nth-child(8n + 6) { --anim-delay: 0.40s; }
  .anim-stagger > *:nth-child(8n + 7) { --anim-delay: 0.47s; }
  .anim-stagger > *:nth-child(8n + 8) { --anim-delay: 0.54s; }

  /* ==========================================================
   * 三、无障碍：尊重系统「减少动态效果」偏好
   * ========================================================== */
  @media (prefers-reduced-motion: reduce) {
    .anim-hover-card,
    .anim-hover-btn,
    .anim-hover-link,
    html.anim-js .anim-scroll-up,
    html.anim-js .anim-scroll-left,
    html.anim-js .anim-scroll-right,
    html.anim-js .anim-scroll-zoom {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
}