/* ===== Animated Weather Scene — Minimal / Abstract ===== */
.weather-scene {
  position: relative;
  width: calc(100% + 56px);
  height: 180px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  margin: -28px -28px 20px -28px;
}

/* --- Sky --- */
.weather-scene .sky {
  position: absolute;
  inset: 0;
  transition: background 1.5s ease;
}

/* Soft bottom fade into card */
.weather-scene::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(30, 40, 100, 0.95), transparent);
  z-index: 6;
  pointer-events: none;
}

.weather-scene.clear-day .sky,
.weather-scene.dry .sky {
  background: linear-gradient(170deg, #0c2461 0%, #1565c0 40%, #4fc3f7 100%);
}

.weather-scene.clear-night .sky {
  background: linear-gradient(170deg, #050a1a 0%, #0a1035 50%, #141852 100%);
}

.weather-scene.cloudy .sky,
.weather-scene.partly-cloudy-day .sky {
  background: linear-gradient(170deg, #1a2a4a 0%, #2a4060 50%, #3a5575 100%);
}

.weather-scene.partly-cloudy-night .sky {
  background: linear-gradient(170deg, #080d20 0%, #101835 50%, #1a2550 100%);
}

.weather-scene.rain .sky,
.weather-scene.sleet .sky {
  background: linear-gradient(170deg, #10182a 0%, #1a2540 50%, #253050 100%);
}

.weather-scene.thunderstorm .sky {
  background: linear-gradient(170deg, #08081a 0%, #121228 50%, #1a1a35 100%);
}

.weather-scene.snow .sky {
  background: linear-gradient(170deg, #1a2540 0%, #2a3a5a 50%, #3a4a6a 100%);
}

.weather-scene.fog .sky {
  background: linear-gradient(170deg, #1a2035 0%, #252d48 50%, #303858 100%);
}

/* --- Sun glow (abstract orb) --- */
.scene-sun {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 20px;
  right: 15%;
  opacity: 0;
  transition: opacity 1.2s;
}

.weather-scene.clear-day .scene-sun,
.weather-scene.dry .scene-sun {
  opacity: 1;
}

.weather-scene.partly-cloudy-day .scene-sun {
  opacity: 0.6;
}

.sun-core {
  position: absolute;
  inset: 10px;
  background: radial-gradient(circle, rgba(255, 220, 80, 0.9) 0%, rgba(255, 180, 40, 0.4) 50%, transparent 70%);
  border-radius: 50%;
  animation: sunPulse 5s ease-in-out infinite;
}

.sun-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255, 200, 60, 0.15) 0%, transparent 60%);
  border-radius: 50%;
  animation: sunPulse 5s ease-in-out infinite reverse;
}

.sun-rays { display: none; }

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

/* --- Moon --- */
.scene-moon {
  position: absolute;
  width: 36px;
  height: 36px;
  top: 28px;
  right: 18%;
  opacity: 0;
  transition: opacity 1.2s;
}

.weather-scene.clear-night .scene-moon,
.weather-scene.partly-cloudy-night .scene-moon {
  opacity: 1;
}

.moon-body {
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 60% 40%, rgba(210, 210, 230, 0.9) 0%, rgba(180, 180, 210, 0.5) 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(200, 200, 230, 0.2), 0 0 50px rgba(200, 200, 230, 0.08);
}

.moon-crater { display: none; }

/* --- Stars --- */
.scene-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s;
}

.weather-scene.clear-night .scene-stars { opacity: 1; }
.weather-scene.partly-cloudy-night .scene-stars { opacity: 0.5; }

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(200, 210, 255, 0.8);
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.9; }
}

/* --- Clouds (soft blurs) --- */
.scene-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cloud {
  position: absolute;
  transition: opacity 1.2s;
}

.cloud-shape {
  border-radius: 50%;
  position: absolute;
  background: rgba(200, 210, 230, 0.35);
  filter: blur(10px);
}

.weather-scene.rain .cloud-shape,
.weather-scene.thunderstorm .cloud-shape {
  background: rgba(80, 90, 110, 0.5);
}

.cloud-1 {
  top: 5px;
  width: 220px;
  height: 80px;
  animation: cloudDrift1 45s linear infinite;
}

.cloud-1 .cloud-shape:nth-child(1) { width: 100px; height: 50px; top: 20px; left: 0; }
.cloud-1 .cloud-shape:nth-child(2) { width: 80px; height: 60px; top: 5px; left: 50px; }
.cloud-1 .cloud-shape:nth-child(3) { width: 90px; height: 45px; top: 18px; left: 110px; }

.cloud-2 {
  top: 30px;
  width: 180px;
  height: 70px;
  animation: cloudDrift2 38s linear infinite;
}

.cloud-2 .cloud-shape:nth-child(1) { width: 80px; height: 40px; top: 18px; left: 0; }
.cloud-2 .cloud-shape:nth-child(2) { width: 70px; height: 50px; top: 5px; left: 40px; }
.cloud-2 .cloud-shape:nth-child(3) { width: 75px; height: 38px; top: 16px; left: 90px; }

.cloud-3 {
  top: 55px;
  width: 160px;
  height: 60px;
  animation: cloudDrift3 52s linear infinite;
}

.cloud-3 .cloud-shape:nth-child(1) { width: 70px; height: 35px; top: 15px; left: 0; }
.cloud-3 .cloud-shape:nth-child(2) { width: 60px; height: 42px; top: 4px; left: 35px; }
.cloud-3 .cloud-shape:nth-child(3) { width: 65px; height: 32px; top: 14px; left: 80px; }

@keyframes cloudDrift1 {
  0% { transform: translateX(-200px); }
  100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloudDrift2 {
  0% { transform: translateX(calc(100vw + 150px)); }
  100% { transform: translateX(-170px); }
}

@keyframes cloudDrift3 {
  0% { transform: translateX(calc(50vw)); }
  100% { transform: translateX(calc(100vw + 200px)); }
}

/* --- Rain (thin subtle lines) --- */
.scene-rain {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.8s;
  overflow: hidden;
}

.weather-scene.rain .scene-rain,
.weather-scene.sleet .scene-rain {
  opacity: 1;
}

.raindrop {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(120, 190, 255, 0.7));
  border-radius: 0 0 2px 2px;
  animation: rainFall var(--dur, 0.8s) linear infinite;
  animation-delay: var(--delay, 0s);
  top: -20px;
}

@keyframes rainFall {
  0% { transform: translateY(0) translateX(2px); opacity: 0; }
  8% { opacity: 0.8; }
  85% { opacity: 0.7; }
  100% { transform: translateY(200px) translateX(-4px); opacity: 0; }
}

.rain-splash {
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(120, 190, 255, 0.4);
  opacity: 0;
  animation: rainSplash calc(var(--dur, 0.8s) * 0.4) ease-out infinite;
  animation-delay: calc(var(--delay, 0s) + var(--dur, 0.8s) * 0.85);
}

.rain-splash::before,
.rain-splash::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(120, 190, 255, 0.6);
}
.rain-splash::before {
  top: -3px;
  left: -6px;
  animation: splashDropL calc(var(--dur, 0.8s) * 0.4) ease-out infinite;
  animation-delay: inherit;
}
.rain-splash::after {
  top: -3px;
  right: -6px;
  animation: splashDropR calc(var(--dur, 0.8s) * 0.4) ease-out infinite;
  animation-delay: inherit;
}

@keyframes rainSplash {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  20%  { opacity: 0.7; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

@keyframes splashDropL {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  20%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-6px, -8px) scale(0.3); }
}

@keyframes splashDropR {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  20%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(6px, -8px) scale(0.3); }
}

