/**
 * wx-icon-styles.css — Animazioni CSS per icone meteo procedurali SVG
 * v2: raggi solari centrati, neve visibile con deriva casuale, pioggia casuale
 * Rispetta prefers-reduced-motion
 */

/* ── Sole (v3: stella statica, nessuna animazione raggi) ──
 * Il sole Pedemontana è una stella piena senza raggi animati.
 * La classe wx-sun-rays non è più generata dalle primitive v3.
 */
.wx-sun-rays {
  /* Mantenuta per backward compat, nessuna animazione */
}

/* ── Caduta gocce pioggia — casuale ──
 * Ogni goccia ha animation-duration inline diverso per caduta non sincronizzata.
 */
@keyframes wx-rain-fall {
  0% { opacity: 0; transform: translate(3px, -6px); }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-3px, 10px); }
}

.wx-rain-streak {
  animation: wx-rain-fall 1s linear infinite;
}

/* Precipitazione convettiva: caduta verticale (no inclinazione) */
@keyframes wx-conv-fall {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(12px); }
}
.wx-conv-streak {
  animation: wx-conv-fall 0.8s linear infinite;
}

/* Gelicidio: caduta più corta, gocce si fermano al livello del ghiaccio */
@keyframes wx-fzra-fall {
  0% { opacity: 0; transform: translate(2px, -4px); }
  10% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-1px, 5px); }
}
.wx-fzra-streak {
  animation: wx-fzra-fall 0.9s linear infinite;
}

/* ── Caduta fiocchi neve — velocità costante, deriva laterale ──
 * Il fiocco appare in alto, scende linearmente, esce dal basso.
 * animation-duration inline controlla la velocità (fiocchi grandi = più veloci).
 */
@keyframes wx-snow-fall {
  0%   { transform: translate(0, -14px); }
  25%  { transform: translate(2px, -4px); }
  50%  { transform: translate(-1px, 4px); }
  75%  { transform: translate(2px, 12px); }
  100% { transform: translate(0, 20px); }
}

.wx-snow-flake {
  animation: wx-snow-fall 2.5s linear infinite;
  /* animation-duration inline: fiocchi grandi ~2s, piccoli ~3.5s */
}

/* ── Flash fulmine ── */
@keyframes wx-flash {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 1; }
  94% { opacity: 0.3; }
  96% { opacity: 1; }
}

.wx-lightning {
  animation: wx-flash 3s ease-in-out infinite;
}

/* ── Scintillio stelle ── */
@keyframes wx-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.wx-star {
  animation: wx-twinkle 4s ease-in-out infinite;
}

/* ── Sleet (mix) ── */
@keyframes wx-sleet-fall {
  0% { opacity: 0; transform: translateY(-3px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(5px); }
}

.wx-sleet {
  animation: wx-sleet-fall 1.5s ease-in infinite;
}

/* ── Pioviggine (caduta lenta) ── */
@keyframes wx-drizzle-fall {
  0% { opacity: 0; transform: translate(1px, -4px); }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-1px, 6px); }
}

.wx-drizzle {
  animation: wx-drizzle-fall 1.5s linear infinite;
}

/* ── Alone solare (pulsazione lenta) ── */
@keyframes wx-halo-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.05); }
}

.wx-halo {
  animation: wx-halo-pulse 4s ease-in-out infinite;
  transform-origin: center;
}

/* ── Cristalli di ghiaccio ── */
@keyframes wx-ice-spin {
  0% { opacity: 0.4; transform: rotate(0deg); }
  50% { opacity: 1; }
  100% { opacity: 0.4; transform: rotate(60deg); }
}

.wx-ice-crystal {
  animation: wx-ice-spin 3s ease-in-out infinite;
}

/* ── Cirri (oscillazione lenta) ── */
@keyframes wx-cirrus-drift {
  0%, 100% { transform: translateX(0); opacity: 0.2; }
  50% { transform: translateX(2px); opacity: 0.3; }
}

.wx-cirrus {
  animation: wx-cirrus-drift 6s ease-in-out infinite;
}

/* ── Grandine (caduta rapida e rettilinea) ── */
@keyframes wx-hail-fall {
  0% { opacity: 0; transform: translateY(-8px); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

.wx-hail {
  animation: wx-hail-fall 0.4s ease-in infinite;
}

/* ── Indicatore vento forte (oscillazione orizzontale) ── */
@keyframes wx-wind-gust {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  30% { transform: translateX(3px); opacity: 0.8; }
  60% { transform: translateX(-1px); opacity: 0.4; }
}

.wx-wind-line {
  animation: wx-wind-gust 2s ease-in-out infinite;
}

/* ── Nebbia sotto (ondulazione lenta) ── */
@keyframes wx-fog-below-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

.wx-fog-below {
  animation: wx-fog-below-drift 5s ease-in-out infinite;
}

/* ── Bande sabbia sahariana (shimmer) ── */
@keyframes wx-sand-shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

.wx-sand-band {
  animation: wx-sand-shimmer 4s ease-in-out infinite;
}

/* ── Disabilita tutte le animazioni per utenti con reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .wx-sun-rays,
  .wx-rain-streak,
  .wx-snow-flake,
  .wx-lightning,
  .wx-star,
  .wx-sleet,
  .wx-drizzle,
  .wx-halo,
  .wx-ice-crystal,
  .wx-cirrus,
  .wx-hail,
  .wx-wind-line,
  .wx-fog-below,
  .wx-sand-band {
    animation: none !important;
  }

  .wx-lightning { opacity: 1 !important; }
  .wx-star { opacity: 0.7 !important; }
  .wx-snow-flake { opacity: 1 !important; }
  .wx-cirrus { opacity: 0.25 !important; }
  .wx-wind-line { opacity: 0.6 !important; }
  .wx-sand-band { opacity: 0.4 !important; }
}