/* ============================================================
 * visual-upgrade.css — 全站视觉一体化升级层 v1.0
 * 色彩能量精油 · 一百零八瓶疗愈系统
 * ------------------------------------------------------------
 * 定位：**纯视觉增强层**，置于所有样式之后加载。
 *   只做：景深 / 高光 / 圆角 / 空间光晕 / 悬停与按压反馈 /
 *         排版秩序 / 字体清晰度 / 焦点可见性 / 统一动效节奏。
 *   不做：改结构、改布局尺寸体系、改任何业务逻辑与文案。
 * 兼容：浅色 / 深色（html[data-theme=dark]）、桌面 / 移动、
 *       prefers-reduced-motion（全部降级为无动画）。
 * 配套：js/visual-motion.js（注入 --mx/--my 聚光变量、氛围层、进度条）
 * ============================================================ */

/* ---------- 1. 立体化设计令牌 ---------- */
:root {
  /* 景深：四级高度（0 平面 → 3 悬浮） */
  --vu-elv0: 0 1px 2px rgba(45, 58, 56, .05);
  --vu-elv1: 0 1px 2px rgba(45, 58, 56, .06), 0 6px 16px rgba(45, 58, 56, .08);
  --vu-elv2: 0 2px 6px rgba(45, 58, 56, .08), 0 14px 32px rgba(45, 58, 56, .13);
  --vu-elv3: 0 6px 14px rgba(45, 58, 56, .12), 0 28px 64px rgba(45, 58, 56, .18);
  /* 表面：顶部柔光（营造受光的球体感）+ 极细内描边 */
  --vu-sheen: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 46%);
  --vu-edge: inset 0 0 0 1px rgba(255, 255, 255, .55);
  --vu-edge-ink: inset 0 0 0 1px rgba(45, 58, 56, .06);
  /* 聚光强度：压到 .34，避免白色叠在正文上冲淡文字（hover 时才出现） */
  --vu-spot: rgba(255, 255, 255, .34);
  --vu-sel: rgba(63, 131, 124, .55);
  --vu-glass: rgba(255, 254, 250, .78);
  --vu-ring: 0 0 0 3px rgba(63, 131, 124, .38);
  --vu-aura-a: rgba(176, 141, 79, .13);
  --vu-aura-b: rgba(63, 131, 124, .12);
  --vu-aura-c: rgba(181, 69, 60, .06);
  --vu-dur: .3s;
  --vu-ease: cubic-bezier(.22, .61, .36, 1);
  --vu-r: 16px;
  --vu-lift: -3px;
}
html[data-theme="dark"] {
  --vu-elv0: 0 1px 2px rgba(0, 0, 0, .35);
  --vu-elv1: 0 2px 6px rgba(0, 0, 0, .42), 0 10px 26px rgba(0, 0, 0, .5);
  --vu-elv2: 0 4px 12px rgba(0, 0, 0, .48), 0 20px 44px rgba(0, 0, 0, .58);
  --vu-elv3: 0 10px 24px rgba(0, 0, 0, .55), 0 34px 70px rgba(0, 0, 0, .66);
  --vu-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 46%);
  --vu-edge: inset 0 0 0 1px rgba(255, 255, 255, .09);
  --vu-edge-ink: inset 0 0 0 1px rgba(255, 255, 255, .07);
  --vu-spot: rgba(255, 255, 255, .10);
  --vu-sel: rgba(116, 188, 176, .60);
  --vu-glass: rgba(45, 42, 51, .74);
  --vu-ring: 0 0 0 3px rgba(116, 188, 176, .45);
  --vu-aura-a: rgba(240, 208, 128, .10);
  --vu-aura-b: rgba(116, 188, 176, .09);
  --vu-aura-c: rgba(212, 103, 93, .05);
}

