/* ==========================================================================
   动效增强层 · duyuuu.com
   ==========================================================================
   目标：在现有玻璃拟态风格上「优上加优」，不是改造。
   手段：全部挂在真实存在的类名上，绝不引入新的视觉语言。

   设计令牌全部取自你站点自身的实际取值（从线上 CSS 抓取）：
     主强调   #00a5ef  天蓝
     次强调   #625fff  靛蓝
     辅助     #00bb7f  青绿
     玻璃     blur(16px) saturate(145%)
     圆角     24px / 1.75rem
     缓动     cubic-bezier(.16,1,.3,1)

   三条硬约束，写在最前面：
   1. 只动 transform 与 opacity —— 不碰 width/height/top/left，避免重排掉帧。
   2. 默认不隐藏任何内容 —— 隐藏态由 JS 给 <html> 加 [data-motion="ready"] 后才生效。
      这样脚本失败 / 被拦截时，页面完整可读，不会变成白屏。
   3. 全程尊重 prefers-reduced-motion，并可用 ?motion=off 一键关闭。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 令牌
   -------------------------------------------------------------------------- */
:root {
  --mo-accent: #00a5ef;
  --mo-accent-2: #625fff;
  --mo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mo-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --mo-dur-fast: 0.18s;
  --mo-dur: 0.5s;
  --mo-dur-slow: 0.72s;
  --mo-lift: 14px;
}

/* --------------------------------------------------------------------------
   1. 滚动入场
   --------------------------------------------------------------------------
   只在 JS 就绪时隐藏（[data-motion="ready"]）。这是与常见实现最重要的差别：
   多数库直接写 opacity:0，脚本一挂整页就空。这里反过来，
   先保证有内容，再由 JS 优雅地补上入场。
   -------------------------------------------------------------------------- */
[data-motion="ready"] .mo-reveal {
  opacity: 0;
  transform: translate3d(0, var(--mo-lift), 0);
  will-change: opacity, transform;
}

[data-motion="ready"] .mo-reveal.mo-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--mo-dur) var(--mo-ease),
    transform var(--mo-dur) var(--mo-ease);
  /* 动画结束后释放合成层，避免大量图层常驻显存 */
  transition-delay: var(--mo-delay, 0s);
}

/* 首个区块位移更小：首屏不该有明显的「跳一下」 */
[data-motion="ready"] .mo-reveal.mo-first {
  --mo-lift: 8px;
}

/* --------------------------------------------------------------------------
   2. 按压反馈 —— 已重做（2026-10-03）
   --------------------------------------------------------------------------
   上一版用纯 CSS `:active` 做触屏缩放，实测有问题：

     `:active` 在手指「划过」元素时也会触发。手机上滚动页面时，
     手指必然划过一串卡片，于是它们挨个缩一下 —— 你说的
     「划过去太快了、再跑」就是这个。

   `:active` 无法区分「按住」和「划过」，纯 CSS 做不到。
   所以触屏改为 JS 判定（见 motion.js 的 initTapFeedback）：
     按下后位移超过 10px 或超过 250ms 未抬手，即判为滚动/长按，取消反馈。

   桌面端保留 hover 上浮 —— 鼠标没有「划过触发 :active」的问题。
   -------------------------------------------------------------------------- */
