/* crypto-globe-ui — 视觉层样式 (MIT)
   仅保留 星空/地球/玻璃币 所需规则, 已去除原站业务类。 */
:root{
  --bg:#08090b;
  --txt:#e9edf3; --sub:#8d97a5; --dim:#5f6875;
  --purple:#8B7DFF; --brand:#8B7DFF; --gold:#8B7DFF;
  --cg-brand:#8B7DFF; --cg-dim:#5f6875;
  --mono:'JetBrains Mono','SF Mono','Cascadia Code',Consolas,monospace;
  --sans:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);overflow:hidden;font-family:var(--sans)}

/* 地球全屏背景层 */
.earth-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#aiEarth{width:100%;height:100%;display:block}
.earth-bg canvas{display:block;width:100%!important;height:100%!important;
  filter:saturate(1.05) brightness(1.12) contrast(1.05)}
@media (max-width:900px),(orientation:portrait){
  .earth-bg canvas{filter:saturate(1.18) brightness(1.34) contrast(1.10)}
}
/* 暗角/可读性遮罩 (静态, 与线上一致) */
.hq-stage-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(150% 135% at 50% 42%,transparent 58%,rgba(3,4,8,.20) 82%,rgba(2,3,6,.46) 100%),
             linear-gradient(180deg,rgba(4,6,11,.28) 0%,transparent 20%,transparent 80%,rgba(4,6,11,.18) 100%)}
.hq-stage-dim{display:none}

/* ============================================================================
   沉浸呼吸层 —— 照搬生产站原值 (de-branded)
   ① 整页环境光呼吸  body::before + cgAmbient 26s ease-in-out infinite alternate
   ② 地球外围能量环    .earth-bg::after + cgBreath 7.5s (缩放 1 → 1.045)
   ③ 环绕粒子层        #cgField (canvas, 见 assets/particles.js) mix-blend:screen
   只动 transform/opacity → 走 GPU 合成, 不触发布局重排
   ==========================================================================*/
/* ① 整页环境光: 两团极淡紫氛围, 26s 明暗来回 (线上 hwAmbient 原值) */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1000px 640px at 80% -12%, rgba(139,125,255,.065), transparent 62%),
    radial-gradient(760px 520px at 8% 110%, rgba(139,125,255,.055), transparent 60%);
  animation:cgAmbient 26s ease-in-out infinite alternate}
@keyframes cgAmbient{0%{opacity:.75}100%{opacity:1}}

/* ② 地球外围能量环: 7.5s 呼吸一次 (线上 v9bpulse 原值) */
.earth-bg::after{content:'';position:absolute;left:50%;top:52%;
  width:min(52vh,520px);height:min(52vh,520px);transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(139,125,255,.055) 0%,rgba(139,125,255,.03) 42%,transparent 68%);
  animation:cgBreath 7.5s ease-in-out infinite}
@keyframes cgBreath{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.045)}}

/* ③ 环绕粒子层 canvas */
#cgField{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.4s ease;mix-blend-mode:screen}
html.cg-particles-on #cgField{opacity:.9}

@media (prefers-reduced-motion:reduce){
  body::before,.earth-bg::after{animation:none!important}
}

/* 币标签层 */
.coin-tag-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.coin-tag{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-weight:700;
  letter-spacing:.4px;white-space:nowrap;color:#f4f7ff;opacity:0;transition:opacity .16s linear;
  text-shadow:0 0 3px rgba(0,0,0,.98),0 0 6px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.95)}
