.real-weather-icon {
  display: grid;
  place-items: center;
  overflow: visible;
}
.weather-icon-large.real-weather-icon::before,
.weather-icon-large.real-weather-icon::after {
  display: none !important;
  content: none !important;
}
.real-weather-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(20, 55, 95, 0.2));
}
.real-weather-icon .ri-sun {
  transform-origin: 38px 38px;
  animation: riSunFloat 5s ease-in-out infinite;
}
.real-weather-icon .ri-sun circle {
  animation: riSunPulse 3.2s ease-in-out infinite;
}
.real-weather-icon .ri-cloud {
  transform-origin: 55px 45px;
  animation: riCloudFloat 4.5s ease-in-out infinite;
}
.real-weather-icon .ri-cloud-back {
  animation: riBackCloud 7s ease-in-out infinite;
}
.real-weather-icon .ri-moon {
  animation: riMoonFloat 5s ease-in-out infinite;
}
.real-weather-icon .ri-rain path {
  animation: riRain 1s linear infinite;
}
.real-weather-icon .ri-rain path:nth-child(2) {
  animation-delay: -0.25s;
}
.real-weather-icon .ri-rain path:nth-child(3) {
  animation-delay: -0.5s;
}
.real-weather-icon .ri-snow path {
  animation: riSnow 3s ease-in-out infinite;
}
.real-weather-icon .ri-bolt {
  animation: riBolt 2.8s steps(1, end) infinite;
}
.real-weather-icon .ri-fog {
  animation: riFog 3s ease-in-out infinite;
}
@keyframes riSunFloat {
  50% {
    transform: translateY(-3px) rotate(3deg);
  }
}
@keyframes riSunPulse {
  50% {
    filter: brightness(1.12);
  }
}
@keyframes riCloudFloat {
  50% {
    transform: translate(2px, -2px);
  }
}
@keyframes riBackCloud {
  50% {
    transform: translateX(-3px);
  }
}
@keyframes riMoonFloat {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes riRain {
  0% {
    transform: translateY(-3px);
    opacity: 0.35;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateY(7px);
    opacity: 0.1;
  }
}
@keyframes riSnow {
  50% {
    transform: translateY(3px) rotate(8deg);
  }
}
@keyframes riBolt {
  0%,
  55%,
  100% {
    opacity: 1;
  }
  56%,
  58% {
    opacity: 0.15;
  }
  59%,
  62% {
    opacity: 1;
  }
  63% {
    opacity: 0.25;
  }
}
@keyframes riFog {
  50% {
    transform: translateX(5px);
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .real-weather-svg * {
    animation: none !important;
  }
}