/* ============================================================
   通玄 TONGXUAN · 皮肤「袖中天」 theme-xiu.css
   袖里乾坤 —— 玄紫道袍一扫，扫出水墨晨光的仙道人间
   （所有覆盖均限定在 [data-theme="xiu"]，默认「观星」皮肤零影响）
   ============================================================ */

/* ================================================
   〇、右下角皮肤切换钮（两套皮肤通用）
   ================================================ */
.skin-switch {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 1500;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: rgba(13, 20, 38, 0.78);
  border: 1px solid rgba(212, 175, 106, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(5, 8, 18, 0.45), inset 0 1px 0 rgba(240, 220, 174, 0.18);
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, background 0.4s, border-color 0.4s;
}
.skin-switch:hover {
  transform: translateY(-3px) rotate(-8deg);
  box-shadow: 0 14px 34px rgba(5, 8, 18, 0.55), 0 0 0 5px rgba(212, 175, 106, 0.12);
}
.skin-switch:active { transform: scale(0.94); }
.skin-char {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 700;
  line-height: 1;
  background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.skin-dots { display: flex; gap: 4px; }
.skin-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(212, 175, 106, 0.35);
  transition: background 0.3s;
}
.skin-dots i.on { background: var(--gold-400); }

[data-theme="xiu"] .skin-switch {
  background: rgba(251, 248, 240, 0.85);
  border-color: rgba(88, 74, 133, 0.45);
  box-shadow: 0 8px 26px rgba(58, 48, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="xiu"] .skin-char {
  background: linear-gradient(160deg, #584a85, #7f6fae);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="xiu"] .skin-dots i { background: rgba(88, 74, 133, 0.25); }
[data-theme="xiu"] .skin-dots i.on { background: #7f6fae; }

@media (max-width: 720px) {
  .skin-switch { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}

/* ================================================
   一、Token 覆盖：玄紫黛 × 暖宣纸
   ================================================ */
:root[data-theme="xiu"] {
  --ink-950: #171226;
  --ink-900: #1d1732;
  --ink-850: #231c3c;
  --ink-800: #2a2148;
  --ink-700: #372c5e;
  --ink-600: #473a77;

  --paper-50: #fbf8ef;
  --paper-100: #f7f2e4;
  --paper-200: #efe6d1;
  --paper-300: #e3d6b9;

  /* 紫气 */
  --zi-300: #b3a5d6;
  --zi-500: #7f6fae;
  --zi-700: #584a85;
  --zi-ink: #332c4d;
}

/* ================================================
   二、首页 · 水墨晨光主视觉（覆盖夜空）
   ================================================ */
[data-theme="xiu"] .hero {
  background:
    radial-gradient(ellipse 95% 55% at 50% 108%, rgba(127, 111, 174, 0.4), transparent 66%),
    radial-gradient(ellipse 55% 38% at 76% 14%, rgba(240, 220, 174, 0.55), transparent 62%),
    linear-gradient(180deg, #fdfaf1 0%, #f7f0e0 42%, #ece2d6 68%, #dfd2de 88%, #d3c4da 100%);
}
/* 夜空元素退场 */
[data-theme="xiu"] .hero-stars,
[data-theme="xiu"] .hero-moon,
[data-theme="xiu"] .hero-mountains { display: none; }

/* 仙道图层登场 */
.hero-xiu { display: none; }
[data-theme="xiu"] .hero-xiu {
  display: block;
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero-xiu-dust { position: absolute; inset: 0; }

/* —— 水墨远山（复用观星版山形，浅黛设色） —— */
.xiu-mountains {
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: min(44vh, 400px);
}
.xiu-mountains .mountain { position: absolute; left: -2%; right: -2%; bottom: 0; width: 104%; height: 100%; }
.xm-far path  { fill: #c3c4dd; fill-opacity: 0.55; stroke: #9d94c4; stroke-opacity: 0.4; }
.xm-mid path  { fill: #a6a3cb; fill-opacity: 0.7;  stroke: #8a7fb5; stroke-opacity: 0.45; }
.xm-near path { fill: #7d76a8; fill-opacity: 0.92; stroke: #b8914b; stroke-opacity: 0.5; }

/* —— 云海（三道流动的柔云） —— */
.xiu-cloud {
  position: absolute;
  height: 90px;
  left: -30%; right: -30%;
  background: radial-gradient(ellipse 42% 100% at 30% 50%, rgba(255, 253, 246, 0.85), transparent 70%),
              radial-gradient(ellipse 34% 88% at 58% 42%, rgba(255, 253, 246, 0.65), transparent 70%),
              radial-gradient(ellipse 30% 70% at 82% 55%, rgba(255, 253, 246, 0.75), transparent 70%);
  filter: blur(14px);
  animation: xiuCloudDrift var(--cd, 46s) linear infinite alternate;
}
.xiu-cloud.c1 { bottom: 26%; --cd: 52s; opacity: 0.9; }
.xiu-cloud.c2 { bottom: 15%; --cd: 38s; opacity: 0.75; animation-direction: alternate-reverse; }
.xiu-cloud.c3 { bottom: 5%;  --cd: 62s; opacity: 0.95; height: 120px; }
@keyframes xiuCloudDrift {
  from { transform: translateX(-5%); }
  to   { transform: translateX(6%); }
}

/* —— 远景飞鸟（水墨笔意，两队缓渡） —— */
.xiu-birds {
  position: absolute;
  width: 130px;
  opacity: 0;
  animation: xiuBirdsFly var(--bd, 44s) linear var(--bdelay, 0s) infinite;
}
.xiu-birds path {
  fill: none;
  stroke: rgba(51, 44, 77, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.xiu-birds.b1 { top: 24%; --bd: 46s; --bdelay: 2s; }
.xiu-birds.b2 { top: 14%; --bd: 58s; --bdelay: 20s; width: 90px; }
@keyframes xiuBirdsFly {
  0%   { transform: translateX(-16vw) translateY(0); opacity: 0; }
  6%   { opacity: 0.85; }
  46%  { transform: translateX(52vw) translateY(-3vh); opacity: 0.85; }
  92%  { opacity: 0.85; }
  100% { transform: translateX(116vw) translateY(-5vh); opacity: 0; }
}

/* —— 祥云描金线（题字下方点缀） —— */
.xiu-scroll-cloud {
  position: absolute;
  left: 50%; top: 15%;
  width: 200px;
  transform: translateX(-50%);
  opacity: 0.5;
}
.xiu-scroll-cloud path {
  fill: none;
  stroke: var(--gold-600);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: xiuInkLine 2.4s var(--ease-out) 1.2s forwards;
}
@keyframes xiuInkLine { to { stroke-dashoffset: 0; } }

/* —— 朱砂印「袖中天」（钤在题字右侧，如画家落印） —— */
.xiu-seal {
  position: absolute;
  left: calc(50% + min(20vw, 235px));
  top: 34%;
  width: 52px;
  padding: 12px 0 10px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 700;
  line-height: 1.35;
  writing-mode: vertical-rl;
  letter-spacing: 0.16em;
  color: #f8ecd8;
  background: linear-gradient(160deg, #c0453c, #96352c);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(150, 53, 44, 0.4), inset 0 0 0 2px rgba(248, 236, 216, 0.55),
              inset 0 0 0 5px rgba(150, 53, 44, 0.4);
  transform: rotate(6deg) scale(0);
  animation: xiuSealStamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s forwards;
  pointer-events: none;
}
@keyframes xiuSealStamp {
  0%   { transform: rotate(-14deg) scale(1.9); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotate(6deg) scale(1); opacity: 1; }
}

/* —— 首页 hero 文字改墨色 —— */
[data-theme="xiu"] .hero-quote { color: rgba(51, 44, 77, 0.62); }
[data-theme="xiu"] .hero-title {
  background: linear-gradient(168deg, #43395f 6%, #332c4d 45%, #584a85 78%, #7f6fae 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 5px 24px rgba(88, 74, 133, 0.28));
}
[data-theme="xiu"] .hero-en { color: rgba(88, 74, 133, 0.6); }
[data-theme="xiu"] .hero-divider { color: var(--zi-700); }
[data-theme="xiu"] .hero-tagline { color: #332c4d; }
[data-theme="xiu"] .hero-sub { color: rgba(51, 44, 77, 0.66); }
[data-theme="xiu"] .hero-glyphs span { color: rgba(88, 74, 133, 0.2); }
[data-theme="xiu"] .cue-text { color: rgba(51, 44, 77, 0.5); }
[data-theme="xiu"] .cue-line { background: linear-gradient(180deg, transparent, var(--zi-700)); }
[data-theme="xiu"] .cue-line::after { background: var(--zi-300); }
[data-theme="xiu"] .hero-actions .btn-outline {
  color: #43395f;
  border-color: rgba(88, 74, 133, 0.55);
  background: rgba(255, 253, 246, 0.35);
}
[data-theme="xiu"] .hero-actions .btn-outline:hover {
  border-color: var(--zi-700);
  background: rgba(255, 253, 246, 0.7);
  box-shadow: 0 10px 30px rgba(88, 74, 133, 0.22);
}

/* —— 首页导航（亮底 hero 上改墨字；滚动后换纸底玻璃） —— */
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .nav-links a { color: rgba(51, 44, 77, 0.72); }
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .nav-links a:hover,
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .nav-links a.active { color: var(--zi-700); }
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .logo-en { color: rgba(88, 74, 133, 0.55); }
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .nav-burger span { background: var(--zi-700); }
[data-theme="xiu"] .site-nav.scrolled {
  background: rgba(247, 242, 228, 0.86);
  box-shadow: 0 1px 0 rgba(88, 74, 133, 0.18), 0 12px 32px rgba(58, 48, 94, 0.14);
}
[data-theme="xiu"] .site-nav.scrolled .nav-links a { color: rgba(51, 44, 77, 0.72); }
[data-theme="xiu"] .site-nav.scrolled .nav-links a:hover,
[data-theme="xiu"] .site-nav.scrolled .nav-links a.active { color: var(--zi-700); }
[data-theme="xiu"] .site-nav.scrolled .logo-en { color: rgba(88, 74, 133, 0.55); }
[data-theme="xiu"] .site-nav.scrolled .nav-burger span { background: var(--zi-700); }
[data-theme="xiu"] .nav-links a::after { background: var(--zi-500); }

/* ================================================
   三、首页各节 · 紫黛化
   ================================================ */
[data-theme="xiu"] .classics-marquee {
  background: linear-gradient(180deg, #241c3e, #1b1530);
  border-color: rgba(179, 165, 214, 0.28);
}
[data-theme="xiu"] .marquee-group span { color: rgba(211, 196, 218, 0.62); }
[data-theme="xiu"] .marquee-group span:hover { color: var(--gold-300); }

[data-theme="xiu"] .ai-section {
  background:
    radial-gradient(ellipse 70% 55% at 20% 0%, rgba(71, 58, 119, 0.5), transparent 60%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900) 55%, var(--ink-950));
}
[data-theme="xiu"] .cta-section {
  background:
    radial-gradient(ellipse 65% 70% at 50% 115%, rgba(127, 111, 174, 0.22), transparent 65%),
    linear-gradient(180deg, var(--ink-950), #131022);
}
[data-theme="xiu"] .site-footer {
  background: linear-gradient(180deg, var(--ink-950), #100c1d);
}

/* ================================================
   四、子页 · 页头紫黛化
   ================================================ */
[data-theme="xiu"] .page-hero,
[data-theme="xiu"] .bazi-hero,
[data-theme="xiu"] .ly-hero {
  background:
    radial-gradient(ellipse 90% 70% at 50% -20%, #473a77 0%, transparent 60%),
    linear-gradient(180deg, #251d42 0%, var(--ink-900) 55%, var(--ink-950) 100%);
}
[data-theme="xiu"] .ly-stage {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(71, 58, 119, 0.45), transparent 62%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900) 55%, var(--ink-950));
}

/* ================================================
   五、袍袖开幕 —— 玄紫法袍一扫，扫出人间
   ================================================ */
.xiu-sweep {
  position: fixed; inset: 0;
  z-index: 2000;
  overflow: hidden;
  pointer-events: all;
}
.xiu-sweep.done { pointer-events: none; }

/* 衬里（朱砂赤金）在下层，略慢半拍露出袍里乾坤 */
.sweep-lining, .sweep-robe {
  position: absolute;
  top: -25%; left: -25%;
  width: 155%; height: 150%;
  transform: translateX(-2%) rotate(-5deg);
  will-change: transform;
}
.sweep-lining {
  background:
    linear-gradient(115deg, #96352c 0%, #b8493e 40%, #a8433a 70%, #7d2b23 100%);
  box-shadow: 0 0 80px rgba(184, 73, 62, 0.5);
}
.sweep-lining::after {                /* 衬里织金暗纹 */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(240, 220, 174, 0.18) 1px, transparent 2px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.sweep-robe {
  background:
    radial-gradient(ellipse 60% 90% at 30% 30%, rgba(71, 58, 119, 0.55), transparent 70%),
    linear-gradient(115deg, #241c40 0%, #191331 45%, #221a3e 78%, #15102a 100%);
  box-shadow: -30px 0 80px rgba(10, 6, 24, 0.6);
}
.sweep-robe::before {                 /* 袍面云纹暗绣 */
  content: "";
  position: absolute; inset: 0;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23d5ab60' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M20 46 a14 14 0 1 1 28 0 a10 10 0 1 1 -20 0 a6 6 0 1 1 12 0'/%3E%3Cpath d='M84 108 a14 14 0 1 1 28 0 a10 10 0 1 1 -20 0 a6 6 0 1 1 12 0'/%3E%3Cpath d='M88 30 q14 -12 28 0'/%3E%3Cpath d='M18 106 q12 -10 24 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.sweep-robe::after {                  /* 袖口金缘（拖尾一侧，挥袖时掠过画面） */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 16px;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-300) 35%, var(--gold-500) 65%, var(--gold-700));
  box-shadow: 3px 0 0 rgba(248, 236, 216, 0.55), -22px 0 46px rgba(212, 175, 106, 0.45);
}

/* 居中题款 */
.sweep-emblem {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  opacity: 0;
  animation: emblemIn 0.9s var(--ease-out) 0.15s forwards;
}
.sweep-emblem .emblem-text {
  font-family: var(--font-serif);
  writing-mode: vertical-rl;
  font-size: 44px; font-weight: 700;
  letter-spacing: 0.42em;
  background: linear-gradient(170deg, #f2ddab 15%, #d5ab60 60%, #b98d47);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(212, 175, 106, 0.4));
}
.sweep-emblem .emblem-sub {
  font-family: var(--font-serif);
  font-size: 12px; letter-spacing: 0.5em; text-indent: 0.5em;
  color: rgba(240, 220, 174, 0.55);
}
@keyframes emblemIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* 挥袖出场 */
.xiu-sweep.sweeping .sweep-emblem { animation: emblemOut 0.4s ease forwards; }
@keyframes emblemOut { to { opacity: 0; transform: translate(-50%, -54%) ; } }
.xiu-sweep.sweeping .sweep-robe {
  animation: robeSweep 1.35s cubic-bezier(0.72, 0.02, 0.26, 1) forwards;
}
.xiu-sweep.sweeping .sweep-lining {
  animation: robeSweep 1.35s cubic-bezier(0.72, 0.02, 0.26, 1) 0.13s forwards;
}
@keyframes robeSweep {
  0%   { transform: translateX(-2%) rotate(-5deg); }
  100% { transform: translateX(126%) rotate(-1deg); }
}

/* ================================================
   六、通用 · 主题淡入帷幕（切回观星等场景）
   ================================================ */
.theme-veil {
  position: fixed; inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.theme-veil.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .xiu-sweep, .theme-veil { display: none !important; }
  .xiu-seal { animation: none; transform: rotate(6deg) scale(1); opacity: 1; }
  .xiu-scroll-cloud path { animation: none; stroke-dashoffset: 0; }
  .xiu-birds, .xiu-cloud { animation: none; opacity: 0.6; }
}

/* 小屏适配 */
@media (max-width: 720px) {
  .xiu-seal { left: calc(50% + 106px); top: 30%; width: 40px; font-size: 16px; padding: 10px 0 8px; }
  .sweep-emblem .emblem-text { font-size: 34px; }
  .xiu-scroll-cloud { display: none; }
}

/* ================= 用户系统 · 袖中天适配 ================= */
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .nav-user {
  background: rgba(251, 248, 240, 0.6);
  border-color: rgba(88, 74, 133, 0.45);
}
[data-theme="xiu"] body[data-page="home"] .site-nav:not(.scrolled) .nav-user-name { color: #332c4d; }
[data-theme="xiu"] .site-nav.scrolled .nav-user {
  background: rgba(251, 248, 240, 0.7);
  border-color: rgba(88, 74, 133, 0.4);
}
[data-theme="xiu"] .site-nav.scrolled .nav-user-name { color: #332c4d; }
[data-theme="xiu"] .tx-toast {
  background: rgba(42, 33, 72, 0.94);
  border-color: rgba(179, 165, 214, 0.5);
}