/* WeatherAU Pixel Art Icon Animations
   All keyframes and class bindings for weather-icons.py SVG components.
*/

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes wicon-spin {
  to { transform: rotate(360deg); }
}

@keyframes wicon-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(20px); opacity: 0; }
}

@keyframes wicon-drift {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(3px); }
}

@keyframes wicon-drift-slow {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-2px); }
}

@keyframes wicon-flicker {
  0%, 100% { opacity: 1; }
  45%       { opacity: 1; }
  50%       { opacity: 0; }
  55%       { opacity: 0; }
  60%       { opacity: 1; }
}

@keyframes wicon-twinkle {
  0%, 100% { opacity: 0.1; }
  50%       { opacity: 1; }
}

@keyframes wicon-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}


/* ── Animation classes ─────────────────────────────────────────────────────── */

/* Sun rays — rotate around SVG centre (16,16 in 32×32 viewBox) */
.wicon-rays {
  animation: wicon-spin 2s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* Rain/snow drops — fall downward; each group sets --wicon-delay */
.wicon-drops {
  animation: wicon-fall 0.65s linear infinite;
  animation-delay: var(--wicon-delay, 0s);
}

/* Snow flakes — slower, bob as they fall */
.wicon-snowflake {
  animation: wicon-fall 1.4s ease-in infinite;
  animation-delay: var(--wicon-delay, 0s);
}

/* Cloud body — gentle drift */
.wicon-cloud {
  animation: wicon-drift 3s ease-in-out infinite;
}

/* Background cloud (overcast second layer) — opposite drift */
.wicon-cloud-back {
  animation: wicon-drift-slow 4s ease-in-out infinite;
}

/* Lightning bolt */
.wicon-flicker {
  animation: wicon-flicker 2.2s step-end infinite;
  animation-delay: var(--wicon-delay, 0s);
}

/* Stars */
.wicon-twinkle {
  animation: wicon-twinkle 2s ease-in-out infinite;
  animation-delay: var(--wicon-delay, 0s);
}

/* Frost crystal tips */
.wicon-pulse {
  animation: wicon-pulse 1.8s ease-in-out infinite;
  animation-delay: var(--wicon-delay, 0s);
}

/* Fog/wind bands — scroll horizontally */
.wicon-drift-band {
  animation: wicon-drift 2.5s ease-in-out infinite;
  animation-delay: var(--wicon-delay, 0s);
}

/* Cyclone — slow rotation */
.wicon-spin-slow {
  animation: wicon-spin 10s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* Bell — pendulum swing */
@keyframes wicon-swing {
  0%, 100% { transform: rotate(-10deg); }
  50%       { transform: rotate(10deg); }
}
.wicon-swing {
  animation: wicon-swing 1.4s ease-in-out infinite;
  transform-origin: 50% 0%;
  transform-box: fill-box;
}

/* Root SVG element */
.weather-icon {
  display: block;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  overflow: hidden;
}