.weather-icon {
    position: relative;
    display: inline-block;
}
.weather-icon svg {
    display: block;
}

.weather-icon--lg svg {
    width: 100px;
    height: 100px;
}
.weather-icon--md svg {
    width: 42px;
    height: 42px;
}

/* Sun */
@keyframes wi-sun-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes wi-sun-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}
.wi-sun-core { animation: wi-sun-pulse 3s ease-in-out infinite; }
.wi-sun-rays { animation: wi-sun-spin 20s linear infinite; transform-origin: center; }

/* Cloud */
@keyframes wi-cloud-float {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}
.wi-cloud { animation: wi-cloud-float 4s ease-in-out infinite; }
.wi-cloud-back { animation: wi-cloud-float 4s ease-in-out infinite; animation-delay: -1s; }

/* Rain */
@keyframes wi-rain-drop {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}
.wi-rain-drop1 { animation: wi-rain-drop 0.8s linear infinite; }
.wi-rain-drop2 { animation: wi-rain-drop 0.8s linear infinite 0.25s; }
.wi-rain-drop3 { animation: wi-rain-drop 0.8s linear infinite 0.5s; }

/* Snow */
@keyframes wi-snow-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(10px) rotate(180deg); opacity: 0; }
}
.wi-snow1 { animation: wi-snow-fall 2s linear infinite; }
.wi-snow2 { animation: wi-snow-fall 2s linear infinite 0.6s; }
.wi-snow3 { animation: wi-snow-fall 2s linear infinite 1.2s; }

/* Fog */
@keyframes wi-fog-drift {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(6px); opacity: 1; }
}
.wi-fog1 { animation: wi-fog-drift 3s ease-in-out infinite; }
.wi-fog2 { animation: wi-fog-drift 3s ease-in-out infinite 0.8s; }
.wi-fog3 { animation: wi-fog-drift 3s ease-in-out infinite 1.6s; }

/* Lightning */
@keyframes wi-lightning {
    0%, 94%, 100% { opacity: 0; }
    95%, 97% { opacity: 1; }
}
.wi-lightning { animation: wi-lightning 4s linear infinite; }