/* =========================================================
   LivelyWisp 灵息水晶 — style.css
   ========================================================= */

:root{
  --bg-deep:#080c14;
  --bg-mist:#161a2e;

  --text:rgba(236,240,248,.92);
  --text-dim:rgba(236,240,248,.55);
  --text-faint:rgba(236,240,248,.32);

  --gold:#d4a574;
  --aurora:#7dd3c0;
  --twilight:#a78bfa;

  --c-clear:#cfe8ff;
  --c-rose:#ffc9dd;
  --c-amethyst:#a78bfa;
  --c-citrine:#d4a574;
  --c-green:#7dd3c0;

  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.14);

  --ease-wisp:cubic-bezier(0.22,1,0.36,1);

  /* 运行时由 JS 覆盖：当前幕主题色 */
  --theme:#cfe8ff;
  --theme-soft:rgba(207,232,255,.35);
  --theme-stroke:rgba(255,255,255,.18);
  --theme-vig:rgba(207,232,255,.05);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% 0%, #10162a 0%, var(--bg-deep) 55%, #05070d 100%);
  color:var(--text);
  font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  min-height:100%;
}

body.locked{overflow:hidden;}

img{max-width:100%;display:block;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input{font-family:inherit;}
a{color:inherit;text-decoration:none;}

::selection{background:rgba(212,165,116,.28);color:#fff;}

/* ---------- 排版基元 ---------- */
.label{
  font-size:11px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--text-dim);
  font-weight:400;
  margin:0 0 14px;
}
.eyebrow{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--text-faint);font-weight:400;margin:0 0 26px;
}
.mid-title{
  font-weight:200;
  letter-spacing:.22em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  margin:0 0 18px;
  line-height:1.25;
}
.giant{
  font-weight:200;
  font-size:clamp(4rem,14vw,12rem);
  letter-spacing:.3em;
  line-height:.98;
  margin:0;
  white-space:nowrap;
  color:var(--text);
}
.body-dim{
  color:var(--text-dim);
  font-size:clamp(.9rem,1.1vw,1.02rem);
  font-weight:300;
  max-width:34em;
  margin:0 0 22px;
}

/* GSAP filter 插值需要可解析的基线值 */
[data-reveal],[data-split] > span,.act-num,.act-info,.chip,.story{
  filter:blur(0px);
  will-change:transform,opacity,filter;
}

/* ---------- 玻璃规范 ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.45);
}

/* =========================================================
   Scene 0 · Loader
   ========================================================= */
#loader{
  position:fixed;inset:0;z-index:200;
  background:#05070d;
  display:block;
  transition:opacity .7s var(--ease-wisp);
}
#loader.done{opacity:0;pointer-events:none;}
#loader-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.loader-meta{
  position:absolute;left:50%;bottom:11vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.loader-pct{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Inter',monospace;
  font-variant-numeric:tabular-nums;
  font-weight:200;font-size:12px;letter-spacing:.34em;
  color:var(--text-faint);
}
.loader-pct em{font-style:normal;opacity:.55;margin-left:2px;}
.loader-tag{font-size:10px;letter-spacing:.5em;color:rgba(236,240,248,.18);}

/* =========================================================
   全局氛围层
   ========================================================= */
#webgl{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:2;display:block;
}
#wisp{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:3;pointer-events:none;display:block;
}
.cine{position:fixed;inset:0;z-index:6;pointer-events:none;}
.cine-vignette{
  position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.74) 100%);
}
.cine-grain{
  position:absolute;inset:-50%;
  opacity:.025;                      /* 静态，不随滚动动画 */
  background-image:var(--grain-img);
  background-size:180px 180px;
}
.cine-edge{
  position:absolute;inset:0;
  box-shadow:inset 0 0 160px rgba(8,12,20,.75), inset 0 0 260px var(--theme-vig);
  border:1px solid rgba(255,255,255,.02);
  transition:box-shadow .8s linear;  /* 暗角色调随幕主题极缓变化 */
}

