/* Meteo "vivo" (js/meteo-vivo.js): scheda in home e icone sulla mappa.
   Solo animazioni su transform/opacity (leggere sui telefoni economici); tutte spente
   con "riduci animazioni" del sistema. Le icone della mappa si animano solo da zoom 10. */

.mv-gruppo { padding: 16px; }
.mv-wrap + .mv-wrap { margin-top: 14px; }

/* ---- scheda ---- */
.mv-card {
    --mv-a: #1c6ab8; --mv-b: #4a97e0; --mv-fg: #fff;
    --mv-chip: rgba(0, 0, 0, .2); --mv-chip-attivo: rgba(255, 255, 255, .28);
    position: relative; overflow: hidden; border-radius: 18px; color: var(--mv-fg);
    background: linear-gradient(160deg, var(--mv-a), var(--mv-b));
    box-shadow: 0 6px 18px rgba(0, 30, 70, .18);
}

.mv-sereno.mv-giorno, .mv-velato.mv-giorno { --mv-a: #1c6ab8; --mv-b: #4a97e0; }
.mv-nuvoloso.mv-giorno { --mv-a: #9db0c4; --mv-b: #c6d4e2; --mv-fg: #10233a; --mv-chip: rgba(60, 90, 130, .22); --mv-chip-attivo: rgba(60, 90, 130, .4); }
.mv-nebbia.mv-giorno { --mv-a: #b1bcc7; --mv-b: #d5dce2; --mv-fg: #10233a; --mv-chip: rgba(60, 90, 130, .22); --mv-chip-attivo: rgba(60, 90, 130, .4); }
.mv-pioggia.mv-giorno { --mv-a: #45627f; --mv-b: #6584a3; }
.mv-pioggia-forte.mv-giorno { --mv-a: #364f69; --mv-b: #587897; }
.mv-temporale.mv-giorno { --mv-a: #2a3342; --mv-b: #4a566a; }
.mv-neve.mv-giorno { --mv-a: #a6bacd; --mv-b: #d9e5f0; --mv-fg: #10233a; --mv-chip: rgba(60, 90, 130, .22); --mv-chip-attivo: rgba(60, 90, 130, .4); }

.mv-sereno.mv-notte, .mv-velato.mv-notte { --mv-a: #0b1c3c; --mv-b: #27487d; }
.mv-nuvoloso.mv-notte { --mv-a: #1c2b45; --mv-b: #3a4d6b; }
.mv-nebbia.mv-notte { --mv-a: #2b3442; --mv-b: #4a5566; }
.mv-pioggia.mv-notte, .mv-pioggia-forte.mv-notte { --mv-a: #1a293f; --mv-b: #33485e; }
.mv-temporale.mv-notte { --mv-a: #171e2c; --mv-b: #323e51; }
.mv-neve.mv-notte { --mv-a: #26344a; --mv-b: #465a75; }

.mv-cielo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mv-corpo { position: relative; z-index: 1; padding: 14px 16px 12px; }

.mv-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mv-dove { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; font-weight: 700; }
.mv-nome { font-size: 1.35rem; font-weight: 800; line-height: 1.1; word-break: break-word; }
.mv-temp { font-size: 2.6rem; font-weight: 800; line-height: 1.05; margin-top: 2px; }
.mv-quando { font-size: .85rem; font-weight: 600; opacity: .9; margin-right: 4px; }
.mv-cond { font-size: .9rem; }
.mv-icona { background: none; border: 0; padding: 0; width: 116px; height: 96px; flex: 0 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mv-icona .mv-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25)); }
.mv-rimbalza { animation: mv-rimbalza .7s cubic-bezier(.3, 1.6, .5, 1); }

.mv-frase { margin: 8px 0 6px; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.mv-mare { display: inline-block; background: var(--mv-chip); padding: 3px 10px; border-radius: 12px; font-size: .8rem; margin: 2px 0 6px; }
.mv-consiglio { background: rgba(255, 255, 255, .94); color: #0f2d52; border-radius: 12px; padding: 8px 12px; margin: 6px 0; font-size: .85rem; line-height: 1.6; }
.mv-consiglio a { display: inline-block; background: #0b5cad; color: #fff; text-decoration: none; font-weight: 700; padding: 0 10px; border-radius: 10px; margin-left: 2px; }

.mv-giorni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.mv-g {
    background: var(--mv-chip); color: inherit; border: 2px solid transparent; border-radius: 14px;
    padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
    font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mv-g-attivo { border-color: currentColor; background: var(--mv-chip-attivo); }
.mv-g .mv-svg { width: 44px; height: 36px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
.mv-g-nome { font-size: .75rem; font-weight: 700; }
.mv-g-t { font-size: .8rem; font-weight: 600; }
.mv-g-p { font-size: .7rem; opacity: .9; }

.mv-nota { margin-top: 10px; font-size: .68rem; line-height: 1.3; background: var(--mv-chip); border-radius: 8px; padding: 4px 8px; }
.mv-banda { background: #c95a00; color: #fff; font-size: .85rem; line-height: 1.3; padding: 7px 10px; border-radius: 10px; margin-bottom: 10px; }
.mv-seria-red .mv-banda { background: #b3261e; }
.mv-seria { outline: 3px solid #e67e22; outline-offset: -3px; }
.mv-seria-red { outline-color: #c0392b; }

.mv-regione { margin: 12px 2px 0; font-size: .85rem; color: #4a5b6e; text-align: center; line-height: 1.4; }

/* ---- previsione o allerta ---- */
.mv-spiega-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .mv-spiega-griglia { grid-template-columns: 1fr; } }
.mv-spiega-col { border-radius: 12px; padding: 10px 12px; }
.mv-spiega-col p { margin: 4px 0 0; font-size: .85rem; line-height: 1.4; color: #24384d; }
.mv-spiega-t { font-weight: 800; font-size: .95rem; }
.mv-spiega-prev { background: #eaf3fc; border-left: 4px solid #4a97e0; } .mv-spiega-prev .mv-spiega-t { color: #1c6ab8; }
.mv-spiega-all { background: #fff4e5; border-left: 4px solid #e67e22; } .mv-spiega-all .mv-spiega-t { color: #b35a00; }
.mv-spiega-regola { margin: 10px 0 0; padding: 8px 12px; background: #f1f5f9; border-radius: 10px; text-align: center; font-size: .88rem; color: #24384d; }
.mv-spiega-esempio { margin-top: 8px; font-size: .85rem; color: #24384d; }
.mv-spiega-esempio summary { cursor: pointer; font-weight: 700; color: #0f4c81; padding: 4px 0; }
.mv-spiega-esempio p { margin: 4px 0 0; line-height: 1.45; }

/* ---- sfondo della scheda ---- */
.mv-p-goccia { position: absolute; top: -18px; width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(210, 235, 255, .85)); animation: mv-pioggia .9s linear infinite; }
.mv-p-fiocco { position: absolute; top: -8px; border-radius: 50%; background: rgba(255, 255, 255, .92); animation: mv-neve 6s linear infinite; }
.mv-p-stella { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: mv-brilla 3s ease-in-out infinite; }
.mv-p-nube { position: absolute; left: 0; opacity: .16; animation: mv-deriva linear infinite; }
.mv-nuvoloso.mv-giorno .mv-p-nube, .mv-nebbia.mv-giorno .mv-p-nube, .mv-neve.mv-giorno .mv-p-nube, .mv-sereno.mv-giorno .mv-p-nube, .mv-velato.mv-giorno .mv-p-nube { opacity: .4; }
.mv-p-nebbia { position: absolute; left: -10%; width: 120%; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, .38); filter: blur(6px); animation: mv-nebbia 18s ease-in-out infinite alternate; }

/* ---- animazioni delle icone (scheda e mappa vicina) ---- */
.mv-anima .mv-raggi, .mv-vicino .mv-raggi { animation: mv-gira 30s linear infinite; }
.mv-anima .mv-nube-a, .mv-vicino .mv-nube-a { animation: mv-fluttua 5s ease-in-out infinite alternate; }
.mv-anima .mv-nube-b, .mv-vicino .mv-nube-b { animation: mv-fluttua 7s ease-in-out infinite alternate-reverse; }
.mv-anima .mv-goccia, .mv-vicino .mv-goccia { animation: mv-cade 1s linear infinite; }
.mv-anima .mv-fiocco, .mv-vicino .mv-fiocco { animation: mv-fiocca 2.6s linear infinite; }
.mv-anima .mv-lampo, .mv-vicino .mv-lampo { animation: mv-lampo 3.2s linear infinite; }
.mv-anima .mv-stella, .mv-vicino .mv-stella { animation: mv-brilla 3s ease-in-out infinite; }
.mv-anima .mv-nebbia-a, .mv-vicino .mv-nebbia-a { animation: mv-fluttua 4s ease-in-out infinite alternate; }
.mv-anima .mv-nebbia-b, .mv-vicino .mv-nebbia-b { animation: mv-fluttua 5s ease-in-out infinite alternate-reverse; }

@keyframes mv-gira { to { transform: rotate(360deg); } }
@keyframes mv-fluttua { from { transform: translateX(-2px); } to { transform: translateX(3px); } }
@keyframes mv-cade { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes mv-fiocca { 0% { transform: translate(0, -3px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(3px, 13px); opacity: 0; } }
@keyframes mv-lampo { 0%, 55%, 100% { opacity: 0; } 60% { opacity: 1; } 65% { opacity: .2; } 70% { opacity: 1; } 80% { opacity: 0; } }
@keyframes mv-brilla { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes mv-pioggia { to { transform: translate(-6px, 460px); } }
@keyframes mv-neve { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, 200px); } 100% { transform: translate(-6px, 460px); } }
@keyframes mv-deriva { from { transform: translateX(-200px); } to { transform: translateX(700px); } }
@keyframes mv-nebbia { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes mv-rimbalza { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.18) rotate(-6deg); } 70% { transform: scale(.96) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }

/* ---- mappa ---- */
.mv-marker { background: none; border: 0; }
.mv-m { width: 46px; text-align: center; }
.mv-m .mv-svg { width: 46px; height: 38px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.mv-m-t { display: block; width: fit-content; margin: -6px auto 0; position: relative; padding: 0 6px; border-radius: 9px; background: rgba(0, 26, 60, .8); color: #fff; font: 700 11px/1.5 system-ui, sans-serif; }
.mv-popup { font-size: .9rem; text-align: center; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    .mv-card *, .mv-marker *, .mv-icona, .mv-rimbalza { animation: none !important; }
    .mv-p-goccia, .mv-p-fiocco, .mv-p-nube { display: none; }
}