/* ============================================================
 * enhance.css — 视觉增强层 v1.0
 * 色彩能量精油 · 一百零八瓶疗愈系统
 * ------------------------------------------------------------
 * 在 style.css 设计系统之上叠加，保留东方美学基调，增强：
 *  1. 现代中文排版（字体栈 / 字阶 / 字距 / 行高 / 段落节奏）
 *  2. 动态氛围（流动光晕 / 玻璃通透 / 微光呼吸 / 流光标题）
 *  3. 动效体系（转场 / 滚动渐显 / 数字递增 / 按钮涟漪 / 进度条）
 *  4. 功能组件（返回顶部 / 阅读进度 / 收藏徽标 / 移动端优化）
 * 兼容浅色/深色/跟随系统三态；尊重 prefers-reduced-motion。
 * ============================================================ */

/* ---------- 1. 设计令牌增强 ---------- */
:root {
  /* 现代中文排版字体栈（优先无衬线中文屏显字体） */
  --font-cn-sans: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-cn-serif: "STZhongsong", "华文中宋", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  /* 缓动曲线 */
  --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  /* 精细分层阴影（比原 shadow 更细腻的三层结构） */
  --ring: 0 0 0 1px rgba(45, 58, 56, .05), 0 1px 2px rgba(45, 58, 56, .05), 0 10px 28px rgba(63, 90, 86, .09);
  --ring-lg: 0 0 0 1px rgba(45, 58, 56, .04), 0 2px 6px rgba(45, 58, 56, .05), 0 22px 54px rgba(63, 90, 86, .17);
}
html[data-theme="dark"] {
  --ring: 0 0 0 1px rgba(239, 233, 220, .05), 0 1px 2px rgba(0, 0, 0, .32), 0 10px 28px rgba(0, 0, 0, .38);
  --ring-lg: 0 0 0 1px rgba(239, 233, 220, .04), 0 2px 6px rgba(0, 0, 0, .42), 0 22px 54px rgba(0, 0, 0, .55);
}

/* ---------- 2. 全局排版清晰度 ---------- */
body {
  font-family: var(--font-cn-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .012em;
  font-size: 16px;
  line-height: 1.9;
}
/* 中文标点两端对齐、禁则处理（浏览器支持时） */
p, .desc, .lead, .quote-block, .layer-box p, .therapy-card p, .dim-card p, .theory-body p {
  text-align: justify;
  text-justify: inter-ideograph;
  hyphens: auto;
}
/* 标题统一字距与字重节奏 */
h1, h2, h3, h4, .section-title, .hero h1, .month-badge {
  letter-spacing: .04em;
  text-wrap: balance;
}
/* 关键强调词采用衬线优雅呈现 */
.o-name, .hero h1, .section-title, .intro-stat .num, .stat .num,
.ld-enter, .breathe-text, .big {
  font-family: var(--font-cn-serif);
}

/* ---------- 3. 动态氛围背景（流动光晕） ---------- */
body::after {
  content: '';
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 500px at 14% 6%, rgba(63, 131, 124, .055) 0%, transparent 62%),
    radial-gradient(540px 430px at 88% 20%, rgba(201, 168, 106, .065) 0%, transparent 60%),
    radial-gradient(720px 580px at 72% 94%, rgba(176, 58, 46, .045) 0%, transparent 58%);
  animation: ambient-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-theme="dark"] body::after {
  background:
    radial-gradient(60% 50% at 14% 6%, rgba(108, 179, 168, .07) 0%, transparent 62%),
    radial-gradient(50% 43% at 88% 20%, rgba(221, 192, 119, .06) 0%, transparent 60%),
    radial-gradient(70% 55% at 72% 94%, rgba(212, 103, 93, .06) 0%, transparent 58%);
}
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-1.6%, -1.1%, 0) rotate(.5deg) scale(1.045); }
  100% { transform: translate3d(1.3%, .9%, 0) rotate(-.4deg) scale(1.02); }
}

/* ---------- 4. 导航玻璃通透 ---------- */
.nav {
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  transition: box-shadow .35s ease, background .35s ease;
}
.nav.scrolled {
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(45, 58, 56, .09);
}
html[data-theme="dark"] .nav.scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(0, 0, 0, .4); }
.nav-link { letter-spacing: .4px; }

/* ---------- 5. 通用卡片微交互 ---------- */
.card, .today-card, .confirm-card, .th-card, .oil-card, .chart-card, .dim-card,
.therapy-card, .record-item, .intro-stat, .catalog-card {
  transition-timing-function: var(--ease-spring);
}
/* 卡片更细腻的默认阴影 */
.chart-card, .card, .today-card, .confirm-card, .focus-card {
  box-shadow: var(--ring);
}
.chart-card:hover, .card:hover, .today-card:hover, .confirm-card:hover {
  box-shadow: var(--ring-lg);
}

/* ---------- 6. 按钮涟漪 + 微光 ---------- */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .42);
  transform: scale(0);
  animation: ripple-in .6s ease-out forwards;
}
html[data-theme="dark"] .btn .ripple { background: rgba(255, 255, 255, .26); }
.btn.ghost .ripple { background: rgba(176, 58, 46, .18); }
@keyframes ripple-in { to { transform: scale(3); opacity: 0; } }

