/* ============================================================
 * VR 开屏 v4 · 全息数字星球（2026-09-29 主理人指令重做，审美线：senior-ui-designer）
 * 设计语言：深空全息数字星球——黑蓝深空底 + 青色发光粒子线框球 + 数据流 + 悬浮玻璃数据牌
 * 配色：青 #2FD8FF(~192°) 主导 / 紫 #B026CF·#C13FE0(286-288°) 一丢丢点缀 / 白 / 金 #FCD34D
 * v4.1（2026-09-29 主理人反馈）：①微带一丢丢紫（背景光晕/标题渐变一档/c2 牌/外轨道）②文字终端化+英文副标
 * ============================================================ */
#vrIntro{
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  background:
    radial-gradient(30% 24% at 84% 88%, rgba(138,23,168,.15), transparent 70%),
    radial-gradient(26% 20% at 10% 10%, rgba(176,38,207,.10), transparent 70%),
    radial-gradient(46% 36% at 50% 44%, rgba(47,216,255,.13), transparent 70%),
    radial-gradient(130% 90% at 50% 40%, rgba(16,60,92,.28), transparent 60%),
    linear-gradient(180deg,#030711 0%,#081221 55%,#020509 100%);
  opacity:1;
  transition:opacity .7s cubic-bezier(.4,0,.2,1);
}
body.vr-lock .app{opacity:0;visibility:hidden;pointer-events:none;}
body.vr-ended .app{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .65s ease .12s,visibility .65s;}
#vrIntro.is-hidden{opacity:0;pointer-events:none;}
#vrIntro.is-gone{display:none;}

/* ---- 星空（两层 box-shadow 星点，纯 CSS 零 JS） ---- */
.vr-stars{position:absolute;inset:0;}
.vr-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:transparent;}
.vr-stars i:nth-child(1){
  box-shadow: 8vw 12vh 0 0 rgba(255,255,255,.8), 21vw 78vh 0 0 rgba(255,255,255,.5), 33vw 8vh 0 0 rgba(159,234,255,.9),
    45vw 90vh 0 0 rgba(255,255,255,.55), 58vw 15vh 0 0 rgba(255,255,255,.7), 70vw 85vh 0 0 rgba(159,234,255,.6),
    82vw 22vh 0 0 rgba(255,255,255,.8), 93vw 60vh 0 0 rgba(255,255,255,.5), 12vw 45vh 0 0 rgba(255,255,255,.65),
    88vw 38vh 0 0 rgba(159,234,255,.7), 5vw 68vh 0 0 rgba(255,255,255,.5), 96vw 82vh 0 0 rgba(255,255,255,.7),
    27vw 30vh 0 0 rgba(255,255,255,.45), 63vw 55vh 0 0 rgba(255,255,255,.4), 76vw 8vh 0 0 rgba(255,255,255,.6);
  animation:vrTwk 3.2s ease-in-out infinite alternate;
}
.vr-stars i:nth-child(2){
  box-shadow: 15vw 22vh 0 1px rgba(159,234,255,.75), 40vw 70vh 0 1px rgba(255,255,255,.5),
    52vw 6vh 0 0 rgba(255,255,255,.8), 68vw 40vh 0 1px rgba(159,234,255,.6), 90vw 12vh 0 0 rgba(255,255,255,.65),
    3vw 32vh 0 1px rgba(255,255,255,.5), 36vw 55vh 0 0 rgba(159,234,255,.55), 73vw 68vh 0 1px rgba(255,255,255,.5),
    85vw 90vh 0 0 rgba(255,255,255,.6), 19vw 92vh 0 1px rgba(159,234,255,.5), 47vw 28vh 0 0 rgba(255,255,255,.55),
    60vw 76vh 0 1px rgba(255,255,255,.45), 79vw 50vh 0 0 rgba(159,234,255,.6), 30vw 85vh 0 1px rgba(255,255,255,.5);
  animation:vrTwk 4.1s ease-in-out infinite alternate-reverse;
}
@keyframes vrTwk{from{opacity:.55}to{opacity:1}}

