/* XWP 开场仪式层 v4 —— 宇宙灵气 · 三幕灵性圆满（全屏 Canvas 2D，仅首次访问播放） */
.xwp-intro{
  position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index:999999;
  background:radial-gradient(ellipse at 50% 42%, #2a2160 0%, #171243 46%, #0a0820 100%);
  overflow:hidden; opacity:1; transition:opacity .45s ease;
}
.xwp-intro.is-out{ opacity:0; pointer-events:none; }
.xwp-intro canvas{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; }

/* 宇宙灵气星云：紫金双色呼吸光晕（第 1 秒聚灵成光的底光，JS 动态创建） */
.xwp-intro-glow{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,226,170,.16) 0%, rgba(124,140,255,.18) 32%, rgba(91,200,216,.08) 54%, rgba(124,140,255,0) 72%);
  animation:xwpGlowBreathe 3.2s ease-in-out infinite;
}
@keyframes xwpGlowBreathe{
  0%,100%{ opacity:.45; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.06); }
}

.xwp-intro-stage{
  position:relative; z-index:2; text-align:center; pointer-events:none;
  padding:0 24px; width:100%;
}
.xwp-intro-title{
  font-family:"Noto Serif SC",serif; font-size:34px; font-size:clamp(30px,7vw,58px); font-weight:900;
  margin:0 0 14px; letter-spacing:.52em; text-indent:.52em;
  background:linear-gradient(180deg,#fff8e6 0%,#e7c889 55%,#b99a54 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:scale(1.1); filter:blur(14px);
}
/* 标题浮现：由朦胧到清晰，字距舒展，柔光点亮（灵气而非冲击） */
.xwp-intro-title.is-on{ animation:xwpTitleRise .72s cubic-bezier(.22,.8,.24,1) forwards; }
@keyframes xwpTitleRise{
  0%  { opacity:0; transform:scale(1.1); filter:blur(14px); letter-spacing:.52em; text-indent:.52em; }
  100%{ opacity:1; transform:scale(1);   filter:blur(0);    letter-spacing:.2em;  text-indent:.2em; }
}
.xwp-intro-title.is-on{ filter:blur(0) drop-shadow(0 0 26px rgba(231,200,137,.38)); }

/* 星火点亮的柔光层（JS 打上 is-on 后由 CSS animation 驱动，低峰值不刺眼） */
.xwp-intro-flash{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, #fffdf4 0%, #ffeecb 40%, rgba(255,238,201,0) 72%);
}
.xwp-intro-flash.is-on{ animation:xwpFlashSoft .8s cubic-bezier(.16,.72,.3,1) forwards; }
@keyframes xwpFlashSoft{
  0%  { opacity:0; }
  12% { opacity:.22; }
  100%{ opacity:0; }
}

.xwp-intro-line{
  font-size:13px; font-size:clamp(12px,3.1vw,15px); color:rgba(226,220,255,.78);
  letter-spacing:.32em; margin:0 0 30px; min-height:1.4em;
  opacity:0; transition:opacity .4s ease;
}
.xwp-intro-line.is-on{ opacity:1; }

.xwp-intro-bar{
  width:min(300px,62vw); height:1.5px; margin:0 auto; border-radius:2px;
  background:rgba(255,255,255,.10); overflow:hidden;
}
.xwp-intro-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#7C8CFF,#5BC8D8 45%,#E7C889);
  background-size:200% 100%;
  animation:xwpBarFlow 1.2s linear infinite;
  transition:width .15s linear;
}
@keyframes xwpBarFlow{
  0%  { background-position:0% 0; }
  100%{ background-position:200% 0; }
}

.xwp-intro-skip{
  position:absolute; right:20px; bottom:22px;
  right:max(20px,env(safe-area-inset-right)); bottom:max(22px,env(safe-area-inset-bottom));
  z-index:3; padding:8px 16px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:rgba(235,230,255,.8); font-size:12px; letter-spacing:.1em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s, color .25s;
}
.xwp-intro-skip:hover{ background:rgba(255,255,255,.13); color:#fff; }

/* 尊重系统「减少动态效果」偏好：直接不播 */
@media (prefers-reduced-motion: reduce){
  .xwp-intro{ display:none !important; }
}
@media (max-width:560px){
  .xwp-intro-line{ letter-spacing:.2em; margin-bottom:24px; }
  /* 每次打开都播，跳过按钮必须好按：保证 >=40px 触控高度 */
  .xwp-intro-skip{ font-size:13px; padding:11px 20px; min-height:40px; }
}

/* 开场期间锁定页面滚动 */
body.xwp-intro-lock{ overflow:hidden; }

/* 终极保险：即便 JS 完全失效（老内核报错/被拦截），4.6 秒后开场层也会自动让路，
   绝不把用户永久挡在页面之外。JS 正常时远早于此时间已自行移除。 */
.xwp-intro{ animation:xwpIntroFailSafe .01s linear 4.6s forwards; }
@keyframes xwpIntroFailSafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}