/* ============================================================
   modules-backdrop.css
   原站 zhiweiai.cloud 各页面背景体系 1:1 复刻
   - 全局墨底：body #101917 + site-ink-backdrop（渐变+噪点+压暗）
   - 墨迹漂浮字层：.zw-glyphs（卦象/古籍名漂浮，原站 wj 组件）
   - 工具类页背景：.tool-page-shell（径向+线性渐变+toolgrain 噪点）
   - 太极灵枢页：.lingpan-page + .lingpan-atmosphere（扫描线+辉光+噪点）
   - 日签页：.luzu-daily-page（径向+线性渐变）
   - 吕祖页：.luzu-page（#0e1b14 纯底 + 签纸纸纹）
   - 首页：.home-hero 三层（hero-bg/hero-wash/hero-grain）已由 modules-upgrade.css 提供
   挂载方式：JS 按路由为 body 打 data-page，各背景层通过 body[data-page] 显隐
   ============================================================ */

/* ---------- 全局墨底（body 层） ---------- */
body {
  background-color: #101917;
}

/* ---------- 全局背景层容器（fixed，位于内容之下） ---------- */
.zw-backdrop {
  position: fixed;
  z-index: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  overflow: hidden;
}
.zw-backdrop > div {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}

/* 默认（无页面标记）显示墨底 + 墨迹漂浮字 */
body:not([data-page]) .zw-backdrop .zw-site-ink,
body[data-page="ink"] .zw-backdrop .zw-site-ink {
  opacity: 1;
  visibility: visible;
}

/* 墨迹漂浮字：仅纯墨底页显示（原站 wj 层 fixed z-0，被 tool-shell/日签/灵枢/首页的页面根背景覆盖） */
body:not([data-page]) .zw-backdrop .zw-glyphs,
body[data-page="ink"] .zw-backdrop .zw-glyphs {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   1. site-ink-backdrop 完整版（原站：三层渐变 + 噪点 + 左右压暗）
   ============================================================ */
.zw-site-ink {
  background:
    linear-gradient(180deg, rgba(16,25,23,.12), rgba(16,25,23,.70)),
    radial-gradient(ellipse 88% 68% at 72% 26%, rgba(85,118,106,.20), transparent 62%),
    linear-gradient(145deg, #101917, #172521 52%, #0d1613);
}
.zw-site-ink::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='site-ink-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23site-ink-noise)'/%3E%3C/svg%3E");
}
.zw-site-ink::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(4,8,6,.26), transparent 34%, transparent 76%, rgba(4,8,6,.20));
}

/* ============================================================
   2. 墨迹漂浮字层（原站 wj 组件：25 个随机卦象/古籍名）
   ============================================================ */
.zw-glyphs {
  font-family: var(--font-display, "Noto Serif SC", serif);
}
.zw-glyph {
  position: absolute;
  white-space: nowrap;
  user-select: none;
  will-change: transform, opacity;
  color: #C9A84C;
  font-weight: bold;
  opacity: .04;
}
.zw-glyph.is-symbol {
  color: #E8C766;
  font-weight: normal;
  text-shadow: 0 0 15px rgba(201,168,76,.3);
}
@keyframes glyph-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); opacity: var(--op); }
  25% { transform: translateY(-20px) rotate(calc(var(--rot) + 3deg)); opacity: calc(var(--op) * 1.5); }
  50% { transform: translateY(-10px) rotate(var(--rot)); opacity: var(--op); }
  75% { transform: translateY(-25px) rotate(calc(var(--rot) - 2deg)); opacity: calc(var(--op) * 1.3); }
}
@keyframes glyph-drift {
  0%, 100% { transform: translateX(0) translateY(0) rotate(var(--rot)); }
  33% { transform: translateX(15px) translateY(-15px) rotate(calc(var(--rot) + 5deg)); }
  66% { transform: translateX(-10px) translateY(-25px) rotate(calc(var(--rot) - 3deg)); }
}

/* ============================================================
   3. tool-page-shell（工具类页面背景：八字/工具中心/工具详情）
   body[data-page="tool"]
   ============================================================ */