/* --- Snow (soft dots) --- */
.scene-snow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s;
  overflow: hidden;
}

.weather-scene.snow .scene-snow,
.weather-scene.sleet .scene-snow {
  opacity: 1;
}

.snowflake {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  top: -10px;
  animation: snowFall var(--dur, 4s) linear infinite;
  animation-delay: var(--delay, 0s);
  box-shadow: none;
}

@keyframes snowFall {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.5; }
  100% { transform: translateY(200px) translateX(var(--drift, 20px)); opacity: 0; }
}

/* --- Lightning (subtle flash) --- */
.scene-lightning {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.weather-scene.thunderstorm .scene-lightning {
  opacity: 1;
}

.lightning-flash {
  position: absolute;
  inset: 0;
  background: rgba(180, 190, 255, 0.06);
  animation: lightningFlash 5s ease-in-out infinite;
}

.lightning-bolt {
  position: absolute;
  top: 15px;
  left: 40%;
  opacity: 0;
  animation: boltFlash 5s ease-in-out infinite;
}

.lightning-bolt svg {
  filter: blur(1px) drop-shadow(0 0 6px rgba(180, 190, 255, 0.5));
  opacity: 0.5;
}

@keyframes lightningFlash {
  0%, 100% { opacity: 0; }
  42% { opacity: 0; }
  43% { opacity: 1; }
  44% { opacity: 0; }
  45.5% { opacity: 0.6; }
  46% { opacity: 0; }
}

@keyframes boltFlash {
  0%, 100% { opacity: 0; }
  42% { opacity: 0; }
  43% { opacity: 0.7; }
  44% { opacity: 0; }
  45.5% { opacity: 0.5; }
  46.5% { opacity: 0; }
}

/* --- Fog (horizontal bands) --- */
.scene-fog {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s;
}

.weather-scene.fog .scene-fog {
  opacity: 1;
}

.fog-layer {
  position: absolute;
  width: 200%;
  height: 20px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(150, 170, 200, 0.1) 25%,
    rgba(150, 170, 200, 0.15) 50%,
    rgba(150, 170, 200, 0.1) 75%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(4px);
}

.fog-layer:nth-child(1) {
  bottom: 50px;
  animation: fogDrift 14s ease-in-out infinite alternate;
}

.fog-layer:nth-child(2) {
  bottom: 80px;
  animation: fogDrift 18s ease-in-out infinite alternate-reverse;
  opacity: 0.7;
}

.fog-layer:nth-child(3) {
  bottom: 110px;
  animation: fogDrift 11s ease-in-out infinite alternate;
  opacity: 0.4;
}

@keyframes fogDrift {
  0% { transform: translateX(-25%); }
  100% { transform: translateX(0%); }
}

/* --- Landscape: remove --- */
.scene-landscape { display: none; }