.coin-tag .ct-n{font-weight:700;letter-spacing:.5px}
.coin-tag .ct-c{margin-left:5px;font-weight:600;opacity:.92;font-size:.88em}
.coin-tag.up{color:#7fe6bd}.coin-tag.up .ct-c{color:#3fd39a}
.coin-tag.dn{color:#ff9aa2}.coin-tag.dn .ct-c{color:#ff6b76}
.coin-tag.bare{font-weight:600;opacity:.80;letter-spacing:.2px}.coin-tag.bare .ct-c{display:none}
.coin-tag.flat{color:#9fb0c6;opacity:.72}
@media (max-width:900px){.coin-tag{font-size:9px!important}}

/* WebGL 不可用时的静态兜底 */
.earth-fallback .earth-fb{display:flex}
.earth-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.earth-fb-ring{width:210px;height:210px;border-radius:50%;border:1px solid rgba(139,125,255,.34);
  box-shadow:0 0 40px rgba(139,125,255,.14),inset 0 0 60px rgba(139,125,255,.10);position:relative;
  animation:cgFbSpin 24s linear infinite}
.earth-fb-ring::before{content:'';position:absolute;inset:16px;border-radius:50%;border:1px dashed rgba(139,125,255,.24)}
.earth-fb-ring::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--cg-brand);box-shadow:0 0 12px var(--cg-brand);transform:translateX(-50%)}
.earth-fb-core{width:120px;height:120px;border-radius:50%;position:absolute;
  background:radial-gradient(circle at 42% 38%,rgba(255,235,180,.20),rgba(20,26,40,.9) 68%);
  box-shadow:0 0 40px rgba(0,0,0,.6)}
.earth-fb-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
@keyframes cgFbSpin{to{transform:rotate(360deg)}}

/* 载入骨架 */
.hq-skel{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .6s ease}
.hq-skel.done{opacity:0;pointer-events:none}
.hq-skel .hs-ring{width:46px;height:46px;border-radius:50%;border:2px solid rgba(139,125,255,.16);
  border-top-color:var(--cg-brand);animation:cgFbSpin 1s linear infinite}
.hq-skel .hs-txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--cg-dim);text-transform:uppercase}

/* 演示层(非视觉核心): 居中标题, 纯说明 */
.demo-caption{position:fixed;left:0;right:0;bottom:26px;z-index:5;text-align:center;pointer-events:none}
.demo-caption .dc-t{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.08em;
  color:#e8e9f2;text-shadow:0 1px 10px rgba(0,0,0,.7);animation:cgRise 1.1s cubic-bezier(.2,.7,.2,1) both}
.demo-caption .dc-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:#8a8fa6;margin-top:6px;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.8);animation:cgRise 1.2s .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes cgRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.earth-fb-ring,.hq-skel .hs-ring{animation:none}}

/* ============================================================================
   载入页特效: 全屏启动遮罩 (de-branded, 无任何品牌标识/名称)
   轨道环 + 玻璃内核 + 扫描条 → 数据就绪后淡出并移除
   ==========================================================================*/
#cgBoot{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 100% at 50% 40%,#0a0f1c 0%,#05070a 72%);color:#cfd6e6;font-family:var(--mono);
  opacity:1;pointer-events:none;animation:cgBootOut .7s ease 2.6s forwards}
#cgBoot.cg-boot-off{opacity:0;visibility:hidden}
.cgb-orb{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.cgb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(139,125,255,.30);
  box-shadow:0 0 40px rgba(139,125,255,.16),inset 0 0 34px rgba(139,125,255,.10);animation:cgSpin 12s linear infinite}
.cgb-ring::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 12px var(--brand);transform:translateX(-50%)}
.cgb-core{width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 40% 36%,rgba(255,235,180,.22),rgba(18,24,38,.92) 70%);
  box-shadow:0 0 30px rgba(0,0,0,.6);animation:cgPulse 1.8s ease-in-out infinite}
.cgb-orbit{position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(139,125,255,.18);animation:cgSpin 22s linear infinite reverse}
.cgb-orbit i{position:absolute;top:50%;left:-3px;width:6px;height:6px;border-radius:50%;background:#7fd1ff;box-shadow:0 0 10px #7fd1ff;transform:translateY(-50%)}
.cgb-t{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.42em;color:#e9edf3}
.cgb-s{font-size:9.5px;letter-spacing:.24em;color:var(--dim)}
.cgb-bar{width:170px;height:2px;border-radius:2px;background:rgba(140,160,200,.16);overflow:hidden;position:relative}
.cgb-bar::after{content:'';position:absolute;left:-45%;top:0;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(150,190,255,.95),transparent);animation:cgSweep 1.15s ease-in-out infinite}
@keyframes cgSweep{0%{left:-45%}100%{left:100%}}
@keyframes cgSpin{to{transform:rotate(360deg)}}
@keyframes cgPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.02)}}
@keyframes cgBootOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.cgb-ring,.cgb-core,.cgb-orbit,.cgb-bar::after{animation:none}}