/* ---------- 自定义光标 ---------- */
#cursor-dot,#cursor-ring{
  position:fixed;top:0;left:0;z-index:300;pointer-events:none;
  mix-blend-mode:screen;border-radius:50%;
  transform:translate3d(-50%,-50%,0);
}
#cursor-dot{
  width:5px;height:5px;background:rgba(255,255,255,.85);
  box-shadow:0 0 12px rgba(212,165,116,.8);
}
#cursor-ring{
  width:34px;height:34px;
  border:1px solid rgba(236,240,248,.28);
  transition:width .35s var(--ease-wisp),height .35s var(--ease-wisp),border-color .35s var(--ease-wisp),opacity .3s;
}
#cursor-ring.hot{width:62px;height:62px;border-color:var(--theme);}
@media (pointer:coarse){#cursor-dot,#cursor-ring{display:none;}}

/* =========================================================
   Nav
   ========================================================= */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px clamp(18px,4vw,54px);
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(-12px);
  transition:padding .5s var(--ease-wisp);
  /* 2026-08-21：CSS 入场动画，不等 JS（VENDOR 串行加载导致的导航 10s 空白）*/
  animation:navIn 1s var(--ease-wisp) .15s both;
}
@keyframes navIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
#nav.compact{padding-top:9px;padding-bottom:9px;}
.nav-brand{display:flex;align-items:baseline;gap:10px;}
.nav-mark{
  width:7px;height:7px;border-radius:50%;
  background:var(--theme);
  box-shadow:0 0 14px var(--theme);
  align-self:center;
  transition:background .6s linear,box-shadow .6s linear;
}
.nav-name{font-size:14px;letter-spacing:.26em;font-weight:400;}
.nav-sub{font-size:10px;letter-spacing:.36em;color:var(--text-faint);}
.nav-links{display:flex;gap:clamp(14px,2.4vw,34px);}
.nav-links a{
  position:relative;font-size:11px;letter-spacing:.34em;
  color:var(--text-dim);padding:6px 0;transition:color .4s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--theme);opacity:0;transform:scaleX(.4);
  transition:opacity .35s var(--ease-wisp),transform .35s var(--ease-wisp);
}
.nav-links a.on,.nav-links a:hover{color:var(--text);}
.nav-links a.on::after{opacity:1;transform:scaleX(1);}
.nav-sep{
  align-self:center;width:1px;height:12px;
  background:var(--glass-border);margin:0 2px;
}
.nav-links a.nav-out{color:var(--text-faint);}
.nav-links a.nav-out::before{
  content:'';position:absolute;left:50%;top:0;width:3px;height:3px;
  margin-left:-1.5px;border-radius:50%;background:var(--gold);
  opacity:0;transform:translateY(-4px);
  transition:opacity .35s var(--ease-wisp),transform .35s var(--ease-wisp);
}
.nav-links a.nav-out:hover{color:var(--gold);}
.nav-links a.nav-out:hover::before{opacity:.9;transform:translateY(0);}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-switch{
  font-size:10px;letter-spacing:.28em;color:var(--text-faint);
  border:1px solid var(--glass-border);border-radius:999px;padding:6px 12px;
  transition:color .35s,border-color .35s;
}
.lang-switch .on{color:var(--text);}
.lang-switch i{font-style:normal;opacity:.4;margin:0 3px;}
.lang-switch:hover{border-color:rgba(255,255,255,.3);}
.bag-btn{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.28em;color:var(--text-dim);
  border:1px solid var(--glass-border);border-radius:999px;
  padding:7px 15px;transition:color .35s,border-color .35s,background .35s;
}
.bag-btn:hover{color:var(--text);border-color:rgba(255,255,255,.3);background:var(--glass-strong);}
.bag-count{
  font-style:normal;font-size:10px;min-width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:50%;background:var(--theme);color:#08101c;
  letter-spacing:0;font-weight:600;
  transition:background .6s linear;
}

/* =========================================================
   空间定位系统
   ========================================================= */
#chapter-mark{
  position:fixed;left:clamp(18px,3.2vw,44px);bottom:clamp(20px,3.4vh,38px);
  z-index:110;pointer-events:none;height:16px;
}
.cm-slot{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-size:11px;letter-spacing:.4em;color:var(--text-dim);
  opacity:0;transition:opacity .3s linear;
}
.cm-slot.show{opacity:1;}
.cm-slot b{font-weight:400;color:var(--text);}
.cm-slot em{font-style:normal;color:var(--theme);opacity:.85;}

#page-progress{
  position:fixed;right:clamp(14px,2.4vw,34px);top:50%;
  transform:translateY(-50%);
  width:1px;height:40vh;background:var(--text-faint);
  z-index:110;pointer-events:none;opacity:.55;
}
#page-progress i{
  position:absolute;left:0;top:0;width:1px;height:0%;
  background:var(--theme);
  box-shadow:0 0 8px var(--theme);
  transition:background .6s linear;
}

