/* ============================================
   天幕 Sky Canvas —— 天气氛围层样式
   ------------------------------------------------------------
   仅在启用页面生效（<html class="sky-on"> 且已注入 #skyLayer）。
   未启用页面不会加载本文件，也不产生任何影响。
   ============================================ */

#skyLayer {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--sky-bg);
    transition: background var(--sky-fade, 0.8s) ease;
}

/* Canvas 粒子层 */
#skyLayer .sky-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 装饰层通用 */
#skyLayer .sky-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}
#skyLayer[data-decor~="sun"] .sky-decor.is-sun,
#skyLayer[data-decor~="moon"] .sky-decor.is-moon,
#skyLayer[data-decor~="clouds"] .sky-decor.is-clouds,
#skyLayer[data-decor~="cloudsHeavy"] .sky-decor.is-cloudsHeavy,
#skyLayer[data-decor~="fog"] .sky-decor.is-fog,
#skyLayer[data-decor~="vignette"] .sky-decor.is-vignette { opacity: 1; }

/* 太阳 */
#skyLayer .is-sun {
    inset: -140px 6% auto auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 252, 222, 0.98) 0%, rgba(255, 226, 140, 0.6) 32%, rgba(255, 226, 140, 0) 70%);
    filter: blur(6px);
    animation: skySun 7s ease-in-out infinite;
}
/* 注意：keyframes 里不能动 opacity —— 动画会盖过 .sky-decor 的 opacity:0，
   导致雨天/雷雨/夜间也挂着一颗太阳。这里只做缩放呼吸。 */
@keyframes skySun {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* 月亮 */
#skyLayer .is-moon {
    inset: 8% 9% auto auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #fdfeff 0%, #dee7f7 52%, #a8b6d8 100%);
    box-shadow: 0 0 70px 22px rgba(190, 205, 255, 0.42), 0 0 150px 70px rgba(120, 140, 220, 0.2);
}

/* 云层
   ------------------------------------------------------------
   一朵云 = 两层「同一组椭圆」：
   · 椭圆写成 `ellipse rx% ry% at x% y%`，随云体等比缩放，三种云形一套写法；
   · 颜色全不透明，多个椭圆重叠时是「求并集」，不会像半透明那样叠出深斑和圆边；
   · 后层(--cloud-lo)整体下移、前层(--cloud-hi)上移，
     底部露出一道薄薄的暗边 —— 这就是云的厚度，而不是一块白豆腐；
   · 第一个椭圆又宽又扁、贴着底边，负责把云底压平。
   ⚠️ 不要退回「半透明叶瓣 + 各自径向渐变」：那样接缝会一圈圈露出来。
   ⚠️ 云体的宽高比按 ≈2.1:1 给。rx 和 ry 都写 1:1 会得到一排扁橄榄。 */
#skyLayer .sky-cloud-band {
    position: absolute;
    will-change: transform;
    animation: skyDrift linear infinite;
}
#skyLayer .sky-cloud-band .puff {
    position: absolute;
    inset: 0;
}
#skyLayer .sky-cloud-band .p {
    position: absolute;
    inset: 0;
    background-image: var(--sh);
    background-repeat: no-repeat;
}
#skyLayer .sky-cloud-band .p.lo {
    --c: var(--cloud-lo, #e6eefb);
    background-image: var(--sh-lo);
    transform: translateY(6%);
    filter: blur(16px);
    opacity: 0.92;
}
#skyLayer .sky-cloud-band .p.hi {
    --c: var(--cloud-hi, #ffffff);
    transform: translateY(-2%);
    filter: blur(8px);
}
/* 阴天/雨天：云更沉，边缘更糊，免得像贴上去的白纸 */
#skyLayer .is-cloudsHeavy .p.hi { filter: blur(11px); opacity: 0.94; }
#skyLayer .is-cloudsHeavy .p.lo { filter: blur(14px); }

/* 云形 A：主峰偏左、右侧收尾 */
#skyLayer .shA {
    --sh:
        radial-gradient(ellipse 30% 5%  at 36% 97%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 26% 10% at 50% 88%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 19% 42% at 36% 60%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 16% 30% at 16% 72%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 16% 34% at 58% 66%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 12% 24% at 78% 76%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 10% 18% at 30% 38%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 9%  16% at 50% 34%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 7%  12% at 66% 46%, var(--c) 0 99%, rgba(0,0,0,0) 100%);
    --sh-lo:
        radial-gradient(ellipse 42% 8%  at 42% 96%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 26% 40% at 38% 68%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 20% 30% at 62% 74%, var(--c) 0 99%, rgba(0,0,0,0) 100%);
}
/* 云形 B：宽扁、起伏多 */
#skyLayer .shB {
    --sh:
        radial-gradient(ellipse 34% 5%  at 50% 97%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 30% 10% at 52% 88%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 15% 40% at 30% 62%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 14% 42% at 62% 60%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 13% 36% at 46% 66%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 12% 32% at 14% 74%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 11% 30% at 78% 70%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 8%  20% at 90% 78%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 8%  15% at 42% 36%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 7%  14% at 24% 40%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 6%  12% at 66% 40%, var(--c) 0 99%, rgba(0,0,0,0) 100%);
    --sh-lo:
        radial-gradient(ellipse 46% 8%  at 50% 96%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 24% 34% at 38% 70%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 22% 32% at 66% 72%, var(--c) 0 99%, rgba(0,0,0,0) 100%);
}
/* 云形 C：单峰高耸 */
#skyLayer .shC {
    --sh:
        radial-gradient(ellipse 30% 6%  at 44% 96%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 24% 12% at 50% 88%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 17% 44% at 38% 56%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 13% 30% at 18% 72%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 13% 26% at 62% 74%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 9%  18% at 82% 82%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 8%  16% at 44% 32%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 6%  11% at 26% 46%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 5%  9%  at 58% 44%, var(--c) 0 99%, rgba(0,0,0,0) 100%);
    --sh-lo:
        radial-gradient(ellipse 38% 8%  at 46% 96%, var(--c) 0 99%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 22% 40% at 40% 66%, var(--c) 0 99%, rgba(0,0,0,0) 100%);
}

