body {
  transition: background 1.4s ease;
}

.weather-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ====== ФОНЫ ПО ТИПУ ПОГОДЫ ====== */

body[data-weather="clear-day"] {
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 230, 150, 0.9) 0%, rgba(255, 200, 100, 0.35) 8%, transparent 22%),
    radial-gradient(circle at 82% 12%, rgba(255, 170, 60, 0.25) 0%, transparent 40%),
    linear-gradient(165deg, #ffb347 0%, #ff8c5a 35%, #4a6fa5 100%);
}

body[data-weather="partly-cloudy-day"] {
  background: linear-gradient(165deg, #7f9cc4 0%, #5c7ba3 50%, #3a557c 100%);
}

body[data-weather="partly-cloudy-night"] {
  background: linear-gradient(165deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%);
}

body[data-weather="cloudy"] {
  background: linear-gradient(165deg, #4b5568 0%, #333c4d 60%, #21283a 100%);
}

body[data-weather="rain"] {
  background: linear-gradient(165deg, #232c3d 0%, #1a2233 60%, #0e1420 100%);
}

body[data-weather="snow"] {
  background: linear-gradient(165deg, #3a4a63 0%, #232f42 60%, #131b29 100%);
}

body[data-weather="wind"] {
  background: linear-gradient(165deg, #35506b 0%, #24384c 60%, #141f2c 100%);
}

/* ====== ЧАСТИЦЫ ====== */

.raindrop {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(180, 210, 255, 0.55));
  animation-name: rainfall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainfall {
  0% {
    transform: translateY(-10vh);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0.3;
  }
}

.snowflake {
  position: absolute;
  top: -5%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation-name: snowfall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes snowfall {
  0% {
    transform: translateY(-5vh) translateX(0);
  }
  50% {
    transform: translateY(50vh) translateX(20px);
  }
  100% {
    transform: translateY(105vh) translateX(-10px);
  }
}

.drift-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  filter: blur(20px);
  animation-name: cloudDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes cloudDrift {
  0% {
    transform: translateX(-30vw);
  }
  100% {
    transform: translateX(130vw);
  }
}

.sun-glow {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 180, 0.9) 0%, rgba(255, 200, 110, 0.4) 40%, transparent 70%);
  filter: blur(2px);
  animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raindrop,
  .snowflake,
  .drift-cloud,
  .sun-glow {
    animation: none;
  }
}