.mo-tap {
  /* 触屏：transform 只由 JS 添加的 .mo-pressing 类驱动 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 仅在 JS 确认是「真按下」后才收缩 */
.mo-tap.mo-pressing {
  transform: scale(0.972);
  transition: transform 0.12s var(--mo-ease-soft);
}

.mo-tap.mo-pressing-released {
  transform: scale(1);
  transition: transform 0.22s var(--mo-ease);
}

/* 桌面端：轻微上浮 */
@media (hover: hover) and (pointer: fine) {
  .mo-tap {
    transition: transform 0.22s var(--mo-ease);
  }
  .mo-tap:hover {
    transform: translateY(-2px);
  }
  .mo-tap:active {
    transform: translateY(0) scale(0.99);
  }
}

/* --------------------------------------------------------------------------
   3. 玻璃高光 —— 已移除（2026-10-03）
   --------------------------------------------------------------------------
   曾经给玻璃卡片加过一道 hover/tap 扫光。已删除，原因是它有真实副作用：

   为了让扫光不溢出圆角，我给卡片加了 overflow: hidden，并加了
   isolation: isolate 防止层叠混乱。实测这两条会破坏原有布局：

     · clippedBySheen: 10 —— 裁剪了你原有的 10 个子元素
       （如卡片内 animate-cursor 打字光标，横向溢出 92px 被切掉）
     · isolation: isolate 创建新的层叠上下文，把卡片内高 z-index
       的子元素困在该层内，无法盖住外部元素

   这类「往别人容器上加属性」的美化是最危险的一种改动 ——
   卡片的 overflow 与 stacking 原本由你的布局掌控，不该被外部样式改写。

   教训：注入式样式只应改「自己的东西」，绝不改宿主的布局属性。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. 导航栏滚动收起
   --------------------------------------------------------------------------
   移动端最实用的一条：向下滚动时收起导航，向上滚动立即出现。
   单这一项就还给手机 64px 屏幕高度。
   -------------------------------------------------------------------------- */
.mo-nav {
  transition:
    transform 0.36s var(--mo-ease),
    box-shadow 0.36s var(--mo-ease);
  will-change: transform;
}

.mo-nav.mo-nav-hidden {
  transform: translate3d(0, -100%, 0);
}

/* 收起时补一道底部投影，让内容与导航的交界更清楚 */
.mo-nav.mo-nav-scrolled {
  box-shadow: 0 8px 30px rgba(2, 8, 23, 0.28);
}

/* --------------------------------------------------------------------------
   4b. 图片入场 —— 未启用
   --------------------------------------------------------------------------
   实测你站点的 10 张图全部是 28–56px 的头像与缩略图，
   这个尺寸做缩放入场看不出效果，只多占合成层。
   父级区块的位移淡入已经覆盖了它们，故不单独处理。
   相关代码与样式均已移除，不留死规则。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. 统计数字
   --------------------------------------------------------------------------
   等宽数字，避免滚动过程中整行宽度抖动。
   -------------------------------------------------------------------------- */
.mo-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* --------------------------------------------------------------------------
   7. 路由切换：内容轻微淡入
   --------------------------------------------------------------------------
   比整页过渡克制得多，只做一次 240ms 的淡入，不位移，
   避免与 Next 自身的渲染抢时间。
   -------------------------------------------------------------------------- */
.mo-route-enter {
  animation: mo-route-fade 0.24s var(--mo-ease-soft) both;
}

@keyframes mo-route-fade {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   8. 播放条呼吸 —— 已移除（2026-10-03）
   --------------------------------------------------------------------------
   原计划给播放器容器加一层 4.2s 的 box-shadow 呼吸，与已有的
   music-equalizer-bounce 叠加。

   删除原因有二：
     1. JS 里从未添加过 .mo-breathe 类（实测 grep add('mo-breathe') = 0），
        是一段永远不会生效的死代码。
     2. box-shadow 动画会持续触发 paint，移动端长期开销明显 ——
        为了一个几乎看不出的效果不值得。

   你原有的 music-equalizer-bounce 本身已经足够表达"正在播放"。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. 降级：尊重系统设置
   --------------------------------------------------------------------------
   不是可选项。前庭功能障碍者会因位移产生真实眩晕。
   策略：移除位移动画，保留透明度（否则界面像坏了）。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-motion="ready"] .mo-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mo-nav {
    transition: box-shadow 0.2s ease;
  }
  .mo-nav.mo-nav-hidden {
    transform: none;
  }

  .mo-route-enter {
    animation: mo-route-fade-reduced 0.2s ease both;
  }

  @keyframes mo-route-fade-reduced {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* 触屏与桌面的位移反馈一并去掉，只留透明度变化 */
  .mo-tap:active,
  .mo-tap:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. 总开关
   --------------------------------------------------------------------------
   给 <html> 设 data-motion="off" 或访问 ?motion=off 即整体关闭，无需改代码。
   上线后若发现异常，这是最快的止血手段。
   -------------------------------------------------------------------------- */
[data-motion="off"] .mo-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
[data-motion="off"] .mo-nav.mo-nav-hidden {
  transform: none !important;
}
[data-motion="off"] .mo-tap.mo-pressing,
[data-motion="off"] .mo-tap.mo-pressing-released,
[data-motion="off"] .mo-tap:active,
[data-motion="off"] .mo-tap:hover {
  transform: none !important;
}