/* ==========================================================================
   Starry Background（浅色模式动态星空背景，Canvas 2D）
   配套脚本：starry-background.js
   - 全屏 fixed 背景层，z-index: 0，pointer-events: none，不影响任何交互
   - 仅浅色模式激活（is-active 由脚本按 data-theme 控制）
   - 深色模式：完全隐藏，零影响
   - Canvas 不可用时：脚本为容器添加 is-fallback，降级为静态浅蓝星空渐变
   ========================================================================== */

.starry-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;               /* 最底层：位于页面内容之下、body 背景之上 */
    pointer-events: none;     /* 不拦截任何点击/滚动 */
    opacity: 0;
    visibility: hidden;       /* 隐藏时不参与渲染，节省性能 */
    transition: opacity .6s ease, visibility .6s ease;
}

/* 浅色模式激活：淡入星空 */
.starry-bg.is-active {
    opacity: 1;
    visibility: visible;
}

/* 深色模式：完全隐藏（优先级最高，任何情况下深色模式不显示星空） */
:root[data-theme="dark"] .starry-bg,
[data-theme="dark"] .starry-bg {
    opacity: 0;
    visibility: hidden;
}

/* 降级背景：Canvas 不可用时的静态浅蓝梦幻星空渐变 + 静态星点 */
.starry-bg.is-fallback {
    background:
        radial-gradient(ellipse 70% 52% at 50% 38%, rgba(147, 197, 253, .25) 0%, transparent 70%),
        radial-gradient(ellipse 48% 40% at 84% 14%, rgba(196, 181, 253, .18) 0%, transparent 64%),
        radial-gradient(ellipse 44% 38% at 12% 86%, rgba(165, 243, 252, .16) 0%, transparent 62%),
        radial-gradient(2px 2px at 12% 22%, rgba(255, 255, 255, .9), transparent 100%),
        radial-gradient(2px 2px at 38% 14%, rgba(191, 219, 254, .7), transparent 100%),
        radial-gradient(2px 2px at 62% 30%, rgba(255, 255, 255, .85), transparent 100%),
        radial-gradient(2px 2px at 86% 18%, rgba(196, 181, 253, .65), transparent 100%),
        radial-gradient(2px 2px at 24% 46%, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(2px 2px at 56% 48%, rgba(165, 243, 252, .65), transparent 100%),
        radial-gradient(2px 2px at 78% 44%, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(2px 2px at 8% 70%, rgba(147, 197, 253, .6), transparent 100%),
        radial-gradient(2px 2px at 68% 78%, rgba(255, 255, 255, .55), transparent 100%),
        linear-gradient(180deg, #EAF4FF 0%, #D8E6FF 45%, #C6D9F9 75%, #B6CDF3 100%);
}

/* 画布：铺满容器 */
.starry-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}