/**
 * 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 */
}

/* ── MODELLO FISICO della caduta ──────────────────────────────────────────────
 * Le idrometeore non cadono a velocità costante appena uscite dalla nube: partono
 * quasi ferme e ACCELERANO sotto gravità (g≈9,81 m/s²) finché la resistenza dell'aria
 * non bilancia il peso → velocità limite (terminal velocity). Quanto questo è visibile
 * nella fascia dell'icona dipende dal tipo:
 *   • gocce grandi / grandine  → ancora in accelerazione nella fascia → timing-function ease-in
 *   • pioviggine / neve / graupel → leggere: velocità limite raggiunta subito → moto ~costante (linear)
 * La velocità limite stessa (ordine: grandine > pioggia > pioviggine > graupel > neve) è
 * resa con la animation-duration (più lento = duration maggiore). Con vento la traiettoria
 * resta una RETTA inclinata (vettore di velocità limite), già gestita da --fx/--fy.
 * ──────────────────────────────────────────────────────────────────────────── */

/* ── Caduta gocce pioggia ──
 * Ogni goccia ha animation-duration inline diverso per caduta non sincronizzata.
 */
@keyframes wx-rain-fall {
  /* Traiettoria parametrica via variabili CSS (--fx0/--fy0 → --fx1/--fy1), calcolate in JS
   * dall'angolo di caduta. Default verticale. Necessario perché transform-box:view-box
   * impedisce alla rotazione SVG del gruppo di inclinare il moto dell'animazione. */
  /* Opacità: dissolvenza-in rapida (uscita dalla nube) → PIENA per ~2/3 → dissolvenza-out
   * morbida nell'ultimo terzo (la goccia "se ne va" oltre l'icona). Profilo unico per tutte
   * le precipitazioni: niente svanire-per-tutta-la-caduta (la pioggia non evapora). */
  0% { opacity: 0; transform: translate(var(--fx0, 0px), var(--fy0, -6px)); }
  10% { opacity: 0.9; }
  68% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 10px)); }
}

.wx-rain-streak {
  /* ease-in = accelerazione gravitazionale: la goccia si stacca dalla nube quasi ferma
   * e arriva più veloce in basso (velocità max alla base, come sotto gravità). */
  animation: wx-rain-fall 1s ease-in infinite;
}

/* Precipitazione convettiva: caduta verticale (no inclinazione).
 * Traiettoria PARAMETRICA via --fx0/--fy0 → --fx1/--fy1 (calcolate in JS da _trajVars): così
 * la "distanza di caduta" per-goccia regola l'ampiezza del moto. Default (0px → 12px) = look storico. */
@keyframes wx-conv-fall {
  0% { opacity: 0; transform: translate(var(--fx0, 0px), var(--fy0, 0px)); }
  10% { opacity: 0.9; }
  68% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 12px)); }
}
.wx-conv-streak {
  /* Rovescio convettivo: gocce grandi, gravità dominante → accelerano (ease-in). */
  animation: wx-conv-fall 0.8s ease-in infinite;
}

/* Gelicidio: caduta più corta, gocce si fermano al livello del ghiaccio */
@keyframes wx-fzra-fall {
  0% { opacity: 0; transform: translate(var(--fx0, 0px), var(--fy0, -4px)); }
  10% { opacity: 0.9; }
  66% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 5px)); }
}
.wx-fzra-streak {
  /* Gelicidio: gocce di pioggia sopraffusa → stessa accelerazione gravitazionale. */
  animation: wx-fzra-fall 0.9s ease-in infinite;
}

/* ── GELICIDIO con IMPATTO sul vetrone ──
 * La goccia sopraffusa cade (blu) e all'impatto sul suolo GELA istantaneamente: svanisce mentre,
 * nello stesso punto sulla lastra, compare uno SPLAT di ghiaccio che si spalma orizzontalmente.
 * Il cross-fade (goccia blu che esce + splat ghiaccio che cresce) legge come "blu → ghiaccio". */
@keyframes wx-fzra-drop {
  0%   { opacity: 0;    transform: translate(var(--fx0, 0px), var(--fy0, -6px)); }
  14%  { opacity: 0.95; }
  70%  { opacity: 0.95; transform: translate(var(--fx1, 0px), var(--fy1, 10px)); }  /* arriva alla lastra */
  80%  { opacity: 0;    transform: translate(var(--fx1, 0px), var(--fy1, 10px)); }  /* svanisce nell'impatto (→ ghiaccio) */
  100% { opacity: 0;    transform: translate(var(--fx1, 0px), var(--fy1, 10px)); }  /* breve attesa, poi nuova goccia */
}
.wx-fzra-drop { animation: wx-fzra-drop 1.1s ease-in infinite; }   /* ease-in = accelerazione di gravità */

