/* ============================================================
   星空背景层（深空 · 星空 · 星云 · 恒星点点）
   - 纯 CSS/JS，零图片请求（不伤首屏带宽，本站核心痛点）
   - 仅深色主题（<html data-theme="dark">）启用；浅色主题不渲染
   - 固定最底层（z-index:-2），一次绘制，滚动/切页不重绘
   - 动画只动 transform/opacity，GPU 友好
   - 开关：localStorage 'gvStarfield' = 'on' | 'off'（后台 UI 在 B7 接入）
   ============================================================ */

/* 默认隐藏；仅深色主题显示 */
#starfield { display: none; }

:root[data-theme="dark"] #starfield {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    /* 深空底色：比 --page(#0E1014) 更通透的宇宙渐变 + 两团冷调星云 */
    background:
        radial-gradient(1200px 700px at 18% 12%, rgba(58, 86, 165, 0.18), transparent 60%),
        radial-gradient(1000px 800px at 85% 80%, rgba(120, 62, 150, 0.16), transparent 62%),
        radial-gradient(900px 600px at 70% 18%, rgba(40, 120, 140, 0.12), transparent 60%),
        linear-gradient(160deg, #0a0c10 0%, #0e1014 45%, #0b0d12 100%);
    pointer-events: none;
}

/* 深色模式下让页面底色透明，星空透出；浅色模式保持原样 */
:root[data-theme="dark"] body { background: transparent; }

/* 各图层 */
#starfield .sf-layer {
    position: absolute;
    inset: -10%;
    will-change: transform, opacity;
}
/* 远 / 中 / 近 三层视差漂移（星点本体由 JS 用 box-shadow 生成）
   alternate：正向漂出→反向漂回原点，位置连续无硬切；ease-in-out 让折返处柔和 */
#starfield .sf-stars-far  { animation: sfDriftFar  70s ease-in-out infinite alternate; }
#starfield .sf-stars-mid  { animation: sfDriftMid  38s ease-in-out infinite alternate; }
#starfield .sf-stars-near { animation: sfDriftNear 20s ease-in-out infinite alternate; }
/* 快速游走亮星层，让星空“活着” */
#starfield .sf-stars-fast { animation: sfDriftFast 12s ease-in-out infinite alternate; }

@keyframes sfDriftFar  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-14px, -10px, 0); } }
@keyframes sfDriftMid  { from { transform: translate3d(0,0,0); } to { transform: translate3d(18px, -16px, 0); } }
@keyframes sfDriftNear { from { transform: translate3d(0,0,0); } to { transform: translate3d(-26px, 22px, 0); } }
@keyframes sfDriftFast { from { transform: translate3d(0,0,0); } to { transform: translate3d(40px, -30px, 0); } }

/* 星点本体：一个 2px 圆点，靠 box-shadow 复制成满天星（JS 注入 shadow 列表） */
#starfield .sf-stars-far,
#starfield .sf-stars-mid,
#starfield .sf-stars-near,
#starfield .sf-stars-fast {
    width: 2px; height: 2px; border-radius: 50%;
    background: transparent;
}
#starfield .sf-stars-far  { box-shadow: var(--sf-far,  none); }
#starfield .sf-stars-mid  { box-shadow: var(--sf-mid,  none); }
#starfield .sf-stars-near { box-shadow: var(--sf-near, none); }
#starfield .sf-stars-fast { box-shadow: var(--sf-fast, none); opacity: .9; }

/* 内页淡星层：比首页更隐约，透明度低，不在内页堆满星云（随 body 无特殊类即全局生效，此处统一压低） */
:root[data-theme="dark"] #starfield .sf-stars-fast { opacity: .55; }

/* 流星：拖尾渐变线段，方向/速度由 JS 注入的 --a/--mx/--my 决定，亮头在前 */
#starfield .sf-meteor {
    position: absolute;
    top: var(--my, 10%);
    left: var(--mx, 20%);
    width: 140px; height: 2px;
    transform: rotate(var(--a, 35deg));
    transform-origin: left center;
    background: linear-gradient(90deg, transparent 12%, rgba(170,200,255,.3) 50%, rgba(255,255,255,.95));
    border-radius: 2px;
    filter: drop-shadow(0 0 4px rgba(180,210,255,.5));
    opacity: 0;
    animation: sfMeteor var(--dur, 9s) linear infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes sfMeteor {
    0%   { opacity: 0; transform: rotate(var(--a, 35deg)) translateX(0); }
    6%   { opacity: .85; }
    18%  { opacity: .85; }
    30%  { opacity: 0; transform: rotate(var(--a, 35deg)) translateX(360px); }
    100% { opacity: 0; transform: rotate(var(--a, 35deg)) translateX(360px); }
}

/* 恒星：带光晕的明亮星点，呼吸式明暗 */
#starfield .sf-star {
    position: absolute;
    width: 4px; height: 4px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255,255,255,.55), 0 0 16px 6px rgba(150,190,255,.35);
    animation: sfBreathe var(--bdur, 3.4s) ease-in-out infinite;
    animation-delay: var(--bdelay, 0s);
}
@keyframes sfBreathe {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* 关掉星空时（gvStarfield='off'）彻底隐藏，且不透明化 body（回退原底色） */
:root[data-theme="dark"] #starfield.sf-off { display: none; }

/* ============================================================
   ★ 手机端：隐藏整个星空（含星点/流星/闪星），动态效果全关，
   背景交给 body 的纯黑兜底。
   背景：2026-10-21 真机防闪曾把星空「静态化」（停动画+藏流星闪星），
   但仍被用户发现「动态效果没有了」；且防闪只是权宜。
   决定：手机端不渲染星空，从根上根除弹层透底闪烁、并省电；
   深色下以纯黑背景（#000）保持质感，浅色下沿用浅底。
   原「静态化」逻辑保留在下方注释，便于回溯：
     body.mobile-mode #starfield .sf-layer,
     body.mobile-mode #starfield .sf-star { animation: none !important; }
     body.mobile-mode #starfield .sf-meteors,
     body.mobile-mode #starfield .sf-stars-glow { display: none; }
     body.mobile-mode #starfield .sf-layer { will-change: auto; }
   ============================================================ */
body.mobile-mode #starfield { display: none !important; }
/* 手机端深色：纯黑背景兜底（星空已隐藏，统一纯黑保持质感） */
:root[data-theme="dark"] body.mobile-mode { background: #000; }