/* ===== ThirdHub css/vibrancy.css — 视觉镀金层（v28.3） =====
   在 base/theme/layout 之上做艺术增强：环境氛围光、微交互、进场动效、发光加载环。
   全部尊重 prefers-reduced-motion 与 data-device（watch/narrow 自动减负）。 */

/* ---------- 1. 环境氛围光（静态渐变光斑，零运行开销） ---------- */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52rem 32rem at 12% -6%, rgba(59,91,253,.10), transparent 60%),
    radial-gradient(44rem 30rem at 102% 22%, rgba(147,51,234,.07), transparent 62%),
    radial-gradient(40rem 34rem at 28% 112%, rgba(59,91,253,.06), transparent 60%);
}
body[data-theme="dark"]::before {
  background:
    radial-gradient(52rem 32rem at 12% -6%, rgba(59,91,253,.16), transparent 60%),
    radial-gradient(44rem 30rem at 102% 22%, rgba(147,51,234,.10), transparent 62%),
    radial-gradient(40rem 34rem at 28% 112%, rgba(56,189,248,.07), transparent 60%);
}
#app { position: relative; z-index: 1; }

/* ---------- 2. 微交互：卡片悬浮 / 列表按压 / 焦点环 ---------- */
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease, border-color .3s ease; }
  .card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(10,16,40,.25); border-color: color-mix(in srgb, var(--primary, #4a6cf7) 28%, var(--border, #e5e7eb)); }
  .btn-primary { transition: transform .18s ease, box-shadow .25s ease, filter .25s; }
  .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 18px -6px rgba(59,91,253,.55); }
  #tabbar .tab { transition: transform .18s ease; }
  #tabbar .tab:hover { transform: translateY(-1px); }
}
.btn:focus-visible, .list-item:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary,#4a6cf7) 70%, transparent);
  outline-offset: 2px;
}
.list-item:active, .content-card:active, .shelf-item:active { transform: scale(.985); }

/* ---------- 3. 水波纹（ui-vibrancy.js 注入 .vb-ripple） ---------- */
.vb-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  transform: scale(0); opacity: .45;
  animation: vb-ripple-grow .55s cubic-bezier(.2,.7,.3,1) forwards;
}
body[data-theme="dark"] .vb-ripple { background: radial-gradient(circle, rgba(255,255,255,.32), rgba(255,255,255,0) 70%); }
@keyframes vb-ripple-grow { to { transform: scale(3.4); opacity: 0; } }

/* ---------- 4. 发光加载环 ---------- */
.spinner, .tc-spinner {
  background: conic-gradient(from 0deg, transparent 8%, var(--primary,#4a6cf7) 72%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: vb-spin .8s linear infinite;
}
@keyframes vb-spin { to { transform: rotate(360deg); } }

/* ---------- 5. 弹窗 / 提示 / 下拉进场动效 ---------- */
.modal-mask { animation: vb-fade .18s ease; }
.modal-mask .modal { animation: vb-pop .22s cubic-bezier(.34,1.4,.5,1); }
@keyframes vb-fade { from { opacity: 0; } }
@keyframes vb-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
#toast-root .toast { animation: vb-toast-in .28s cubic-bezier(.2,.8,.3,1); }
@keyframes vb-toast-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.overlay { animation: vb-fade .16s ease; }

/* ---------- 6. 空态 / 图标氛围 ---------- */
.empty-ico, .sch-ico-lg { filter: drop-shadow(0 6px 14px rgba(59,91,253,.28)); }
.content-cover, .shelf-cover, .sch-cover { box-shadow: 0 4px 14px -6px rgba(10,16,40,.35); }
.content-cover img, .shelf-cover img { transition: transform .35s cubic-bezier(.2,.8,.3,1); }
@media (hover:hover) and (pointer:fine) {
  .content-card:hover .content-cover img { transform: scale(1.05); }
}

/* ---------- 7. 滚动条美化 ---------- */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-tertiary,#8a93a6) 35%, transparent); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-tertiary,#8a93a6) 55%, transparent); }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- 8. 粒子画布（ui-vibrancy.js）与减负 ---------- */
#vb-particles {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0; z-index: 0; pointer-events: none;
}
#vb-particles.off { display: none; }

/* 手表 / 窄屏减负：关粒子、去氛围重影 */
html[data-device="watch"] #vb-particles { display: none; }
html[data-device="narrow"] #vb-particles { display: none; }
@media (prefers-reduced-motion: reduce) {
  .card, .btn-primary, #tabbar .tab, .modal-mask .modal, .content-cover img,
  .vb-ripple, .empty-ico, .sch-ico-lg { transition: none !important; animation: none !important; }
  #vb-particles { display: none !important; }
  body::before { display: none; }
}