/* ---- 3D 数字星球 canvas ---- */
#vrPlanetCanvas{position:absolute;inset:0;width:100%;height:100%;}
/* 移动端/降级兜底：CSS 全息假星球 */
.vr-planet-fallback{
  position:absolute;left:50%;top:50%;width:min(74vmin,640px);height:min(74vmin,640px);
  transform:translate(-50%,-52%);border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(190,245,255,.9) 0%, rgba(47,216,255,.75) 28%, rgba(14,90,120,.9) 60%, rgba(4,14,26,1) 100%);
  box-shadow:0 0 80px rgba(47,216,255,.4), 0 0 130px rgba(176,38,207,.2), inset -30px -40px 90px rgba(2,8,16,.9);
  display:none;
}
#vrIntro.no-webgl .vr-planet-fallback{display:block;}

/* ---- 悬浮玻璃数据牌（HUD 数字感核心） ---- */
.vr-holo-chips{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1s ease 2.9s;}
#vrIntro.is-ready .vr-holo-chips{opacity:1;}
.vr-chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  background:rgba(8,26,42,.44);backdrop-filter:blur(6px);
  border:1px solid rgba(120,220,255,.32);border-radius:10px;
  padding:8px 13px;font-size:11px;letter-spacing:.08em;color:#BFE7F7;white-space:nowrap;
  box-shadow:0 0 18px rgba(47,216,255,.14), inset 0 1px 0 rgba(255,255,255,.12);
  animation:vrChipFloat 5.4s ease-in-out infinite;
}
.vr-chip b{color:#FFFFFF;font-size:12.5px;font-weight:700;letter-spacing:.04em;}
.vr-chip .k{width:7px;height:7px;border-radius:50%;background:#2FD8FF;
  box-shadow:0 0 9px rgba(47,216,255,.95);flex:none;animation:vrDotPulse 1.8s ease-in-out infinite;}
.vr-chip.c1{left:9%;top:29%;animation-delay:0s;}
.vr-chip.c2{right:8%;top:44%;animation-delay:1.5s;border-color:rgba(193,63,224,.34);}
.vr-chip.c2 .k{background:#C13FE0;box-shadow:0 0 9px rgba(193,63,224,.95);}
.vr-chip.c3{left:13%;bottom:27%;animation-delay:2.8s;}
@keyframes vrChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---- 轨道椭圆 + 卫星 ---- */
.vr-orbits{position:absolute;inset:0;width:100%;height:100%;}
.vr-orbits ellipse:first-child{stroke:rgba(110,220,255,0.5) !important;stroke-width:1.6 !important;filter:drop-shadow(0 0 4px rgba(47,216,255,.75));}
.vr-orbits ellipse:last-of-type{stroke:rgba(176,38,207,0.4) !important;filter:drop-shadow(0 0 5px rgba(176,38,207,.45));}
.vr-sat{opacity:1;filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor);}

/* ---- 像素数据方块 ---- */
.vr-pixels{position:absolute;inset:0;pointer-events:none;}
.vr-px{
  position:absolute;background:rgba(120,220,255,.4);
  box-shadow:0 0 10px rgba(47,216,255,.55);
  animation:vrPxFloat linear infinite;
}
@keyframes vrPxFloat{
  0%{transform:translateY(12vh) scale(.7);opacity:0}
  12%{opacity:.95}
  50%{transform:translateY(-6vh) scale(1.05);opacity:.65}
  88%{opacity:.9}
  100%{transform:translateY(-18vh) scale(.75);opacity:0}
}

/* ---- 左上品牌徽标 / 右上跳过 ---- */
.vr-brand{
  position:absolute;top:22px;left:26px;display:flex;align-items:center;gap:10px;
  opacity:0;transition:opacity .9s ease .3s;z-index:3;
}
#vrIntro.is-ready .vr-brand{opacity:1;}
.vr-brand-badge{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2FD8FF,#0A4E63);color:#FFFFFF;font-size:15px;
  box-shadow:0 0 14px rgba(47,216,255,.55);
}
.vr-brand-txt{display:flex;flex-direction:column;line-height:1.25;}
.vr-brand-txt b{color:#EAF9FF;font-size:14px;letter-spacing:.22em;}
.vr-brand-txt i{color:rgba(140,205,235,.6);font-style:normal;font-size:11px;letter-spacing:.3em;}
.vr-skip{
  position:absolute;top:22px;right:26px;z-index:3;
  background:transparent;border:none;color:#9FC6DC;font-size:13px;letter-spacing:.14em;
  cursor:pointer;opacity:0;transition:opacity .9s ease .3s,color .2s;
}
#vrIntro.is-ready .vr-skip{opacity:1;}
.vr-skip:hover{color:#fff;}

/* ---- 中央文字栈（压在星球上） ---- */
.vr-copy{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  text-align:center;z-index:2;pointer-events:none;width:min(92vw,900px);
}
.vr-copy p,.vr-copy h1{margin:0;}
.vr-hello{
  font-family:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;
  color:#C9F2FF;font-size:clamp(14px,1.6vw,19px);letter-spacing:.5em;padding-left:.5em;
  min-height:1.6em;opacity:0;animation:vrFadeIn .8s ease .5s forwards;
}
.vr-hello::before{content:'> ';color:#56D9FF;text-shadow:0 0 8px rgba(47,216,255,.8);}
.vr-hello-en{
  margin-top:8px !important;
  font-family:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;
  font-size:clamp(9px,.85vw,11px);letter-spacing:.42em;padding-left:.42em;color:#D28AE8;
  text-shadow:0 0 10px rgba(176,38,207,.45);
  opacity:0;animation:vrFadeIn .9s ease 2.4s forwards;
}
.vr-hello-en b{font-weight:400;color:#D277F0;}
.vr-cursor{color:#2FD8FF;animation:vrBlink 1s steps(2) infinite;margin-left:2px;}
@keyframes vrBlink{50%{opacity:0}}
.vr-welcome{
  margin-top:14px !important;color:#9FC3D8;font-size:clamp(12px,1.35vw,16px);letter-spacing:.34em;padding-left:.34em;
  opacity:0;animation:vrFadeIn .8s ease 1.5s forwards;
}
.vr-welcome em{font-style:normal;color:#FCD34D;text-shadow:0 0 12px rgba(252,211,77,.4);}
.vr-title-main{
  margin-top:6px !important;
  font-size:clamp(52px,9.2vw,124px);font-weight:800;letter-spacing:.06em;
  background:linear-gradient(100deg,#FFFFFF 0%,#BFF3FF 20%,#2FD8FF 42%,#FFFFFF 60%,#D277F0 82%,#8FE4FF 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(47,216,255,.55)) drop-shadow(0 0 64px rgba(176,38,207,.3)) drop-shadow(0 4px 26px rgba(8,50,80,.6));
  opacity:0;transform:scale(.92);letter-spacing:.08em;padding-left:.08em;
  animation:vrTitleIn 1.1s cubic-bezier(.16,1,.3,1) 2.1s forwards, vrTitleShine 4.5s linear 3.2s infinite;
}
@keyframes vrTitleIn{to{opacity:1;transform:scale(1)}}
@keyframes vrTitleShine{0%{background-position:120% 50%}100%{background-position:-120% 50%}}
.vr-title-en{
  margin-top:10px !important;
  font-family:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;
  font-size:clamp(10px,1.05vw,13px);letter-spacing:.52em;padding-left:.52em;
  background:linear-gradient(90deg,#7FE3FF 0%,#C13FE0 55%,#7FE3FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(176,38,207,.4));
  opacity:0;animation:vrFadeIn .9s ease 2.75s forwards;
}
.vr-meta{
  margin-top:14px !important;color:#B9D9EA;font-size:clamp(11px,1.25vw,15px);letter-spacing:.2em;padding-left:.2em;
  opacity:0;animation:vrFadeIn .8s ease 2.7s forwards;
}
.vr-meta span{color:#56D9FF;margin:0 .6em;}
.vr-clickhint{
  margin-top:20px !important;color:#EAF9FF;font-size:clamp(12px,1.4vw,17px);letter-spacing:.3em;padding-left:.3em;
  opacity:0;animation:vrFadeIn .8s ease 3.3s forwards;
}
.vr-clickhint .dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:#FCD34D;
  box-shadow:0 0 10px rgba(252,211,77,.9);margin-right:10px;vertical-align:1px;
  animation:vrDotPulse 1.6s ease-in-out infinite;
}
@keyframes vrDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@keyframes vrFadeIn{to{opacity:1}}

/* ---- 进入按钮（青色全息胶囊） ---- */
.vr-enter{
  position:absolute;bottom:7.5vh;left:50%;transform:translateX(-50%) translateY(14px);
  opacity:0;z-index:3;
  background:rgba(6,22,36,.4);backdrop-filter:blur(4px);
  border:1.5px solid rgba(170,235,255,.72);border-radius:999px;
  color:#fff;font-size:clamp(14px,1.5vw,17px);font-weight:600;letter-spacing:.24em;padding:.9em 2.6em .9em 2.84em;
  cursor:pointer;
  box-shadow:0 0 26px rgba(47,216,255,.4), inset 0 1px 0 rgba(255,255,255,.2);
  transition:opacity .8s ease 3.6s, transform .8s cubic-bezier(.16,1,.3,1) 3.6s, filter .2s, box-shadow .2s;
  animation:vrBtnBreath 2.6s ease-in-out 4s infinite;
}
#vrIntro.is-ready .vr-enter{opacity:1;transform:translateX(-50%) translateY(0);}
.vr-enter:hover{filter:brightness(1.25);box-shadow:0 0 44px rgba(47,216,255,.7);}
@keyframes vrBtnBreath{0%,100%{box-shadow:0 0 26px rgba(47,216,255,.4)}50%{box-shadow:0 0 44px rgba(80,225,255,.72)}}

/* ---- HUD 科技层：全屏扫描线 + 四角框 ---- */
.vr-scan{
  position:absolute;left:0;right:0;top:-4px;height:2px;z-index:2;pointer-events:none;opacity:.4;
  background:linear-gradient(90deg,transparent, rgba(120,220,255,.9) 30%, rgba(255,255,255,.95) 50%, rgba(120,220,255,.9) 70%, transparent);
  animation:vrScan 7s linear infinite;
}
@keyframes vrScan{0%{top:-4px}100%{top:100%}}
.vr-corner{position:absolute;width:34px;height:34px;z-index:2;pointer-events:none;opacity:.5;}
.vr-corner.tl{top:14px;left:14px;border-top:1.5px solid #56D9FF;border-left:1.5px solid #56D9FF;}
.vr-corner.tr{top:14px;right:14px;border-top:1.5px solid #56D9FF;border-right:1.5px solid #56D9FF;}
.vr-corner.bl{bottom:14px;left:14px;border-bottom:1.5px solid #56D9FF;border-left:1.5px solid #56D9FF;}
.vr-corner.br{bottom:14px;right:14px;border-bottom:1.5px solid #56D9FF;border-right:1.5px solid #56D9FF;}

/* ---- 光爆转场 ---- */
.vr-flash{
  position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%, #FFFFFF 0%, #CFF3FF 26%, #2FD8FF 55%, rgba(3,8,17,0) 78%);
}
#vrIntro.is-launching .vr-flash{animation:vrFlash .55s ease forwards;}
#vrIntro.is-launching .vr-copy,
#vrIntro.is-launching .vr-enter,
#vrIntro.is-launching .vr-brand,
#vrIntro.is-launching .vr-skip,
#vrIntro.is-launching .vr-holo-chips,
#vrIntro.is-launching .vr-pixels,
#vrIntro.is-launching .vr-orbits,
#vrIntro.is-launching .vr-scan,
#vrIntro.is-launching .vr-corner{animation:vrDissolve .5s ease forwards;}
#vrIntro.is-launching #vrPlanetCanvas{transition:transform .55s ease,filter .55s ease;transform:scale(1.14);filter:brightness(1.7) blur(2px);}
@keyframes vrFlash{0%{opacity:0}55%{opacity:1}100%{opacity:1}}
@keyframes vrDissolve{to{opacity:0}}

@media (max-width:640px){
  .vr-hello{font-size:12px;letter-spacing:.4em;padding-left:.4em;}
  .vr-hello-en{font-size:11px;letter-spacing:.3em;padding-left:.3em;margin-top:5px !important;}
  .vr-title-en{font-size:11px;letter-spacing:.34em;padding-left:.34em;margin-top:6px !important;}
  .vr-welcome{font-size:11px;letter-spacing:.24em;padding-left:.24em;}
  .vr-meta{font-size:11px;letter-spacing:.12em;padding-left:.12em;}
  .vr-enter{bottom:6.5vh;font-size:13px;padding:.85em 2.2em .85em 2.44em;}
  .vr-brand{top:16px;left:16px;}
  .vr-skip{top:16px;right:16px;font-size:12px;}
  .vr-planet-fallback{width:88vmin;height:88vmin;}
  .vr-chip{font-size:11px;padding:5px 9px;border-radius:8px;}
  .vr-chip b{font-size:11px;}
  .vr-chip.c1{left:5%;top:23%;}
  .vr-chip.c2{right:4%;top:30.5%;}
  .vr-chip.c3{left:8%;bottom:30%;}
}