/* ==========================================================
   FX AMBIENT — particelle atmosferiche a scala VIEWPORT per gli sfondi
   full-bleed (Hub/Officina/Mercato). Sopra il velo, sotto il contenuto.
   ========================================================== */
.fx-amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-amb i { position: absolute; top: -2vh; display: block; }

/* --- cadenti (neve/polvere) --- */
.fx-amb.meteo-neve i, .fx-amb.meteo-polvere i { border-radius: 50%; animation: fxamb-fall linear infinite; }
.fx-amb.meteo-neve i    { background: #eaf6ff; box-shadow: 0 0 4px #bfe9ff; opacity: 0.55; }
.fx-amb.meteo-polvere i { background: #d8b88a; box-shadow: 0 0 5px #c9a06a; opacity: 0.45; }   /* sabbia/cenere */
@keyframes fxamb-fall { from { transform: translate(0, 0); } to { transform: translate(24px, 104vh); } }

/* --- pioggia (streaks in diagonale) --- */
.fx-amb.meteo-pioggia i { width: 1.5px; height: 16px; background: linear-gradient(transparent, #8fbfff); opacity: 0.42; animation: fxamb-rain linear infinite; }
@keyframes fxamb-rain { from { transform: translate(0, 0) rotate(16deg); } to { transform: translate(90px, 104vh) rotate(16deg); } }

/* --- scintille/braci (salgono) --- */
.fx-amb.meteo-scintille i { top: auto; bottom: -2vh; border-radius: 50%; background: #ffb04a; box-shadow: 0 0 6px #ff8a2f; opacity: 0.6; animation: fxamb-rise linear infinite; }
@keyframes fxamb-rise { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-104vh); opacity: 0; } }

/* --- variante INTENSA: usata dove lo sfondo è scuro e le particelle si
   perdevano (Hub, Mercato). Stesso movimento, solo più leggibili. --- */
.fx-amb.intenso.meteo-polvere i  { opacity: 0.7;  box-shadow: 0 0 8px #d3ab74; }
.fx-amb.intenso.meteo-neve i     { opacity: 0.8;  box-shadow: 0 0 7px #d5f2ff; }
.fx-amb.intenso.meteo-pioggia i  { opacity: 0.65; width: 2px; height: 22px; background: linear-gradient(transparent, #b3d6ff); }
/* niente variante per le scintille: la loro opacità la guida il keyframe fxamb-rise */

/* Rispetta chi preferisce meno animazioni. */
@media (prefers-reduced-motion: reduce) { .fx-amb { display: none; } }