/* =========================================================
   通用场景骨架
   ========================================================= */
main{position:relative;z-index:10;}
.scene{position:relative;}
.pin-inner{
  height:100vh;width:100%;
  display:flex;align-items:center;
  padding:0 clamp(22px,7vw,120px);
  position:relative;
}

/* ---------- Scene 1 HERO ---------- */
/* 场景本体 100vh，滚动行程由 ScrollTrigger pin spacing 提供 */
#hero,#gaze,#inside{height:100vh;}
#hero .pin-inner{flex-direction:column;justify-content:center;align-items:flex-start;}
.hero-copy{max-width:min(52vw,760px);}
.hero-title{
  font-weight:200;
  font-size:clamp(3rem,9vw,8.2rem);
  letter-spacing:.14em;
  line-height:1;
  margin:0 0 22px;
  white-space:nowrap;
  word-break:keep-all;
}
.hero-title span{display:inline-block;white-space:pre;}
.hero-sub{
  font-size:clamp(1rem,2vw,1.35rem);
  letter-spacing:.06em;
  color:var(--text);
  font-weight:400;
  margin:0 0 16px;
  line-height:1.5;
}
.hero-value{
  font-size:clamp(.95rem,1.6vw,1.15rem);
  letter-spacing:.02em;
  color:#d8c7a0;
  font-weight:300;
  margin:0 0 14px;
  line-height:1.5;
  max-width:46ch;
  opacity:.94;
}
.hero-type{
  font-size:clamp(.85rem,1.5vw,1.05rem);
  letter-spacing:.24em;color:var(--text-dim);
  min-height:1.8em;margin:0 0 40px;font-weight:300;
}
.hero-type .caret{
  display:inline-block;width:1px;height:1em;background:var(--gold);
  margin-left:4px;vertical-align:-2px;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.ghost-btn{
  display:inline-block;
  font-size:11px;letter-spacing:.36em;text-transform:uppercase;
  padding:16px 34px;border:1px solid rgba(255,255,255,.16);
  color:var(--text-dim);
  transition:color .5s var(--ease-wisp),border-color .5s var(--ease-wisp),background .5s var(--ease-wisp),box-shadow .5s var(--ease-wisp);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
}
.ghost-btn:hover{
  color:var(--text);
  border-color:var(--glass-border);
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.ghost-btn.small{padding:12px 24px;margin-top:8px;}
.ghost-btn.full{display:block;width:100%;text-align:center;}

.scroll-hint{
  position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;
}
.sh-txt{font-size:11px;letter-spacing:.34em;color:var(--text-dim);font-weight:500;}
.sh-line{position:relative;width:1px;height:46px;background:linear-gradient(180deg,rgba(236,240,248,0),rgba(236,240,248,.5));overflow:hidden;}
.sh-line::after{content:'';position:absolute;left:0;top:0;width:100%;height:18px;background:linear-gradient(180deg,rgba(207,232,255,0),var(--theme));animation:scrollFlow 2s ease-in-out infinite;}
.sh-arrow{width:9px;height:9px;border-right:1.5px solid var(--theme);border-bottom:1.5px solid var(--theme);transform:rotate(45deg);animation:arrowBounce 1.8s ease-in-out infinite;}
@keyframes scrollFlow{0%{transform:translateY(-100%);opacity:0}35%{opacity:1}100%{transform:translateY(260%);opacity:0}}
@keyframes arrowBounce{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(5px) rotate(45deg);opacity:1}}

/* ---------- Scene 2 凝视 ---------- */
#gaze .pin-inner{flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;}
.gaze-note{
  margin-top:26px;font-size:12px;letter-spacing:.28em;color:var(--text-faint);max-width:30em;
}

/* ---------- Scene 3 入景 ---------- */
/* 让指针事件穿透到 WebGL 画布，保证 360° 拖拽可用 */
#inside .pin-inner{align-items:flex-end;padding-bottom:14vh;pointer-events:none;}
.inside-hud{max-width:min(46vw,620px);pointer-events:auto;}

/* =========================================================
   Scene 4 · 五幕剧场
   ========================================================= */
#theater{position:relative;}
.act{
  position:relative;
  height:110vh;
  display:flex;align-items:center;
  padding:0 clamp(22px,7vw,120px);
}
.act-inner{width:100%;}
.act-left{max-width:min(46vw,720px);}
.act-num{
  font-weight:200;
  font-size:clamp(10rem,20vw,22rem);
  line-height:.82;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px var(--theme-stroke);
  margin:0 0 8px;
  user-select:none;
  transition:-webkit-text-stroke-color .8s linear;
}
.act-info{padding-left:.4em;}
.act-name{margin:0 0 14px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.act-name b{
  font-weight:300;font-size:15px;letter-spacing:.4em;color:var(--text);
}
.act-name i{
  font-style:normal;font-size:11px;letter-spacing:.4em;color:var(--text-dim);
  display:none;
}
/* 五幕幕名：中文/英文按页面语言切换显隐 */
html[data-lang="en"] .act-name b{ display:none; }
html[data-lang="en"] .act-name i{ display:inline; }
.act-desc{
  margin:0 0 22px;font-size:clamp(.86rem,1.05vw,.98rem);
  color:var(--text-dim);max-width:26em;line-height:1.9;
}
/* 五幕描述：中文/英文按页面语言切换显隐 */
.act-desc [data-en]{ display:none; }
html[data-lang="en"] .act-desc [data-zh]{ display:none; }
html[data-lang="en"] .act-desc [data-en]{ display:inline; }
.energy{display:flex;align-items:center;gap:14px;}
.energy-label{font-size:10px;letter-spacing:.4em;color:var(--text-faint);}
.energy-track{
  position:relative;display:block;
  width:clamp(120px,16vw,220px);height:1px;
  background:rgba(236,240,248,.14);
}
.energy-track.wide{width:100%;max-width:320px;}
.energy-track i{
  position:absolute;left:0;top:0;height:1px;width:0%;
  background:var(--theme);
  box-shadow:0 0 10px var(--theme);
  transition:background .6s linear,box-shadow .6s linear;
}
.energy-val{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.2em;color:var(--text-faint);
}

.chip{
  position:absolute;right:clamp(22px,6vw,92px);bottom:clamp(80px,12vh,140px);
  font-size:10px;letter-spacing:.36em;color:var(--text-dim);
  padding:12px 22px;border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:color .4s var(--ease-wisp),background .4s var(--ease-wisp),transform .4s var(--ease-wisp);
}
.chip:hover{color:var(--text);background:var(--glass-strong);transform:translateY(-2px);}

/* 底部 5 段刻线 */
#ticks{
  position:fixed;left:50%;bottom:clamp(20px,3.4vh,36px);
  transform:translateX(-50%);
  display:flex;gap:12px;z-index:110;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease-wisp);
}
#ticks.show{opacity:1;}
#ticks i{
  display:block;width:24px;height:1px;background:var(--text-faint);
  transition:width .55s var(--ease-wisp),background .55s var(--ease-wisp);
}
#ticks i.on{
  width:48px;background:var(--theme);
  animation:tickBreath 3s ease-in-out infinite;
}
@keyframes tickBreath{0%,100%{opacity:.45}50%{opacity:1}}