/* ---------- 2. 空间感：全站氛围光层（fixed，位于所有内容之下） ---------- */
.vu-aura {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 12% 0%, var(--vu-aura-a), transparent 70%),
    radial-gradient(52% 40% at 92% 8%, var(--vu-aura-b), transparent 72%),
    radial-gradient(70% 50% at 50% 108%, var(--vu-aura-c), transparent 76%);
  transition: background .5s var(--vu-ease);
}

/* ---------- 3. 阅读进度：顶部极细的一条光 ---------- */
.vu-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 1600;
  pointer-events: none;
  background: linear-gradient(90deg, var(--teal, #3f837c), var(--gold, #b08d4f));
  box-shadow: 0 0 10px rgba(176, 141, 79, .5);
  transition: width .12s linear, opacity .4s;
  opacity: 0;
}
.vu-progress.on { opacity: 1; }

/* ---------- 4. 排版秩序与字体清晰度 ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 标题：字距与断行更整齐（不影响字号/字重，只改善排版） */
h1, h2, h3, h4,
.section-title, .sh-title, .hero-text, .tb-name {
  letter-spacing: .015em;
  text-wrap: balance;
}
#view p { text-wrap: pretty; }
.section-head { margin-bottom: clamp(14px, 2vw, 20px); }
.section-sub, .lead { line-height: 1.8; }

/* ---------- 5. 统一「表面」：卡片 / 面板 立体化 ---------- */
.card, .oil-card, .today-card, .therapy-card, .focus-card, .chart-card,
.record-item, .confirm-card, .th-card, .q-card, .lnk-card, .recent-card,
.ht-card, .gs-item, .fp-item, .ms-item, .intro-stat, .stat, .info-cell,
.layer-box, .dim-card, .quote-block, .dash-tip, .sel-bar, .filter-bar,
.search-box, .gs-panel, .fp-drawer, .sc-box, .dm-box, .ms-box {
  position: relative;
  border-radius: var(--vu-r);
  background-image: var(--vu-sheen);
  box-shadow: var(--vu-elv1), var(--vu-edge-ink);
  transition: transform var(--vu-dur) var(--vu-ease),
              box-shadow var(--vu-dur) var(--vu-ease),
              border-color var(--vu-dur) var(--vu-ease),
              background-color var(--vu-dur) var(--vu-ease);
}
/* 悬停：抬升 + 加深景深（层叠时压住邻卡） */
.card:hover, .oil-card:hover, .today-card:hover, .therapy-card:hover,
.focus-card:hover, .chart-card:hover, .record-item:hover, .confirm-card:hover,
.th-card:hover, .q-card:hover, .lnk-card:hover, .recent-card:hover,
.ht-card:hover, .gs-item:hover, .fp-item:hover, .ms-item:hover,
.intro-stat:hover, .stat:hover, .info-cell:hover, .layer-box:hover,
.dim-card:hover, .dash-tip:hover {
  transform: translateY(var(--vu-lift));
  box-shadow: var(--vu-elv2), var(--vu-edge);
  z-index: 2;
}
/* 面板类只加景深，不做位移 */
.gs-panel, .fp-drawer, .sc-box, .dm-box, .ms-box {
  box-shadow: var(--vu-elv3), var(--vu-edge);
}

/* ---------- 6. 可交互反馈：指针聚光（变量由 JS 注入） ---------- */
.vu-spot:not(.oil-card):not(.catalog-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), var(--vu-spot), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--vu-ease);
  z-index: 1;
}
.vu-spot:not(.oil-card):not(.catalog-card):hover::after { opacity: 1; }

/* ---------- 7. 状态即反馈：选中 / 激活 / 进行中 ---------- */
.oil-card.selected, .card.on, .chip.on, .btn.on,
.nav-link.active, .fp-tab.on, .gs-item.active {
  box-shadow: var(--vu-elv2), 0 0 0 1px var(--vu-sel);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--teal, #3f837c), transparent);
  opacity: .9;
}
.nav-link { position: relative; }