@keyframes wx-fzra-splat {
  0%, 62% { opacity: 0; transform: scale(0.30, 0.55); }   /* invisibile finché la goccia non impatta */
  70%     { opacity: 1; transform: scale(0.80, 1.10); }   /* impatto: lo splat compare (già ben visibile) */
  80%     { opacity: 1; transform: scale(1.50, 1.05); }   /* si SPALMA orizzontalmente sul vetrone */
  92%     { opacity: 0.9; transform: scale(1.85, 1); }    /* tiene la spalmata (tempo a schermo) */
  100%    { opacity: 0; transform: scale(2.05, 0.95); }   /* si fonde con la lastra e svanisce */
}
.wx-fzra-splat {
  transform-box: fill-box;       /* scala dal proprio centro */
  transform-origin: center;
  animation: wx-fzra-splat 1.1s ease-out infinite;
}

/* ── Caduta fiocchi neve — velocità limite costante + flutter laterale ──
 * Fisica: il fiocco è leggerissimo → raggiunge subito la velocità limite (~1 m/s), quindi
 * DISCESA a velocità costante (linear). In più oscilla lateralmente (vortex shedding: il
 * distacco alternato dei vortici dietro al fiocco lo fa "ballare" come una foglia). Qui la
 * discesa verticale è un lerp monotòno fy0→fy1 (costante), con sovrapposto uno sway laterale.
 * Lo sway dei 4 punti (20/40/60/80%) è PER-FIOCCO via variabili --sx1..--sx4 (impostate in JS,
 * pseudo-casuali e de-mediate → zig-zag IRREGOLARE ma a media orizzontale nulla, niente deriva).
 * I default qui sotto riproducono la vecchia sinusoide se le variabili non sono impostate.
 */
/* CADUTA disaccoppiata dallo SWAY (fisica reale del flutter): qui SOLO il moto VERTICALE a
 * velocità costante (linear) + eventuale deriva da vento (--fx). L'oscillazione orizzontale sta
 * nella classe-figlia .wx-snow-sway (ease-in-out → inversioni MORBIDE agli estremi, come un
 * pendolo, NON spigoli "contro un muro invisibile"). */
@keyframes wx-snow-fall {
  0%   { opacity: 0; transform: translate(var(--fx0, 0px), var(--fy0, -14px)); }
  20%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 20px)); }
}
.wx-snow-flake {
  /* linear = velocità limite costante (il fiocco non accelera, è troppo leggero). */
  animation: wx-snow-fall 2.5s linear infinite;
  /* animation-duration inline: fiocchi grandi ~2s, piccoli ~3.5s */
}
/* Oscillazione orizzontale (flutter pendolare): ease-in-out → velocità ZERO agli estremi
 * (--sx1..--sx4, alternati e per-fiocco), MASSIMA ai passaggi per il centro = moto sinusoidale
 * smooth, niente rimbalzo netto. Stessa durata/delay della caduta (impostati inline) → sincroni. */
@keyframes wx-snow-sway {
  0%   { transform: translateX(0px); }
  20%  { transform: translateX(var(--sx1, 2.6px)); }
  40%  { transform: translateX(var(--sx2, -2.4px)); }
  60%  { transform: translateX(var(--sx3, 2.2px)); }
  80%  { transform: translateX(var(--sx4, -1.6px)); }
  100% { transform: translateX(0px); }
}
.wx-snow-sway { animation: wx-snow-sway 2.5s ease-in-out infinite; }

/* ── Neve BAGNATA: caduta quasi rettilinea — via di mezzo tra il rettilineo (pioggia)
 *    e lo zig-zag pronunciato della neve secca. Sway orizzontale ridotto a ~45%
 *    (±1.2/1.1/1.0/0.7 vs ±2.6/2.4/2.2/1.6 della neve): il fiocco bagnato è più pesante. ── */
@keyframes wx-wetsnow-fall {
  0%   { opacity: 0; transform: translate(var(--fx0, 0px), var(--fy0, -14px)); }
  20%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 20px)); }
}
.wx-wetsnow-flake {
  animation: wx-wetsnow-fall 2.5s linear infinite;
}
/* Sway neve bagnata: ampiezza ridotta (più pesante → flutter contenuto), stessa fisica pendolare. */
@keyframes wx-wetsnow-sway {
  0%   { transform: translateX(0px); }
  20%  { transform: translateX(var(--sx1, 1.2px)); }
  40%  { transform: translateX(var(--sx2, -1.1px)); }
  60%  { transform: translateX(var(--sx3, 1.0px)); }
  80%  { transform: translateX(var(--sx4, -0.7px)); }
  100% { transform: translateX(0px); }
}
.wx-wetsnow-sway { animation: wx-wetsnow-sway 2.5s ease-in-out infinite; }

