.weather-icon-dynamic {
  display: grid;
  place-items: center;
  overflow: visible;
}
.weather-icon-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(18, 55, 92, 0.18));
}
.weather-icon-svg .wi-sun {
  fill: #ffd45f;
  transform-origin: 42px 42px;
  animation: wi-sun-pulse 4s ease-in-out infinite;
}
.weather-icon-svg .wi-rays {
  fill: none;
  stroke: #ffe9a1;
  stroke-width: 4;
  stroke-linecap: round;
  animation: wi-rays-spin 16s linear infinite;
}
.weather-icon-svg .wi-cloud {
  fill: rgba(245, 250, 255, 0.94);
  filter: drop-shadow(0 5px 5px rgba(30, 70, 105, 0.12));
  transform-origin: 50% 55%;
  animation: wi-cloud-float 4s ease-in-out infinite;
}
.weather-icon-svg .wi-moon {
  fill: #eef5ff;
  filter: drop-shadow(0 0 12px rgba(215, 235, 255, 0.65));
  animation: wi-moon-float 5s ease-in-out infinite;
}
.weather-icon-svg .wi-rain {
  fill: none;
  stroke: #8edcff;
  stroke-width: 5;
  stroke-linecap: round;
  animation: wi-rain 1s linear infinite;
}
.weather-icon-svg .wi-snow {
  fill: none;
  stroke: #f7fbff;
  stroke-width: 3;
  stroke-linecap: round;
  animation: wi-snow 3s linear infinite;
}
.weather-icon-svg .wi-lightning {
  fill: #ffe16b;
  filter: drop-shadow(0 0 8px #fff0a0);
  animation: wi-flash 2.4s steps(2, end) infinite;
}
.weather-icon-svg .wi-fog {
  fill: none;
  stroke: rgba(245, 250, 255, 0.72);
  stroke-width: 5;
  stroke-linecap: round;
  animation: wi-fog 5s ease-in-out infinite;
}
.weather-icon-dynamic[data-weather="thunderstorm"] .wi-cloud {
  fill: #dce8f3;
}
.weather-icon-dynamic[data-weather="rain"] .wi-cloud,
.weather-icon-dynamic[data-weather="showers"] .wi-cloud {
  fill: #e2edf6;
}
.weather-icon-dynamic[data-weather="snow"] .wi-cloud,
.weather-icon-dynamic[data-weather="snow-showers"] .wi-cloud {
  fill: #f5f9fc;
}
@keyframes wi-sun-pulse {
  50% {
    transform: scale(1.05);
  }
}
@keyframes wi-rays-spin {
  to {
    transform: rotate(360deg);
    transform-origin: 42px 42px;
  }
}
@keyframes wi-cloud-float {
  50% {
    transform: translateY(-4px);
  }
}
@keyframes wi-moon-float {
  50% {
    transform: translateY(-4px);
  }
}
@keyframes wi-rain {
  to {
    transform: translateY(7px);
  }
}
@keyframes wi-snow {
  to {
    transform: translateY(8px);
  }
}
@keyframes wi-flash {
  0%,
  45%,
  48%,
  100% {
    opacity: 1;
  }
  46%,
  47% {
    opacity: 0.12;
  }
}
@keyframes wi-fog {
  50% {
    transform: translateX(7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .weather-icon-svg * {
    animation: none !important;
  }
}