/* =========================================================
   Scene 5 · 溯源
   ========================================================= */
#origin{padding:18vh clamp(22px,7vw,120px);}
.origin-wrap{
  display:grid;grid-template-columns:1fr minmax(280px,42%);
  gap:clamp(30px,5vw,80px);align-items:center;
}
.origin-aura{position:relative;aspect-ratio:1/1;width:100%;}
#aura{position:absolute;inset:0;width:100%;height:100%;}
.origin-data{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;margin-top:6vh;}
.odata{display:flex;flex-direction:column;gap:12px;}
.odata .label{margin:0;}
.odata-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:200;font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.06em;color:var(--text);
}

/* =========================================================
   Scene 6 · 故事
   ========================================================= */
#stories{padding:16vh clamp(22px,7vw,120px) 14vh;}
.stories-head{margin-bottom:6vh;}
.masonry{columns:3;column-gap:26px;}
.story{
  break-inside:avoid;margin:0 0 26px;padding:32px 30px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:2px;
}
.story.tall{padding-bottom:60px;}
.story blockquote{
  margin:0 0 20px;font-size:clamp(.94rem,1.2vw,1.08rem);
  font-weight:300;line-height:1.95;color:var(--text);
}
.story figcaption{font-size:10px;letter-spacing:.34em;color:var(--text-faint);}

/* =========================================================
   Scene 7 · Footer
   ========================================================= */
