/* =============================================
 * ANIMATED WEATHER ICONS — Pure CSS
 * ============================================= */

.weather-icon-animated {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* === SUN === */
.wi-sun {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd32a, #ff9f43);
  box-shadow: 0 0 30px rgba(255,211,42,0.6), 0 0 60px rgba(255,159,67,0.3);
  animation: wi-sun-pulse 3s ease-in-out infinite;
}
@keyframes wi-sun-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255,211,42,0.6); }
  50% { transform: scale(1.08); box-shadow: 0 0 50px rgba(255,211,42,0.8); }
}

.wi-sun-sm {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd32a, #ff9f43);
  box-shadow: 0 0 15px rgba(255,211,42,0.5);
  position: absolute;
  top: -5px; left: -5px;
  animation: wi-sun-pulse 3s ease-in-out infinite;
}

/* === MOON === */
.wi-moon {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dfe6e9, #b2bec3);
  box-shadow: 0 0 20px rgba(178,190,195,0.4), inset -8px -5px 0 rgba(99,110,114,0.2);
  position: relative;
  animation: wi-moon-glow 4s ease-in-out infinite;
}
.wi-moon-sm {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dfe6e9, #b2bec3);
  box-shadow: 0 0 10px rgba(178,190,195,0.3);
  position: absolute;
  top: -3px; left: 0;
}
@keyframes wi-moon-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(178,190,195,0.4); }
  50% { box-shadow: 0 0 35px rgba(178,190,195,0.6); }
}

/* Stars */
.wi-star {
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  animation: wi-twinkle 2s ease-in-out infinite;
}
.wi-star--1 { top: 5px; right: -15px; animation-delay: 0s; }
.wi-star--2 { top: -10px; right: 5px; animation-delay: 0.7s; }
.wi-star--3 { bottom: 0; right: -20px; animation-delay: 1.4s; }
@keyframes wi-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* === CLOUD === */
.wi-cloud {
  width: 50px; height: 22px;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  position: relative;
  z-index: 2;
}
.wi-cloud::before {
  content: '';
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  position: absolute;
  top: -14px; left: 10px;
}
.wi-cloud::after {
  content: '';
  width: 16px; height: 16px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  position: absolute;
  top: -8px; left: 28px;
}

.wi-cloud-sun, .wi-cloud-night {
  position: relative;
  width: 70px; height: 50px;
}
.wi-cloud-sun .wi-cloud, .wi-cloud-night .wi-cloud {
  position: absolute;
  bottom: 0; right: 0;
}

/* === CLOUDS === */
.wi-clouds {
  position: relative;
  width: 80px; height: 50px;
}
.wi-clouds .wi-cloud--1 {
  position: absolute;
  bottom: 0; left: 0;
  animation: wi-cloud-drift 6s ease-in-out infinite;
}
.wi-clouds .wi-cloud--2 {
  position: absolute;
  top: 0; right: 0;
  transform: scale(0.7);
  opacity: 0.7;
  animation: wi-cloud-drift 8s ease-in-out infinite reverse;
}
@keyframes wi-cloud-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

/* === RAIN === */
.wi-rain {
  position: relative;
  width: 60px; height: 60px;
}
.wi-rain .wi-cloud {
  position: absolute;
  top: 0; left: 5px;
}
.wi-drops {
  position: absolute;
  bottom: 0; left: 15px;
  width: 30px; height: 25px;
}
.wi-drop {
  position: absolute;
  width: 2px; height: 10px;
  background: linear-gradient(to bottom, transparent, #74b9ff);
  border-radius: 0 0 2px 2px;
  animation: wi-rain-fall 0.8s linear infinite;
}
.wi-drop--1 { left: 3px; animation-delay: 0s; }
.wi-drop--2 { left: 13px; animation-delay: 0.3s; }
.wi-drop--3 { left: 23px; animation-delay: 0.15s; }
@keyframes wi-rain-fall {
  0% { transform: translateY(-5px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* === THUNDER === */
.wi-thunder {
  position: relative;
  width: 60px; height: 65px;
}
.wi-thunder .wi-cloud {
  position: absolute;
  top: 0; left: 5px;
  background: rgba(200,200,210,0.9);
}
.wi-thunder .wi-cloud::before, .wi-thunder .wi-cloud::after {
  background: rgba(200,200,210,0.9);
}
.wi-bolt {
  position: absolute;
  bottom: 8px; left: 25px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 18px solid #ffd32a;
  filter: drop-shadow(0 0 6px rgba(255,211,42,0.8));
  animation: wi-flash 2s ease-in-out infinite;
}
@keyframes wi-flash {
  0%, 100% { opacity: 0.3; }
  10% { opacity: 1; }
  12% { opacity: 0.2; }
  14% { opacity: 1; }
  20% { opacity: 0.3; }
}
.wi-thunder .wi-drops {
  bottom: -2px; left: 12px;
}

/* === SNOW === */
.wi-snow {
  position: relative;
  width: 60px; height: 60px;
}
.wi-snow .wi-cloud {
  position: absolute;
  top: 0; left: 5px;
}
.wi-flakes {
  position: absolute;
  bottom: 0; left: 15px;
  width: 30px; height: 25px;
}
.wi-flake {
  position: absolute;
  font-size: 10px;
  animation: wi-snow-fall 2s linear infinite;
}
.wi-flake--1 { left: 3px; animation-delay: 0s; }
.wi-flake--2 { left: 18px; animation-delay: 1s; }
@keyframes wi-snow-fall {
  0% { transform: translateY(-5px) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(20px) rotate(180deg); opacity: 0; }
}

/* === FOG === */
.wi-fog {
  width: 60px; height: 40px;
  position: relative;
}
.wi-fog-line {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 3px;
  position: absolute;
  animation: wi-fog-drift 3s ease-in-out infinite;
}
.wi-fog-line--1 { top: 5px; width: 80%; animation-delay: 0s; }
.wi-fog-line--2 { top: 17px; width: 100%; animation-delay: 0.5s; }
.wi-fog-line--3 { top: 29px; width: 70%; left: 10%; animation-delay: 1s; }
@keyframes wi-fog-drift {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50% { transform: translateX(5px); opacity: 0.7; }
}