body[data-page="tool"] .zw-backdrop .zw-tool-shell {
  opacity: 1;
  visibility: visible;
}
.zw-tool-shell {
  background:
    radial-gradient(circle at 76% 8%, rgba(79,107,88,.18), transparent 32%),
    linear-gradient(145deg, #07100d, #0d1712 52%, #09110e);
  isolation: isolate;
}
.zw-tool-shell::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='toolgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23toolgrain)'/%3E%3C/svg%3E");
}

/* ============================================================
   4. 太极灵枢页背景（lingpan-page + lingpan-atmosphere）
   body[data-page="lingpan"]
   ============================================================ */
body[data-page="lingpan"] .zw-backdrop .zw-lingpan {
  opacity: 1;
  visibility: visible;
}
.zw-lingpan {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(67,116,91,.20), transparent 30%),
    linear-gradient(180deg, #07130e, #10231a 54%, #050b08);
  isolation: isolate;
}
/* 氛围层（原站 lingpan-atmosphere：墨绿渐变 + 噪点 + 左右压暗） */
.zw-lingpan .lingpan-atmosphere {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(110,160,122,.17), transparent 27%),
    radial-gradient(circle at 50% 46%, rgba(201,168,76,.14), transparent 44%);
}
.zw-lingpan .lingpan-atmosphere::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(16,20,17,.84), transparent 26%, transparent 74%, rgba(16,20,17,.84));
}
.zw-lingpan .lingpan-atmosphere::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .055;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 灵枢页扫描线 + 金色辉光（原站 lingpan-page :before/:after） */
.zw-lingpan::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(141,231,207,.05) 18%, transparent 19%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 148px, rgba(141,231,207,.028) 149px 150px);
  mix-blend-mode: screen;
}
.zw-lingpan::after {
  content: "";
  position: absolute;
  right: -8%; bottom: -22%; left: -8%;
  height: 54%;
  pointer-events: none;
  background:
    repeating-linear-gradient(4deg, rgba(255,215,135,.09) 0 1px, transparent 1px 28px),
    linear-gradient(105deg, #361e0cf2, #a3642299, #361e0ceb);
  box-shadow: inset 0 28px 70px rgba(0,0,0,.55), 0 -18px 80px rgba(229,168,60,.12);
  transform: perspective(480px) rotateX(63deg) scale(1.28);
  transform-origin: bottom;
  animation: lingpan-spirit-pulse 1.8s ease-in-out infinite;
}
@keyframes lingpan-spirit-pulse {
  0%, 100% { opacity: .55; transform: perspective(480px) rotateX(63deg) scale(1.28); }
  50% { opacity: .95; transform: perspective(480px) rotateX(63deg) scale(1.33); }
}

/* ============================================================
   5. 日签页背景（luzu-daily-page）
   body[data-page="daily"]
   ============================================================ */
body[data-page="daily"] .zw-backdrop .zw-daily {
  opacity: 1;
  visibility: visible;
}
.zw-daily {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(201,168,76,.07), transparent 40%),
    linear-gradient(180deg, #0d1815, #101d18 52%, #080f0c);
}

/* ============================================================
   6. 吕祖页背景（luzu-page：纯底 #0e1b14）
   已由 luzu.js 挂 luzu-page 类，这里补背景
   ============================================================ */
.luzu-page {
  background: #0e1b14;
}

/* ============================================================
   6b. 登录/注册页（原站 auth 用全局 fixed site-ink-backdrop）
   透明化 auth 页自带简化背景，让全局墨底+墨迹漂浮字透出
   ============================================================ */
.auth-page.site-ink-backdrop {
  background: transparent;
}

/* ============================================================
   7. 首页（不显示全局墨底/漂浮字，home-hero 自带三层背景）
   ============================================================ */
body[data-page="home"] .zw-backdrop {
  display: none;
}

/* ============================================================
   8. 各页内容层（位于背景之上，z-index 提升）
   ============================================================ */
#app {
  position: relative;
  z-index: 1;
}
.zw-navbar {
  position: relative;
  z-index: 2;
}
#toast-container {
  position: relative;
  z-index: 3;
}