.real-icon,.photo-weather{position:relative;overflow:visible;transform-origin:center}
html[data-motion="on"] [data-icon="clear"],html[data-motion="on"] [data-icon="uv"]{animation:weather-sun 18s linear infinite}
html[data-motion="on"] [data-icon="partly"],html[data-motion="on"] [data-icon="cloudy"],html[data-motion="on"] [data-icon="night"],html[data-motion="on"] [data-icon="snow"]{animation:weather-cloud 4s ease-in-out infinite}
html[data-motion="on"] [data-icon="fog"]{animation:weather-fog 5s ease-in-out infinite}
html[data-motion="on"] [data-icon="wind"]{transform-origin:15% 65%;animation:weather-wind 1.4s ease-in-out infinite}
html[data-motion="on"] [data-icon="drop"]{animation:weather-drop 2.2s ease-in-out infinite}
html[data-motion="on"] [data-icon="umbrella"]{animation:weather-umbrella 3s ease-in-out infinite}
html[data-motion="on"] [data-icon="rain"]{animation:weather-cloud 4s ease-in-out infinite}
html[data-motion="on"] [data-icon="storm"]{animation:weather-lightning 4.8s linear infinite}
[data-icon="rain"]::after,[data-icon="storm"]::after{content:"";position:absolute;width:55%;height:37%;left:24%;top:57%;background:repeating-linear-gradient(105deg,transparent 0 6px,#a6d6f5b0 7px 8px,transparent 9px 14px);mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent);opacity:.6;pointer-events:none}
html[data-motion="on"] [data-icon="rain"]::after,html[data-motion="on"] [data-icon="storm"]::after{animation:weather-rain .7s linear infinite}
[data-icon="snow"]::after{content:"";position:absolute;inset:50% 15% 2%;background-image:radial-gradient(circle,#d5e9fa 1.3px,transparent 1.8px);background-size:11px 12px;pointer-events:none;opacity:.65}
html[data-motion="on"] [data-icon="snow"]::after{animation:weather-snow 2s linear infinite}
[data-icon="wind"]::after{content:"";position:absolute;width:48%;height:35%;right:-3%;top:20%;background:repeating-linear-gradient(0deg,transparent 0 4px,#a8bfd480 5px 6px,transparent 7px 10px);border-radius:50%;opacity:.4;pointer-events:none}
html[data-motion="on"] [data-icon="wind"]::after{animation:weather-gust 1.4s ease-in-out infinite}
@keyframes weather-sun{to{transform:rotate(360deg)}}
@keyframes weather-cloud{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes weather-fog{0%,100%{transform:translateX(-2px);opacity:.75}50%{transform:translateX(3px);opacity:1}}
@keyframes weather-wind{0%,100%{transform:skewY(-3deg) rotate(-3deg)}50%{transform:skewY(3deg) rotate(3deg)}}
@keyframes weather-drop{0%,100%{transform:translateY(-1px) scale(1)}50%{transform:translateY(2px) scale(.96,1.05)}}
@keyframes weather-umbrella{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes weather-rain{to{background-position:-7px 13px}}
@keyframes weather-snow{to{background-position:3px 12px}}
@keyframes weather-gust{0%{transform:translateX(-4px);opacity:0}40%{opacity:.7}100%{transform:translateX(5px);opacity:0}}
@keyframes weather-lightning{0%,66%,70%,74%,100%{filter:brightness(1)}67%,72%{filter:brightness(1.65) drop-shadow(0 0 4px #badfff)}}
html[data-motion="off"] .real-icon,html[data-motion="off"] .photo-weather,html[data-motion="off"] .real-icon::after,html[data-motion="off"] .photo-weather::after{animation:none!important}