/* ---------- 7. 视图转场增强 ---------- */
.view {
  animation: view-in-adv .55s var(--ease-smooth) both;
}
@keyframes view-in-adv {
  from { opacity: 0; transform: translateY(16px) scale(.997); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- 8. 滚动渐显（reveal） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease-smooth), transform .75s var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: .06s; }
.reveal[data-reveal-delay="2"] { transition-delay: .12s; }
.reveal[data-reveal-delay="3"] { transition-delay: .18s; }
.reveal[data-reveal-delay="4"] { transition-delay: .24s; }
.reveal[data-reveal-delay="5"] { transition-delay: .30s; }
.reveal[data-reveal-delay="6"] { transition-delay: .36s; }

/* ---------- 9. 数字递增 ---------- */
.num-anim { display: inline-block; will-change: contents; }

/* ---------- 10. 阅读进度条 ---------- */
#read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1000; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold2));
  background-size: 200% 100%;
  animation: progress-shimmer 3.2s linear infinite;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@keyframes progress-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ---------- 11. 返回顶部 ---------- */
#back-top {
  position: fixed; right: 26px; bottom: 30px; z-index: 130;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink); font-size: 18px; cursor: pointer;
  box-shadow: var(--ring-lg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(16px) scale(.88);
  pointer-events: none;
  transition: all .4s var(--ease-spring);
}
#back-top.show { opacity: 1; transform: none; pointer-events: auto; }
#back-top:hover { color: var(--gold); transform: translateY(-3px); box-shadow: var(--ring-lg), 0 0 0 6px rgba(201, 168, 106, .14); }
html[data-theme="dark"] #back-top { border-color: var(--line); }