#foot{padding:16vh clamp(22px,7vw,120px) 9vh;}
.foot-inner{max-width:640px;}
.foot-logo{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:200;letter-spacing:.3em;margin:0 0 22px;}
.foot-slogan{font-size:clamp(1rem,1.6vw,1.2rem);font-weight:300;letter-spacing:.18em;margin:0 0 6px;color:var(--text);}
.foot-slogan-en{font-size:11px;letter-spacing:.4em;color:var(--text-faint);margin:0 0 40px;}
.subscribe{display:flex;gap:12px;flex-wrap:wrap;}
.subscribe input{
  flex:1 1 260px;padding:15px 20px;font-size:12px;letter-spacing:.16em;
  color:var(--text);
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  outline:none;transition:border-color .4s;
}
.subscribe input::placeholder{color:var(--text-faint);}
.subscribe input:focus{border-color:var(--theme);}
.subscribe button{
  font-size:11px;letter-spacing:.34em;padding:15px 30px;
  border:1px solid rgba(255,255,255,.16);color:var(--text-dim);
  transition:color .4s,border-color .4s,background .4s;
}
.subscribe button:hover{color:var(--text);border-color:var(--glass-border);background:var(--glass);}
.foot-tip{font-size:10px;letter-spacing:.3em;color:var(--theme);min-height:1.4em;margin:14px 0 0;opacity:0;transition:opacity .4s;}
.foot-tip.show{opacity:1;}
.foot-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:10vh;font-size:10px;letter-spacing:.3em;color:var(--text-faint);}

/* =========================================================
   浮层：scrim / 臻选袋 / 系列 / 详情
   ========================================================= */
#scrim{
  position:fixed;inset:0;z-index:130;
  background:rgba(5,7,13,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease-wisp);
}
#scrim.show{opacity:1;pointer-events:auto;}

.close{
  position:absolute;top:18px;right:20px;z-index:5;
  width:34px;height:34px;border-radius:50%;
  font-size:13px;color:var(--text-dim);
  border:1px solid var(--glass-border);
  transition:color .35s,background .35s;
}
.close:hover{color:var(--text);background:var(--glass-strong);}

#bag{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);z-index:150;
  display:flex;flex-direction:column;
  background:rgba(14,18,30,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-left:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),-40px 0 90px rgba(0,0,0,.5);
  transform:translateX(101%);
  transition:transform .6s var(--ease-wisp);
}
#bag.show{transform:translateX(0);}
.bag-head{position:relative;padding:26px 26px 18px;border-bottom:1px solid rgba(255,255,255,.07);}
.bag-head .label{margin:0;}
.bag-list{flex:1;overflow-y:auto;padding:8px 26px 20px;}
.bag-item{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.bag-thumb{width:44px;height:44px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%, #fff 0%, var(--tc,#cfe8ff) 38%, rgba(8,12,20,.9) 100%);
  box-shadow:0 0 22px var(--tc,#cfe8ff);opacity:.9;}
.bag-item h4{margin:0 0 4px;font-size:12px;font-weight:400;letter-spacing:.2em;}
.bag-item p{margin:0;font-size:10px;letter-spacing:.3em;color:var(--text-faint);}
.bag-item .rm{margin-left:auto;font-size:11px;color:var(--text-faint);}
.bag-item .rm:hover{color:var(--text);}
.bag-empty{font-size:11px;letter-spacing:.3em;color:var(--text-faint);padding:40px 0;text-align:center;}
.bag-foot{padding:22px 26px 30px;border-top:1px solid rgba(255,255,255,.07);}
.bag-foot p{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 18px;font-size:11px;letter-spacing:.3em;color:var(--text-dim);}
.bag-foot b{font-weight:300;font-size:18px;letter-spacing:.1em;color:var(--text);}

#series,#detail{
  position:fixed;inset:0;z-index:160;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,50px);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-wisp);
}
#series.show,#detail.show{opacity:1;pointer-events:auto;}

