/* Фон и погода. Режимы задаются классом на body: weather-calm | weather-sun | weather-rain */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.bg-calm { background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%); }
.bg-sun { background: linear-gradient(180deg, #ffd166 0%, #ffb4a2 45%, #ffe5d9 100%); }
.bg-rain { background: linear-gradient(180deg, #4b5670 0%, #7a86a0 55%, #aeb6c8 100%); }
.weather-calm .bg-calm, .weather-sun .bg-sun, .weather-rain .bg-rain { opacity: 1; }

/* Солнце */
.sun {
  position: absolute; top: -12vmin; right: -12vmin; width: 46vmin; height: 46vmin; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c2 0%, #ffd94a 55%, #ffb703 100%);
  box-shadow: 0 0 80px 30px rgba(255, 214, 102, .65), 0 0 200px 80px rgba(255, 190, 90, .35);
  animation: sun-breathe 5s ease-in-out infinite;
}
.sun::before {
  content: ''; position: absolute; inset: -55%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 160, .38) 0 7deg, transparent 7deg 16deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 60%, transparent 72%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 60%, transparent 72%);
  animation: sun-spin 40s linear infinite;
}
.sun-glow { position: absolute; inset: 0; background: radial-gradient(60% 50% at 85% 10%, rgba(255, 255, 255, .55), transparent 70%); }
@keyframes sun-spin { to { transform: rotate(360deg); } }
@keyframes sun-breathe { 50% { transform: scale(1.04); } }

/* Дождь */
.rain { position: absolute; inset: 0; }
.rain i {
  position: absolute; top: -12vh; left: var(--x); width: 2px; height: var(--h, 14vh);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .55));
  transform: rotate(8deg);
  animation: rain-fall var(--d, 1.1s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.weather-rain .rain i { opacity: var(--o, .7); }
@keyframes rain-fall { to { transform: translateY(125vh) rotate(8deg); } }

.cloud {
  position: absolute; width: 42vmin; height: 16vmin; border-radius: 50%;
  background: rgba(255, 255, 255, .28); filter: blur(22px);
  animation: cloud-drift var(--cd, 40s) linear infinite alternate;
}
.cloud.c1 { top: 6%; left: -10%; --cd: 38s; }
.cloud.c2 { top: 16%; left: 40%; width: 60vmin; --cd: 52s; }
.cloud.c3 { top: 30%; left: 75%; --cd: 45s; }
@keyframes cloud-drift { to { transform: translateX(22vw); } }

/* Настроение карточки тоже подстраивается */
.weather-rain .card { --card: rgba(236, 240, 248, .9); }
.weather-rain { color-scheme: light; }
.weather-sun .card { --card: rgba(255, 252, 240, .88); }