/* ---------- 12. Hero 光效增强 ---------- */
.hero, .report-hero, .bk-hero { position: relative; }
.hero::before, .report-hero::before, .bk-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(430px 270px at 18% 0%, rgba(255, 255, 255, .5) 0%, transparent 60%),
    radial-gradient(380px 240px at 86% 100%, rgba(201, 168, 106, .28) 0%, transparent 58%);
  animation: hero-shimmer 9s ease-in-out infinite alternate;
}
html[data-theme="dark"] .hero::before, html[data-theme="dark"] .report-hero::before, html[data-theme="dark"] .bk-hero::before {
  background:
    radial-gradient(430px 270px at 18% 0%, rgba(108, 179, 168, .10) 0%, transparent 60%),
    radial-gradient(430px 260px at 86% 100%, rgba(221, 192, 119, .12) 0%, transparent 58%);
}
@keyframes hero-shimmer {
  from { opacity: .65; transform: translateX(-1.2%); }
  to   { opacity: 1; transform: translateX(1.2%); }
}
/* Hero 大标题流光描边 */
.hero h1 {
  background: linear-gradient(120deg, var(--ink) 30%, var(--gold) 50%, var(--ink) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 7s ease-in-out infinite;
}
html[data-theme="dark"] .hero h1 {
  background: linear-gradient(120deg, #f2ede0 30%, var(--gold2) 50%, #f2ede0 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 7s ease-in-out infinite;
}
@keyframes title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero h1 .accent { color: var(--gold); -webkit-text-fill-color: var(--gold); }
/* 瓶子漂浮更细腻 */
.hero-bottles img {
  filter: drop-shadow(0 14px 22px rgba(63, 90, 86, .20));
}

/* ---------- 13. 图鉴卡片增强 ---------- */
/* 陈列背景统一为暖色浅调：如陈列柜灯下，明快舒缓、去压抑感（深浅主题一致） */
.oil-card {
  background: linear-gradient(180deg, #fffdf7 0%, #fdf4e3 100%);
  border-color: rgba(196, 160, 96, .20);
  box-shadow: 0 2px 10px rgba(150, 120, 70, .08);
}
html[data-theme="dark"] .oil-card {
  background: linear-gradient(180deg, #fdf9ee 0%, #f8ecd4 100%);
  border-color: rgba(220, 185, 120, .28);
}
.oil-card .pic {
  background:
    radial-gradient(ellipse 78% 66% at 50% 42%, #fff7e3 0%, #f9eccd 55%, #f2dcab 100%);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(196, 160, 96, .12), inset 0 -18px 26px rgba(190, 150, 90, .12);
}
.oil-card .pic img {
  filter: drop-shadow(0 10px 16px rgba(140, 110, 60, .28));
}
.oil-card .o-colors i {
  width: 18px; height: 18px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(150, 120, 70, .35), 0 2px 5px rgba(0, 0, 0, .15);
}
html[data-theme="dark"] .oil-card .o-colors i { border-color: #fff8ec; }
html[data-theme="dark"] .sel-bar { border-color: rgba(220, 185, 120, .35); }
html[data-theme="dark"] .oil-card .o-name { color: #3a2f1d; }
html[data-theme="dark"] .oil-card .o-sub { color: #6f5c3c; }
html[data-theme="dark"] .oil-card .o-type { color: #fff; }
html[data-theme="dark"] .oil-card .o-fav { color: #fff; }
html[data-theme="dark"] .oil-card.selected { border-color: var(--accent); }
/* 目录卡片文字对比度提升 */
.catalog-card p { color: rgba(255, 255, 255, .85); }
.catalog-card .cc-arrow { color: rgba(255, 255, 255, .55); }
/* 深色模式 Hero 对比度优化 */
html[data-theme="dark"] .hero-eyebrow { color: var(--teal2); }
html[data-theme="dark"] .hero .btn.hero-btn {
  background: rgba(255, 255, 255, .10);
  color: #e9f2d8;
  border-color: rgba(239, 233, 220, .28);
}
html[data-theme="dark"] .hero .btn.hero-btn:hover {
  background: rgba(255, 255, 255, .2);
  color: var(--teal2);
}
.oil-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 2px 4px rgba(45, 58, 56, .05), 0 18px 44px rgba(45, 58, 56, .15);
}
html[data-theme="dark"] .oil-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.45); }
.oil-card .pic { overflow: hidden; }
.oil-card .pic img { transition: transform .5s var(--ease-spring); }
.oil-card:hover .pic img { transform: scale(1.1) rotate(-1deg); }
.oil-card .o-type {
  backdrop-filter: blur(4px);
  background: rgba(42, 47, 56, .6);
  border: 1px solid rgba(255, 255, 255, .14);
}
/* 收藏角标 */
.o-fav {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff;
  background: linear-gradient(135deg, var(--accent), #8e2f26);
  box-shadow: 0 3px 8px rgba(176, 58, 46, .4);
  animation: fav-pop .45s var(--ease-spring);
}
@keyframes fav-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* 收藏按钮激活态 */
.focus-acts .btn.on {
  border-color: var(--accent); color: var(--accent);
  background: rgba(176, 58, 46, .08);
}

/* ---------- 14. 今日能量卡片 ---------- */
.today-card { background: linear-gradient(180deg, var(--card), var(--card2)); }
.today-card:hover { transform: translateY(-5px); box-shadow: var(--ring-lg); }
.today-card .bottle img { transition: transform .5s var(--ease-spring); }
.today-card:hover .bottle img { transform: translateY(-6px) scale(1.04); }

/* ---------- 15. 筛选栏与步骤条 ---------- */
.filter-bar { background: linear-gradient(180deg, var(--card), var(--card2)); }
.chip { transition: all .25s var(--ease-smooth); }
.chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(45, 58, 56, .09); }
.wz-num { transition: all .3s var(--ease-spring); }
.wz-step.on .wz-num { transform: scale(1.1); }
.wz-line {
  position: relative; overflow: hidden;
}
.wz-line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform-origin: 0 50%;
  animation: none;
}

/* ---------- 16. 引语块增强 ---------- */
.quote-block {
  border-left-width: 4px;
  background: linear-gradient(90deg, var(--bg2), var(--card));
  box-shadow: inset 0 0 30px rgba(201, 168, 106, .05);
}

/* ---------- 17. 疗愈师卡片 ---------- */
.th-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--ring); }
.th-avatar { transition: transform .35s var(--ease-spring); }
.th-card:hover .th-avatar { transform: scale(1.08); }

/* 五行之环：画布限定为居中的方形，保证正圆构图不扭曲 */
.culture-stage canvas {
  position: absolute; inset: 0; margin: auto;
  width: min(92%, 480px);
  height: min(92%, 480px);
}
.culture-stage { min-height: 460px; }

/* ---------- 18. 图表容器 ---------- */
.chart-card { transition: transform .3s var(--ease-spring), box-shadow .3s; }
.chart-card:hover { transform: translateY(-2px); }
/* 阴阳消长曲线：画布尺寸克制、文字比例协调 */
#yy-canvas {
  aspect-ratio: 2.15;
  max-width: 720px;
  margin: 8px auto 4px;
}
#yy-canvas + .yy-cap { text-align: center; font-size: 12.5px; color: var(--sub); margin-top: 6px; }

/* ---------- 19. 移动端体验增强 ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; line-height: 1.85; }
  /* 返回顶部在移动端缩小并避免遮挡 */
  #back-top { right: 16px; bottom: 84px; width: 42px; height: 42px; font-size: 16px; }
  /* 移动端底部安全区 */
  main { padding-bottom: 92px; }
  .nav { backdrop-filter: blur(18px) saturate(1.4); }
  .hero h1 { font-size: 28px; letter-spacing: 1px; }
  /* 移动端滚动渐显幅度减小，避免割裂 */
  .reveal { transform: translateY(14px); }
}

/* ---------- 20. 打印优化 ---------- */
@media print {
  body::after, #read-progress, #back-top { display: none !important; }
  .view { animation: none !important; }
}

/* ---------- 21. 无障碍：尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after, .hero::before, .report-hero::before, .bk-hero::before,
  .hero h1, #read-progress, .ripple { animation: none !important; }
  .view { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}