/* ── 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(var(--fx0, 0px), var(--fy0, -4px)); }
  15% { opacity: 0.8; }
  68% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 6px)); }
}

.wx-drizzle {
  /* Pioviggine: gocce piccole, alta resistenza relativa → velocità limite (~1-2 m/s)
   * raggiunta quasi subito → moto costante (linear), lento. Niente ease-in. */
  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 {
  /* Stesso profilo opacità degli altri: piena per ~2/3, poi dissolvenza-out (NON per tutta
   * la caduta — prima il chicco svaniva dal 10% al 100% e sembrava evaporare).
   * Traiettoria parametrica (--fy0/--fy1) per la distanza di caduta PER-ELEMENTO; i default
   * (-8px → 14px, --fx=0) riproducono esattamente il vecchio translateY verticale. */
  0% { opacity: 0; transform: translate(var(--fx0, 0px), var(--fy0, -8px)); }
  10% { opacity: 1; }
  64% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx1, 0px), var(--fy1, 14px)); }
}

.wx-hail {
  /* Grandine: chicchi densi e grossi, velocità limite alta (~10-40 m/s) raggiunta su
   * distanza lunga → nella fascia è ancora in forte accelerazione → ease-in marcato + veloce. */
  animation: wx-hail-fall 0.4s ease-in infinite;
}

/* ── Graupel / gragnola (caduta lenta e costante) ──
 * Densità bassa (graupel ~0,1-0,3 g/cm³): velocità limite bassa (~1-3 m/s) raggiunta subito
 * → moto COSTANTE (linear), non l'accelerazione della grandine. La duration (inline) li rende
 * più lenti: graupel più lento della gragnola (ice pellets, più densi). */
.wx-pellet {
  animation: wx-hail-fall 0.9s linear infinite;
}

/* ── Grandine NEL CUMULONEMBO: il chicco ricircola su/giù nelle correnti (updraft/downdraft)
 *    accrescendosi strato su strato (scale che cresce), poi precipita giù quando è pesante.
 *    Fisicamente corretto: è così che si formano i chicchi di grandine. ── */
@keyframes wx-hail-grow {
  /* Opacità legata alla QUOTA: SEMITRASPARENTE finché ricircola SOPRA la base del Cb (lo si
   * intravede dentro la nube, dietro al corpo nuvoloso), poi a COLORE PIENO quando attraversa
   * la base e precipita SOTTO (cade nella nube, non davanti). La base nube è ~y36; il chicco
   * la attraversa intorno all'87% del ciclo (durante la fase di caduta translateY −5→26). */
  0%   { opacity: 0; transform: translateY(0px)   scale(0.20); }  /* nasce minuscolo nella nube */
  7%   { opacity: 0.38; }                                         /* dentro la nube → semitrasparente */
  18%  { transform: translateY(-11px) scale(0.34); }              /* su (corrente ascendente) */
  31%  { transform: translateY(-2px)  scale(0.46); }              /* giù, cresce */
  45%  { transform: translateY(-13px) scale(0.62); }              /* su, più grosso */
  58%  { transform: translateY(-4px)  scale(0.78); }              /* giù */
  71%  { transform: translateY(-12px) scale(0.92); }              /* su ancora */
  82%  { opacity: 0.42; transform: translateY(-5px) scale(1); }   /* maturo, ancora dentro (sopra la base) */
  90%  { opacity: 1; }                                            /* attraversata la base → COLORE PIENO */
  97%  { opacity: 1; }                                            /* sotto la base, in caduta piena */
  100% { opacity: 0; transform: translateY(26px) scale(1); }      /* esce sotto l'icona e svanisce */
}
.wx-hail-grow {
  transform-box: fill-box;       /* origine = centro del chicco → scale cresce dal proprio centro */
  transform-origin: center;
  animation: wx-hail-grow 2.6s ease-in-out 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-snow-sway,
  .wx-wetsnow-flake,
  .wx-wetsnow-sway,
  .wx-lightning,
  .wx-star,
  .wx-sleet,
  .wx-drizzle,
  .wx-halo,
  .wx-ice-crystal,
  .wx-cirrus,
  .wx-hail,
  .wx-hail-grow,
  .wx-pellet,
  .wx-conv-streak,
  .wx-fzra-streak,
  .wx-fzra-drop,
  .wx-fzra-splat,
  .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, .wx-wetsnow-flake { opacity: 1 !important; }
  .wx-hail-grow { opacity: 1 !important; transform: scale(1) !important; }   /* fermo = chicco pieno */
  .wx-cirrus { opacity: 0.25 !important; }
  .wx-wind-line { opacity: 0.6 !important; }
  .wx-sand-band { opacity: 0.4 !important; }
}