/* Subtle weather-icon motion. Each icon plays about 4.5 seconds when it appears, then rests.
   Targets the existing weather-art.js SVG colors, so no JavaScript changes are needed.
   Fully off for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .weather-art * { transform-box: fill-box; transform-origin: center; }
  .weather-art g[stroke="#f7b644"] { animation: wx-breathe 1.5s ease-in-out 3; }
  .weather-art path[fill="#e7f4ff"] { animation: wx-twinkle 1.5s ease-in-out 3; }
  .weather-art path[stroke="#bdd5e4"] { animation: wx-drift 2.25s ease-in-out 2; }
  .weather-art g[stroke="#4b9bd0"],
  .weather-art g[stroke="#79b7d6"] { animation: wx-fall .9s linear 5; }
  .weather-art path[fill="#ffc85b"] { animation: wx-flash 2.25s linear 2; }
  .weather-art g[stroke="#86acbd"] { animation: wx-drift 2.25s ease-in-out 2; }
  .weather-art g[stroke="#6da6c3"] path { animation: wx-gust 2.25s ease-in-out 2; }
}
@keyframes wx-breathe { 50% { transform: scale(1.06); } }
@keyframes wx-twinkle { 50% { opacity: .3; } }
@keyframes wx-drift { 50% { transform: translateX(4px); } }
@keyframes wx-fall { from { transform: translateY(-5px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(5px); opacity: 0; } }
@keyframes wx-flash { 0%, 100% { opacity: 1; } 8% { opacity: .25; } 12% { opacity: 1; } 18% { opacity: .35; } 24% { opacity: 1; } }
@keyframes wx-gust { from { stroke-dasharray: 0 400; } 60%, to { stroke-dasharray: 400 0; } }