/* ══════════════════════════════════════════════════════════════════
   天气动效层
   ══════════════════════════════════════════════════════════════════ */

#wx-fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ── 晴天：暖光晕 ──────────────────────────────────────────────── */
.wx-sunny-orb {
  position: absolute;
  top: -15vh;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  height: 70vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgba(255,210,80,0.22) 0%, rgba(255,180,40,0.08) 45%, transparent 70%);
  border-radius: 50%;
  animation: wx-sunny-pulse 5s ease-in-out infinite;
}

.wx-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(220,170,60,0.55);
  border-radius: 50%;
  animation: wx-dust-float ease-in-out infinite;
}

@keyframes wx-sunny-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}

@keyframes wx-dust-float {
  0%   { transform: translateY(0)    translateX(0)    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-60px) translateX(20px); opacity: 0; }
}

/* ── 夜晴：星星 ─────────────────────────────────────────────────── */
.wx-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,220,0.9);
  animation: wx-twinkle ease-in-out infinite;
}

@keyframes wx-twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.3); }
}

/* ── 多云：漂移云块 ─────────────────────────────────────────────── */
.wx-cloud {
  position: absolute;
  background: rgba(220,215,210,0.18);
  border-radius: 50%;
  filter: blur(18px);
  animation: wx-cloud-drift linear infinite;
}

@keyframes wx-cloud-drift {
  from { transform: translateX(-120px); }
  to   { transform: translateX(calc(100vw + 120px)); }
}

/* ── 雨 ─────────────────────────────────────────────────────────── */
.wx-rain-drop {
  position: absolute;
  top: -5%;
  width: 1.5px;
  border-radius: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(140,170,200,0.55) 100%);
  animation: wx-rain-fall linear infinite;
}

@keyframes wx-rain-fall {
  from { transform: translateY(-5vh)  translateX(0)    rotate(12deg); opacity: 0; }
  5%   {                                                               opacity: 1; }
  95%  {                                                               opacity: 0.5; }
  to   { transform: translateY(108vh) translateX(16px) rotate(12deg); opacity: 0; }
}

/* ── 雷暴：闪电 ─────────────────────────────────────────────────── */
.wx-lightning {
  position: fixed;
  inset: 0;
  background: rgba(255,255,240,0.25);
  opacity: 0;
  animation: wx-flash steps(1) infinite;
}

@keyframes wx-flash {
  0%   { opacity: 0; }
  92%  { opacity: 0; }
  93%  { opacity: 1; }
  94%  { opacity: 0; }
  95%  { opacity: 0.5; }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── 雪 ─────────────────────────────────────────────────────────── */
.wx-snowflake {
  position: absolute;
  top: -3%;
  color: rgba(220,235,255,0.85);
  text-shadow: 0 0 6px rgba(180,210,255,0.5);
  user-select: none;
  animation: wx-snow-fall ease-in-out infinite;
}

@keyframes wx-snow-fall {
  0%   { transform: translateY(-2vh) translateX(0)    rotate(0deg);   opacity: 0; }
  8%   {                                                               opacity: 1; }
  90%  {                                                               opacity: 0.6; }
  100% { transform: translateY(105vh) translateX(18px) rotate(360deg); opacity: 0; }
}

/* ── 雾 ─────────────────────────────────────────────────────────── */
.wx-mist-band {
  position: absolute;
  left: -20%;
  width: 140%;
  background: linear-gradient(to right,
    transparent 0%, rgba(210,205,198,0.12) 30%, rgba(210,205,198,0.16) 50%,
    rgba(210,205,198,0.12) 70%, transparent 100%);
  filter: blur(12px);
  animation: wx-mist-drift ease-in-out infinite alternate;
}

@keyframes wx-mist-drift {
  from { transform: translateX(-5%); opacity: 0.6; }
  to   { transform: translateX(5%);  opacity: 1;   }
}