/* ============================================================
   v10 动效层（2026-10-21）
   独立文件、最后加载，不动 components.css 里的旧规则，回滚只要删一行引用。

   补的东西：
   1) .reveal —— 之前只有 JS 加 .in 类，CSS 里根本没定义，错开入场一直是空转；
   2) 卡片悬停金色扫光 + 图片缓推近；
   3) 视图切换 / 详情进入的层级过渡；
   4) 顶部加载条（patch fetch 自动驱动）；
   5) 按钮涟漪、Toast 弹性、导航指示条回弹；
   6) 全站尊重 prefers-reduced-motion。
   ============================================================ */

:root {
  /* 收尾带一点点过冲的曲线，纸面质感不张扬但能感觉到"落位" */
  --ease-spring: cubic-bezier(.22, 1.18, .36, 1);
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);
  --dur-enter:   .52s;
}

/* ---------------- 1. 入场：错开 + 轻微解焦 ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(3px);
  transition:
    opacity   var(--dur-enter) var(--ease-soft),
    transform var(--dur-enter) var(--ease-spring),
    filter    var(--dur-enter) var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* 内容已经就位后就把 will-change 摘掉，别一直占着合成层 */
.reveal.in.settled { will-change: auto; }

/* ---------------- 2. 列表项：金色扫光 ---------------- */
.doc-item { position: relative; overflow: hidden; }
.doc-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 32%, rgba(211, 188, 142, .30) 50%, transparent 68%);
  transform: translateX(-115%);
  transition: transform .72s var(--ease-soft);
  pointer-events: none;
}
.doc-item:hover::after,
.doc-item:focus-visible::after { transform: translateX(115%); }

.doc-item:hover .doc-no,
.doc-item:focus-visible .doc-no { opacity: 1; }
.doc-no { transition: opacity var(--dur-fast) var(--ease-soft); }

/* ---------------- 3. 资源卡：抬升 + 图缓推近 ---------------- */
.res-card { position: relative; overflow: hidden; }
.res-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 34%, rgba(211, 188, 142, .26) 50%, transparent 66%);
  transform: translateX(-115%);
  transition: transform .72s var(--ease-soft);
  pointer-events: none;
}
.res-card:hover::after { transform: translateX(115%); }
.res-card:hover { box-shadow: 0 10px 26px rgba(51, 48, 43, .13); }
.res-thumb img {
  transition: transform .55s var(--ease-spring), opacity .4s var(--ease-soft);
}
.res-card:hover .res-thumb img { transform: scale(1.05); }

/* 引用资源的小卡 */
.ref-card { transition: transform var(--dur-base) var(--ease-spring),
                        border-color var(--dur-fast) var(--ease-soft); }
.ref-card:hover { transform: translateY(-2px); }

/* 图片自己淡入，避免白底闪一下 */
.res-thumb img, .ref-card img, .res-panel img {
  animation: imgIn .45s var(--ease-soft) both;
}
@keyframes imgIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---------------- 4. 视图切换 ---------------- */
.view:not([hidden]) { animation: viewIn .38s var(--ease-spring) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 详情页是从列表"翻出来"的一层，进来得更明显一点 */
#view-detail:not([hidden]) {
  animation: detailIn .42s var(--ease-spring) both;
}
@keyframes detailIn {
  from { opacity: 0; transform: translateY(18px) scale(.994); }
  to   { opacity: 1; transform: none; }
}

/* 工具条在视图进来时稍晚一步，层次感 */
.view:not([hidden]) .toolbar { animation: fadeSlide .46s var(--ease-soft) .06s both; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------- 5. 顶部加载条 ---------------- */
#loadbar {
  position: fixed; top: 0; left: 0; z-index: 80;
  height: 2px; width: 0; opacity: 0;
  background: linear-gradient(90deg, var(--color-gold), var(--color-accent));
  box-shadow: 0 0 8px rgba(165, 116, 31, .45);
  transition: width .34s var(--ease-soft), opacity .3s var(--ease-soft);
  pointer-events: none;
}
#loadbar.on { opacity: 1; }

/* ---------------- 6. 涟漪 ---------------- */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(165, 116, 31, .26);
  transform: scale(0); opacity: .9;
  animation: ripple .58s var(--ease-soft) forwards;
}
@keyframes ripple { to { transform: scale(2.7); opacity: 0; } }

/* ---------------- 7. Toast 弹性 ---------------- */
.toast {
  transition:
    opacity   var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-spring);
}
.toast.on { transform: translate(-50%, 0) scale(1); }
.toast:not(.on) { transform: translate(-50%, 14px) scale(.97); }

/* ---------------- 8. 导航指示条回弹 ---------------- */
#nav-indicator {
  transition:
    left  .42s var(--ease-spring),
    width .42s var(--ease-spring),
    background var(--dur-fast) var(--ease-soft);
}

/* 页签按下有个轻微下沉 */
.tab { transition: color var(--dur-fast) var(--ease-soft),
                   transform var(--dur-fast) var(--ease-spring); }
.tab:active { transform: translateY(1px); }

/* ---------------- 9. 分类项：金线从左侧扫入 ---------------- */
.cat-item { position: relative; overflow: hidden; }
.cat-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--color-accent);
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform .34s var(--ease-spring);
}
.cat-item:hover::before { transform: scaleY(.55); }
.cat-item.is-on::before { transform: scaleY(1); }

/* ---------------- 10. 骨架屏：更柔一点 ---------------- */
.skeleton {
  background: linear-gradient(90deg,
    rgba(51,48,43,.045), rgba(51,48,43,.10), rgba(51,48,43,.045));
  background-size: 220% 100%;
  animation: shimmerSoft 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmerSoft {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ---------------- 11. 弹层：进场带一点缩放 ---------------- */
.modal:not([hidden]) .modal-card { animation: modalIn .34s var(--ease-spring) both; }
.modal:not([hidden]) .modal-mask { animation: maskIn .28s var(--ease-soft) both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- 12. 版本角标 ---------------- */
body::after { content: "v10"; }

/* ---------------- 13. 无障碍：尊重系统减弱动效 ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}