/* 天气场景：太阳 / 云朵 / 雨 / 雪 */
.weather{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.weather-tint{position:absolute;inset:0;transition:background-color 2.2s ease}
.weather[data-weather="sunny"] .weather-tint{background-color:rgba(255,244,214,.20)}
.weather[data-weather="cloudy"] .weather-tint{background-color:rgba(222,225,238,.18)}
.weather[data-weather="rain"] .weather-tint{background-color:rgba(90,105,140,.17)}
.weather[data-weather="snow"] .weather-tint{background-color:rgba(225,235,245,.22)}

/* 太阳 */
.sun{position:absolute;top:74px;right:22px;width:96px;height:96px;opacity:0;transition:opacity 1.5s ease;filter:drop-shadow(0 0 22px rgba(255,190,60,.45))}
.weather[data-weather="sunny"] .sun{opacity:1}
.sun svg{display:block;width:100%;height:100%;animation:sunPulse 4.5s ease-in-out infinite}
@keyframes sunPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.07) rotate(6deg)}}

/* 云朵 */
.cloud{position:absolute;left:0;transform:translateX(-240px);animation:drift linear infinite}
.cloud svg{display:block;width:100%;height:100%}
.cloudA{top:122px;width:150px;animation-duration:85s;animation-delay:-25s;opacity:.94}
.cloudB{top:72px;width:112px;animation-duration:105s;animation-delay:-70s;opacity:.86}
.cloudC{top:232px;width:170px;animation-duration:125s;animation-delay:-100s;opacity:.82}
.cloudD{top:310px;width:120px;animation-duration:95s;animation-delay:-50s;opacity:.72}
@keyframes drift{from{transform:translateX(-240px)}to{transform:translateX(110vw)}}

/* 阴云（多云/雨/雪时出现） */
.storm{opacity:0;transition:opacity 1.7s ease}
.stormA{top:18px;width:190px;animation-duration:90s;animation-delay:-40s}
.stormB{top:158px;width:150px;animation-duration:112s;animation-delay:-82s}
.weather[data-weather="cloudy"] .storm,
.weather[data-weather="rain"] .storm,
.weather[data-weather="snow"] .storm{opacity:.94}

/* 雨 */
.rain{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.weather[data-weather="rain"] .rain{opacity:1}
.drop{position:absolute;top:-46px;width:2px;height:16px;border-radius:2px;background:linear-gradient(180deg,rgba(122,165,242,0),#7aa5f2);animation:fall linear infinite}
@keyframes fall{to{transform:translateY(112vh)}}

/* 雪 */
.snow{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.weather[data-weather="snow"] .snow{opacity:1}
.flake{position:absolute;top:-22px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9);animation:flakeFall linear infinite}
@keyframes flakeFall{
  0%{transform:translate(0,0)}
  25%{transform:translate(14px,28vh)}
  50%{transform:translate(-9px,56vh)}
  75%{transform:translate(11px,82vh)}
  100%{transform:translate(-7px,112vh)}
}

/* 顶栏里的天气小按钮 */
.weather-chip{font-weight:600;color:var(--brand-deep,#6644ea)}