@keyframes skyDrift {
    from { transform: translateX(-40px); }
    to { transform: translateX(180px); }
}
/* 位置刻意错开：近处大而清晰、远处小而淡，形成层次 */
#skyLayer .is-clouds .sky-cloud-band.a { width: 330px; height: 157px; left: -8%;  top: 7%;  opacity: 0.95; animation-duration: 48s; }
#skyLayer .is-clouds .sky-cloud-band.b { width: 450px; height: 212px; left: 32%;  top: -3%; opacity: 0.84; animation-duration: 62s; animation-direction: reverse; }
#skyLayer .is-clouds .sky-cloud-band.c { width: 290px; height: 140px; left: 71%;  top: 14%; opacity: 0.74; animation-duration: 54s; }
#skyLayer .is-clouds .sky-cloud-band.d { width: 360px; height: 172px; left: 12%;  top: 36%; opacity: 0.52; animation-duration: 72s; animation-direction: reverse; }

#skyLayer .is-cloudsHeavy .sky-cloud-band.a { width: 500px; height: 168px; left: -10%; top: 0%;  opacity: 0.98; animation-duration: 74s; }
#skyLayer .is-cloudsHeavy .sky-cloud-band.b { width: 620px; height: 196px; left: 26%;  top: -7%; opacity: 0.95; animation-duration: 92s; animation-direction: reverse; }
#skyLayer .is-cloudsHeavy .sky-cloud-band.c { width: 420px; height: 146px; left: 68%;  top: 5%;  opacity: 0.92; animation-duration: 82s; }
#skyLayer .is-cloudsHeavy .sky-cloud-band.d { width: 660px; height: 152px; left: 4%;   top: 27%; opacity: 0.88; animation-duration: 112s; animation-direction: reverse; }
#skyLayer .is-cloudsHeavy .sky-cloud-band.e { width: 540px; height: 128px; left: 54%;  top: 38%; opacity: 0.82; animation-duration: 100s; }

/* 晴天只飘几缕远云，压得很淡，不抢主体内容 */
#skyLayer[data-mode="sunny"] .is-clouds { opacity: 0.62; }
#skyLayer[data-mode="sunny"] .is-clouds .sky-cloud-band.d { display: none; }

/* 雾 */
#skyLayer .is-fog .sky-fogband {
    position: absolute;
    left: -12%;
    width: 124%;
    height: 170px;
    filter: blur(40px);
    background: rgba(255, 255, 255, 0.85);
    will-change: transform;
    animation: skyFog linear infinite;
}
@keyframes skyFog {
    0% { transform: translateX(-50px); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(-50px); }
}
#skyLayer .is-fog .sky-fogband.f1 { top: 28%; animation-duration: 28s; }
#skyLayer .is-fog .sky-fogband.f2 { top: 54%; opacity: 0.7; animation-duration: 36s; animation-direction: reverse; }

/* 闪电（雷雨）：不规则双闪 */
#skyLayer .is-flash {
    background: radial-gradient(900px 460px at 62% -4%, rgba(255, 255, 255, 0.95), rgba(214, 224, 255, 0.35) 42%, rgba(255, 255, 255, 0) 66%);
}
#skyLayer[data-decor~="flash"] .is-flash { animation: skyFlash 9.5s ease-in-out infinite; }
@keyframes skyFlash {
    0%, 80%, 100% { opacity: 0; }
    81% { opacity: 0.95; }
    82% { opacity: 0.12; }
    83.2% { opacity: 0.8; }
    84.5% { opacity: 0; }
    88% { opacity: 0.5; }
    89% { opacity: 0; }
}

/* 暗角 */
#skyLayer .is-vignette {
    background: radial-gradient(circle at 50% 30%, transparent 40%, rgba(2, 6, 23, 0.5) 100%);
}

@media (prefers-reduced-motion: reduce) {
    #skyLayer .sky-cloud-band,
    #skyLayer .sky-fogband,
    #skyLayer .is-sun,
    #skyLayer[data-decor~="flash"] .is-flash { animation: none !important; }
}