.series-panel{
  position:relative;width:min(1100px,100%);max-height:88vh;overflow-y:auto;
  padding:clamp(28px,4vw,56px);
  background:rgba(14,18,30,.7);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.5);
  transform:translateY(24px) scale(.985);
  transition:transform .6s var(--ease-wisp);
}
#series.show .series-panel{transform:none;}
.series-head h3{margin:0 0 16px;font-weight:200;font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:.26em;}
.series-metrics{display:flex;gap:36px;flex-wrap:wrap;margin:26px 0 40px;}
.series-metrics div{display:flex;flex-direction:column;gap:10px;min-width:200px;}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.pitem{
  position:relative;padding:26px 22px;cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  transition:background .45s var(--ease-wisp),transform .45s var(--ease-wisp),border-color .45s;
}
.pitem:hover{background:var(--glass-strong);transform:translateY(-3px);border-color:var(--glass-border);}
.pitem .gem{
  width:46px;height:46px;border-radius:50%;margin-bottom:18px;
  background:radial-gradient(circle at 34% 30%, #fff 0%, var(--tc) 40%, rgba(8,12,20,.85) 100%);
  box-shadow:0 0 26px var(--tc);opacity:.92;
}
.pitem h4{margin:0 0 8px;font-size:13px;font-weight:300;letter-spacing:.2em;}
.pitem p{margin:0;font-size:10px;letter-spacing:.3em;color:var(--text-faint);}
.pitem b{display:block;margin-top:14px;font-weight:300;font-size:13px;letter-spacing:.12em;color:var(--text-dim);}

.detail-card{
  position:relative;width:min(880px,100%);
  display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.4vw,44px);
  background:rgba(14,18,30,.74);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.5);
  transform:translateY(24px) scale(.985);
  transition:transform .6s var(--ease-wisp);
}
#detail.show .detail-card{transform:none;}
.detail-view{position:relative;aspect-ratio:1/1;}
#detail-canvas{position:absolute;inset:0;width:100%;height:100%;}
.detail-info h3{margin:0 0 14px;font-weight:200;font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:.22em;}
.d-metrics{display:flex;flex-direction:column;gap:18px;margin:26px 0 30px;}
.d-metrics > div{display:flex;flex-direction:column;gap:10px;}
.d-metrics .label{margin:0;}
.d-price{font-weight:300;font-size:18px;letter-spacing:.14em;margin:0 0 24px;color:var(--text);}

/* ---------- 详情浮层：交易平台购买桥 ---------- */
.d-buy{
  display:flex;gap:10px;margin-top:14px;
}
.d-buy:empty{display:none;}
.d-buy-btn{
  position:relative;flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.16em;white-space:nowrap;text-decoration:none;
  overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s ease,background .4s ease,box-shadow .4s ease,color .4s ease;
}
.d-buy-btn svg{flex:none;opacity:.9;transition:opacity .4s ease,transform .4s ease;}
.d-buy-btn span{overflow:hidden;text-overflow:ellipsis;}
.d-buy-btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.d-buy-btn:hover::after{transform:translateX(120%);}
.d-buy-btn:hover{transform:translateY(-2px);}
.d-buy-btn:active{transform:translateY(0);}
.d-buy-btn.is-tiktok:hover{
  color:#eafeff;border-color:rgba(37,244,238,.55);
  background:linear-gradient(120deg,rgba(37,244,238,.16),rgba(254,44,85,.16));
  box-shadow:0 8px 26px rgba(37,244,238,.18);
}
.d-buy-btn:hover svg{opacity:1;transform:scale(1.08);}
@media (max-width:480px){
  .d-buy{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  .d-buy-btn,.d-buy-btn::after{transition:none;}
}

/* =========================================================
   响应式 / 移动端降级
   ========================================================= */
@media (max-width:1100px){
  .masonry{columns:2;}
  .origin-wrap{grid-template-columns:1fr;}
  .origin-aura{max-width:420px;}
}

@media (max-width:820px){
  html{scroll-snap-type:y mandatory;}
  .pin-inner{padding:0 24px;}
  .hero-copy{max-width:100%;}
  .giant{font-size:clamp(2.4rem,13vw,5rem);letter-spacing:.2em;white-space:normal;}
  .inside-hud{max-width:100%;}

  .act{height:100vh;scroll-snap-align:start;padding:0 24px;align-items:flex-end;padding-bottom:18vh;}
  .act-left{max-width:100%;}
  .act-num{font-size:34vw;}
  .act-info{padding-left:0;}
  .chip{right:24px;bottom:9vh;}

  .masonry{columns:1;}
  .detail-card{grid-template-columns:1fr;}
  .detail-view{max-width:220px;}
  #page-progress{height:26vh;right:12px;}
  .nav-links{display:none;}
  #chapter-mark{left:16px;bottom:14px;}
  #ticks{bottom:14px;}
  .energy-track{width:120px;}
}

@media (max-width:520px){
  .nav-sub{display:none;}
  .foot-meta{gap:14px;}
}

/* 无障碍 / 降级 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .cine-grain{display:none;}
  #cursor-dot,#cursor-ring{display:none;}
  [data-reveal],[data-split] > span,.act-num,.act-info{opacity:1 !important;filter:none !important;transform:none !important;}
}