/* ---------- 8. 按钮：受光立体 + 按压下沉 ---------- */
.btn, .hero-btn, .ld-enter {
  position: relative;
  border-radius: 999px;
  box-shadow: var(--vu-elv1), var(--vu-edge);
  transition: transform .16s var(--vu-ease), box-shadow .22s var(--vu-ease),
              background-color .22s var(--vu-ease), color .22s var(--vu-ease);
}
.btn:hover, .hero-btn:hover, .ld-enter:hover {
  transform: translateY(-2px);
  box-shadow: var(--vu-elv2), var(--vu-edge);
}
.btn:active, .hero-btn:active, .ld-enter:active,
.icon-btn:active, .chip:active, .sh-play:active {
  transform: translateY(1px) scale(.985);
  box-shadow: var(--vu-elv0), var(--vu-edge-ink);
}
.icon-btn {
  border-radius: 50%;
  transition: transform .18s var(--vu-ease), box-shadow .22s var(--vu-ease),
              background-color .22s var(--vu-ease), color .22s var(--vu-ease);
}
.icon-btn:hover {
  box-shadow: var(--vu-elv1), var(--vu-edge);
  transform: translateY(-1px);
}

/* ---------- 9. 导航：毛玻璃 + 悬浮分隔（空间层级最上层） ---------- */
.nav {
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: var(--vu-glass);
  box-shadow: var(--vu-elv1), var(--vu-edge-ink);
  transition: box-shadow .3s var(--vu-ease), background-color .3s var(--vu-ease);
}
.nav.scrolled { box-shadow: var(--vu-elv2), var(--vu-edge-ink); }

/* ---------- 10. 键盘可达：统一焦点环 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--vu-elv1), var(--vu-ring);
}

/* ---------- 11. 视觉连续：视图容器的柔光入场 ---------- */
@keyframes vuRise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
/* 只作用于未声明 data-no-reveal 的容器（超长页禁止整页渐显，否则会被罩成 opacity:0） */
#view > *:not([data-no-reveal]).vu-enter,
#view > *:not([data-no-reveal]) > .vu-enter {
  animation: vuRise .42s var(--vu-ease) both;
}

/* ---------- 12. 移动端：降位移、去聚光，保性能 ---------- */
@media (max-width: 640px), (pointer: coarse) {
  :root { --vu-lift: -2px; }
  .vu-spot::after { display: none; }
  .card:hover, .oil-card:hover, .today-card:hover, .therapy-card:hover,
  .focus-card:hover, .chart-card:hover, .record-item:hover, .confirm-card:hover,
  .th-card:hover, .q-card:hover, .lnk-card:hover, .recent-card:hover,
  .ht-card:hover, .gs-item:hover, .fp-item:hover, .ms-item:hover {
    transform: none;
    box-shadow: var(--vu-elv1), var(--vu-edge-ink);
  }
  .vu-aura { opacity: .7; }
}

/* ---------- 13. 桌面独立应用（PWA 安装后） ---------- */
html.vu-standalone .nav { padding-top: env(safe-area-inset-top); }
html.vu-standalone .vu-progress { top: 0; }

/* ---------- 14. 无障碍：尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .vu-aura, .vu-progress { transition: none; }
  .card, .oil-card, .today-card, .therapy-card, .focus-card, .chart-card,
  .record-item, .confirm-card, .th-card, .q-card, .lnk-card, .recent-card,
  .ht-card, .gs-item, .fp-item, .ms-item, .intro-stat, .stat, .info-cell,
  .layer-box, .dim-card, .quote-block, .dash-tip, .sel-bar, .filter-bar,
  .search-box, .gs-panel, .fp-drawer, .sc-box, .dm-box, .ms-box,
  .btn, .hero-btn, .ld-enter, .icon-btn, .chip {
    transition: none !important;
    animation: none !important;
  }
  .card:hover, .oil-card:hover, .today-card:hover, .therapy-card:hover,
  .focus-card:hover, .chart-card:hover, .record-item:hover {
    transform: none;
  }
}

/* ---------- 15. 打印：升级层全部让位 ---------- */
@media print {
  .vu-aura, .vu-progress { display: none !important; }
}