/* ============================================================
 * YOS-Pass 首页背景场景（移植自 deepseek-harness-bg-full）
 * 分层：z-0 流体星云(WebGL2) / z-2 图标粒子 / z-5 网格粒子
 * 背景 fixed 全屏铺满视口，参照原版 deepseek.com/harness
 * ============================================================ */

.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(20, 40, 90, .55) 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 100%, rgba(10, 20, 55, .6) 0%, transparent 60%),
    #05070d;
}

#nebula {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* 原版 mask：仅对流体星云顶部不透明渐隐到底部透明，图标/网格粒子层不受裁切 */
  mask: linear-gradient(#000000fc 0%, #000000e8 8.98%, transparent 100%);
  -webkit-mask: linear-gradient(#000000fc 0%, #000000e8 8.98%, transparent 100%);
}

/* 网格粒子网络层（md 以上显示） */
#grid-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
}
@media (min-width: 768px) { #grid-layer { display: block; } }

/* 图标粒子特效层（全视口显示，screen 混合；md 以上额外放大） */
#icon-layer-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
#icon-layer-box {
  width: min(72vmin, 560px);
  height: min(72vmin, 560px);
  flex-shrink: 0;
  position: relative;
  transform: translateY(-2%);
}
#icon-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
@media (min-width: 768px) { #icon-layer-wrap { align-items: center; justify-content: flex-end; padding-right: 6%; } #icon-layer-box { transform: translate(0, -2%); } }

/* 底部光晕渐变 */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.glow-1 { width: 480px; height: 480px; left: 6%; top: 18%; background: radial-gradient(circle, #16377a 0%, transparent 70%); opacity: .34; }
.glow-2 { width: 680px; height: 420px; left: 50%; top: 55%; transform: translateX(-50%); background: radial-gradient(circle, #1e4d8c 0%, transparent 70%); opacity: .4; }
.glow-3 { width: 380px; height: 380px; right: 4%; top: 30%; background: radial-gradient(circle, #2a2f6e 0%, transparent 70%); opacity: .26; }

/* ============ 日/夜主题：背景表现 ============
 * 夜模式：星云全强度；日模式：降低星云可见度并叠加浅色柔光，
 * 让背景与浅色卡片区自然衔接
 */
body[data-theme="dark"]  .bg-scene { opacity: 1; }
body[data-theme="light"] .bg-scene {
  opacity: .55;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(99, 140, 255, .30) 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 100%, rgba(120, 140, 230, .28) 0%, transparent 60%),
    #dde6f3;
}
body[data-theme="light"] .bg-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.32) 100%);
  z-index: 3;
}
body[data-theme="light"] .glow-1 { background: radial-gradient(circle, #7c9ff0 0%, transparent 70%); }
body[data-theme="light"] .glow-2 { background: radial-gradient(circle, #8fb2f2 0%, transparent 70%); }
body[data-theme="light"] .glow-3 { background: radial-gradient(circle, #9aa4e8 0%, transparent 70%); }