/* ============================================================
 * 动效层配套样式（与 js/motion.js 成对出现）
 * ------------------------------------------------------------
 * 这里只放"动效需要、但必须在 CSS 侧解决"的四件事，其余一律交给 GSAP：
 *   ① GSAP 接管后关掉原生 .stagger 入场动画（两套同时改同一属性会打架）
 *   ② 收紧 transition：把 transform / opacity 从过渡里摘出去
 *   ③ 卡片 hover 的阴影与描边（GSAP 只管位移，观感细节交给 CSS 更划算）
 *   ④ toast 的位移出场（它是 HTML 内联样式，覆盖必须 !important）
 *
 * 🔴 全部规则都挂在 html.motion-on 下 —— 这个 class 由 motion.js 在
 *    **确认 GSAP 可用之后**才加。GSAP 没加载时这些规则一条都不生效，
 *    页面保持原来的样子（渐进增强，不会"动效挂了布局也跟着坏"）。
 * ============================================================ */

/* ① 撤掉 CSS 那套错峰入场，交给 GSAP 的 batch + stagger。
      ⚠️ 必须 !important：ui.css 里的 .stagger > * 带 animation 简写，
      同优先级下它后加载反而是它赢（ui.css 在 motion.css 之前，但
      style-v2 / theme-light 都在它后面，顺序不保险）。 */
html.motion-on .stagger > * {
  animation: none !important;
}

/* ② transition 收紧
      -------------------------------------------------------
      原因：style.css 里 .art-item 是 transition: all .2s。
      GSAP 每帧往 transform 写值，浏览器再对每帧做 0.2s 插值 ——
      动画会变成"拖尾"的糊状，位移永远追不上。
      做法：只允许颜色/阴影类走过渡（这些 GSAP 不碰），
      transform 完全交给 GSAP（:active 的缩放因此变成瞬发，反而更跟手）。 */
html.motion-on .art-item,
html.motion-on .cat-item,
html.motion-on .page-item {
  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s !important;
}

/* ③ 悬停观感：GSAP 负责"抬起来"，这里负责"有质感"
      -------------------------------------------------------
      ⚠️ 只在真·指针设备生效：触屏上 :hover 会在点完之后残留（粘滞），
      而且会抢 :active 的按压反馈。 */
@media (hover: hover) {
  html.motion-on .art-item:hover,
  html.motion-on .page-item:hover {
    border-color: var(--brand-line, rgba(99, 102, 241, .28));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  }
  html.motion-on .cat-item:hover {
    background: var(--brand-soft, rgba(99, 102, 241, .10));
  }
  html.motion-on .cat-item:hover .cat-icon,
  html.motion-on .cat-item:hover .cat-icon-text {
    background: var(--brand-soft, rgba(99, 102, 241, .18));
  }
  /* 浅色主题：深色下那层重阴影会糊成一团黑，换成更轻的投影 */
  html.motion-on.theme-light .art-item:hover,
  html.motion-on.theme-light .page-item:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
  }
}

/* ④ Toast：原来只有 opacity 过渡，出现得很"硬"。
      -------------------------------------------------------
      🔴 transform 必须 !important —— #toast 的 transform:translateX(-50%)
      写在 HTML 的 style 属性里，内联样式优先级高于任何外部选择器。
      ⚠️ 但 translateX(-50%) 是水平居中的关键，改的时候必须原样带上，
      只在其后追加 translateY，否则 toast 会偏到屏幕右侧去。 */
html.motion-on #toast {
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, 0, 0, 1) !important;
}
html.motion-on #toast.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* ⑤ 会反复进出的覆盖层提前提层（数量少，值得；
      卡片数量多，一律不加 will-change，否则合成层爆内存） */
html.motion-on .notice-dialog,
html.motion-on #lightbox img {
  will-change: transform, opacity;
}