/* =============================================================================
 * css/MIS_anim.css - ANIMAZIONE "IL VIAGGIO DEL VOTO" della home (09/11/2026)
 * -----------------------------------------------------------------------------
 * Stile del disegno SVG (home.php, sezione 3b) e dei suoi controlli.
 * 09/11/2026 (revisione): server e database in alto, elettore e urna sotto;
 * intestazione del passo in alto e pallini di avanzamento come nella tavola;
 * disegno ridotto del 15%; etichette che vanno a capo (MIS_an_pill_a).
 * Versione "storyboard" (09/11/2026, sera): i quattro protagonisti sono
 * tessere arrotondate con icone a linea (elettore, server, database, urna);
 * colori con significato: blu email/server, arancio percorso anonimo, verde
 * cio' che resta salvato e la ricevuta, rosso ora e IP (non salvati).
 * Le scritte che vanno a capo stanno in riquadri HTML dentro <foreignObject>
 * (classe MIS_an_fo): comparsa in dissolvenza con leggero spostamento.
 * js/MIS_anim.js cambia data-fase sul contenitore #MIS_anim (0, 1a ... 5b);
 * qui ogni fase dice cosa si vede e dove stanno gli oggetti che viaggiano
 * (busta dell'invito, nome, scheda con la busta chiusa), con le transizioni
 * dei flussi. Fasi: 1a-1c invito | 2a-2e firma alla cieca | 3a-3d deposito
 * anonimo | 4a ricevuta | 5a-5b spoglio pubblico. Ingresso a caso a ogni
 * caricamento. Con prefers-reduced-motion niente transizioni.
 * Prefisso MIS_an_/MIS_anim_/MIS_ent_.
 * ============================================================================= */
.MIS_anim { padding: 72px 0 64px; scroll-margin-top: var(--MIS-h-header); }
.MIS_anim_intro { font-size: 17px; line-height: 1.65; color: var(--MIS-testo-2); max-width: 820px; margin-bottom: 28px !important; }
.MIS_anim_box { border: 1px solid var(--MIS-bordo); border-radius: 18px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 30%, #eaf3fd 0%, rgba(234, 243, 253, 0) 65%), linear-gradient(180deg, #f7fafd 0%, #ffffff 100%);
    box-shadow: 0 1px 2px rgba(21, 71, 108, .06), 0 18px 40px rgba(21, 71, 108, .10); }
/* disegno ridotto del 15% e mai piu' alto dello schermo: tutto il riquadro (spiegazione, disegno,
   pallini) deve stare nella finestra. 960/460 = proporzioni del viewBox; 370px = header del sito,
   spiegazione del passo e barra dei pallini; non sotto i 320px di larghezza */
.MIS_an_svg { display: block; height: auto; margin: 0 auto; width: 85%;
    width: min(85%, max(320px, calc((100vh - 370px) * 2.087))); }
.MIS_an_et { font: 700 14px/1 Montserrat, Arial, sans-serif; fill: var(--MIS-blu); }

/* ------------------------------------------------------------ tessere dei protagonisti */
.MIS_an_tile { fill: #ffffff; stroke: #dfe8f1; stroke-width: 1; }
.MIS_an_tile_scuro { fill: url(#MIS_an_g_rack); stroke: #15476c; }
.MIS_an_ring { fill: none; stroke: #007bff; stroke-width: 2; opacity: 0; transition: opacity .6s ease;
    filter: drop-shadow(0 0 6px rgba(0, 123, 255, .35)); }
.MIS_an_ico { fill: none; stroke: var(--MIS-blu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.MIS_an_ico_chiaro { stroke: #ffffff; }
.MIS_an_tel { fill: #1e2b38; }
.MIS_an_schermo { fill: #cfe3f7; transition: fill .6s; }
.MIS_an_led { fill: #48d38a; animation: MIS_an_led 2.4s ease-in-out infinite; }
.MIS_an_led2 { animation-delay: 1.2s; }
@keyframes MIS_an_led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.MIS_an_lucch_b { fill: var(--MIS-blu); }

/* ------------------------------------------------------------ percorsi */
.MIS_an_via { opacity: 0; transition: opacity .6s; }
.MIS_an_via_l { stroke: #7fb4ff; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; fill: none; animation: MIS_an_flusso 1s linear infinite; }
.MIS_an_via_f { fill: none; stroke: #007bff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.MIS_an_via_dx { opacity: 0; transition: opacity .5s; }
.MIS_an_strada { stroke: #f0a43a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; opacity: 0;
    transition: opacity .7s; animation: MIS_an_flusso 1s linear infinite; }
.MIS_an_strada_f { stroke: #e8890c; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .7s; }
@keyframes MIS_an_flusso { to { stroke-dashoffset: -22; } }

/* ------------------------------------------------------------ riquadri HTML (foreignObject) */
.MIS_an_fo { overflow: visible; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.MIS_an_fo > div { font-family: Montserrat, Arial, sans-serif; box-sizing: border-box; }
.MIS_an_fo_c { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.MIS_an_fo_s { width: 100%; height: 100%; display: flex; align-items: center; }
.MIS_an_fo_t { align-items: flex-start; }
/* etichette che possono andare a capo (testi lunghi, lingue straniere) */
.MIS_an_pill.MIS_an_pill_a { white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; }
.MIS_an_fo_col .MIS_an_pill.MIS_an_pill_a { text-align: left; }
/* etichette sul percorso dell'email: se il testo e' lungo (es. tedesco) va a capo, appoggiate sulla linea */
.MIS_an_fo_b { align-items: flex-end; }
.MIS_an_fo_b .MIS_an_pill { white-space: normal; text-align: center; max-width: 214px; }
.MIS_an_fo_col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.MIS_an_pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 800;
    line-height: 1.2; white-space: nowrap; background: #ffffff; box-shadow: 0 6px 14px rgba(21, 71, 108, .10); }
.MIS_an_pill_blu { border: 1.5px solid #9cc5ff; color: #0b5ed7; }
.MIS_an_pill_verde { border: 1.5px solid #8fd1ab; background: #e8f6ee; color: #1f6f43; }
.MIS_an_pill_ind { border: 1.5px solid #aab8f0; background: #eef1fd; color: #2a4fd0; }
.MIS_an_pill_ar { border: 1.5px solid #f0a43a; background: #fff3e0; color: #8a5200; }
.MIS_an_pill_ar_b { border: 1.5px solid #f3b14e; color: #8a5200; }
.MIS_an_pill_ar_b svg { color: #e8890c; }
.MIS_an_pill_nome { border: 1.5px solid #f3b14e; background: #fff6e6; color: #8a5200; font-weight: 700; }
.MIS_an_card { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 12px; background: #ffffff;
    border: 1px solid #d6e2ee; box-shadow: 0 10px 22px rgba(21, 71, 108, .12); }
.MIS_an_notif_c { flex-direction: row; align-items: flex-start; gap: 10px; border-radius: 16px; }
.MIS_an_notif_i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: #007bff; display: inline-flex; align-items: center; justify-content: center; }
.MIS_an_notif_t { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.4; color: #4a5a68; }
.MIS_an_notif_t b { color: var(--MIS-blu); font-weight: 800; }
.MIS_an_gib { font: 700 14px/1.2 "Courier New", monospace; color: #6b8197; letter-spacing: 1px; }
.MIS_an_gib_p { font-size: 12px; }
.MIS_an_cap { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--MIS-blu); letter-spacing: .8px; text-transform: uppercase; }
.MIS_an_cap_v { color: #1f6f43; }
.MIS_an_codice { font: 700 20px/1.1 "Courier New", monospace; color: var(--MIS-blu); letter-spacing: 1.5px; }
.MIS_an_nota { font-size: 11px; color: #4a5a68; }
.MIS_an_ric_c { border-color: #cfe8da; }
.MIS_an_imp_c { border-color: #cfe8da; }
.MIS_an_reg_v { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--MIS-blu); }
.MIS_an_reg_g { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1f6f43; }
.MIS_an_reg_x { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #b3261e; }
.MIS_an_reg_x svg { color: #c62828; flex: 0 0 auto; }
.MIS_an_orol_c { border-color: #f3c98a; gap: 6px; }
.MIS_an_orol_t { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #8a5200; }
.MIS_an_orol_t svg { color: #e8890c; flex: 0 0 auto; }
.MIS_an_orol_c .MIS_an_nota { font-size: 11.5px; line-height: 1.45; }
.MIS_an_ris_c { gap: 5px; padding: 8px 12px; }
.MIS_an_riga { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #2b3a47; }
.MIS_an_riga i { font-style: normal; width: 84px; flex: 0 0 auto; }
.MIS_an_bar { flex: 1 1 auto; height: 10px; border-radius: 5px; background: #e6ebf1; overflow: hidden; }
.MIS_an_bar > span { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 1.1s cubic-bezier(.3, 1, .5, 1); }
.MIS_an_bar_1 { background: linear-gradient(90deg, #0b5ed7, #3d8cff); }
.MIS_an_bar_2 { background: #5aa0ff; transition-delay: .15s !important; }
.MIS_an_bar_3 { background: #9cc5ff; transition-delay: .3s !important; }
.MIS_an_verb_c { flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; font-weight: 800; color: var(--MIS-blu); white-space: nowrap; }
.MIS_an_lancetta { transform-box: view-box; transform-origin: 12px 12px; }
.MIS_anim_box[data-fase="3a"] .MIS_an_lancetta, .MIS_anim_box[data-fase="3b"] .MIS_an_lancetta { animation: MIS_an_giro 1.4s linear infinite; }
@keyframes MIS_an_giro { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ oggetti che viaggiano */
.MIS_an_mail, .MIS_an_nome, .MIS_an_scheda { transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity .7s ease; }
.MIS_an_mail { transform: translate(301px, 136px); opacity: 0; }
.MIS_an_mail rect { fill: #ffffff; stroke: #c9d7e5; stroke-width: 1.5; }
.MIS_an_lembo { fill: #e7f0fa; stroke: #007bff; stroke-width: 2.4; stroke-linejoin: round; }
.MIS_an_nome { transform: translate(108px, 346px); }
.MIS_an_nome foreignObject { overflow: visible; }
.MIS_an_nome .MIS_an_fo_c { font-family: Montserrat, Arial, sans-serif; }
.MIS_an_scheda { transform: translate(240px, 250px); opacity: 0; }
.MIS_an_foglio { fill: #ffffff; stroke: #c9d7e5; stroke-width: 1.5; }
.MIS_an_testata { fill: var(--MIS-blu); }
.MIS_an_casella { fill: #ffffff; stroke: #9fb3c6; stroke-width: 1.5; }
.MIS_an_scelte { stroke: #c4d3e1; stroke-width: 4; stroke-linecap: round; }
.MIS_an_spunte { fill: none; stroke: var(--MIS-verde); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.MIS_an_firma_s, .MIS_an_firma_b { fill: none; stroke: #2a4fd0; stroke-width: 2.8; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.MIS_an_firma_b { stroke-dasharray: 70; stroke-dashoffset: 70; transition: opacity .3s, stroke-dashoffset .9s .2s; }
.MIS_an_busta { opacity: 0; transition: opacity .7s ease; }
.MIS_an_busta_c { fill: url(#MIS_an_g_busta); stroke: #b9cde2; stroke-width: 1.5; }
.MIS_an_busta_l { fill: #d3e1ef; stroke: #b9cde2; stroke-width: 1.2; }
.MIS_an_sigillo { fill: var(--MIS-blu); }
.MIS_an_sigillo_l { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linejoin: round; }
.MIS_an_mini { opacity: 0; transform: translateY(46px); transition: transform .9s cubic-bezier(.3, 1.2, .5, 1), opacity .6s; }
.MIS_an_mini rect { fill: #ffffff; stroke: #c9d7e5; stroke-width: 1.5; }
.MIS_an_mini .MIS_an_mini_t { fill: var(--MIS-blu); stroke: none; }

/* ------------------------------------------------------------ stati per fase */
.MIS_anim_box[data-fase="1a"] .MIS_an_mail { transform: translate(301px, 136px); opacity: 1; }
.MIS_anim_box[data-fase="1b"] .MIS_an_mail { transform: translate(201px, 174px); opacity: 1; }
.MIS_anim_box[data-fase="1c"] .MIS_an_mail { transform: translate(201px, 174px) scale(.5); opacity: 0; }
.MIS_anim_box[data-fase="1c"] .MIS_an_schermo,
.MIS_anim_box[data-fase="2a"] .MIS_an_schermo { fill: #4d9bff; }
.MIS_anim_box[data-fase="1c"] .MIS_an_notif { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="0"] .MIS_an_via,
.MIS_anim_box[data-fase="1a"] .MIS_an_via,
.MIS_anim_box[data-fase="1b"] .MIS_an_via,
.MIS_anim_box[data-fase="1c"] .MIS_an_via,
.MIS_anim_box[data-fase="2a"] .MIS_an_via,
.MIS_anim_box[data-fase="2b"] .MIS_an_via,
.MIS_anim_box[data-fase="2c"] .MIS_an_via,
.MIS_anim_box[data-fase="2d"] .MIS_an_via,
.MIS_anim_box[data-fase="2e"] .MIS_an_via { opacity: 1; }
.MIS_anim_box[data-fase="2a"] .MIS_an_via_dx,
.MIS_anim_box[data-fase="2b"] .MIS_an_via_dx,
.MIS_anim_box[data-fase="2c"] .MIS_an_via_dx,
.MIS_anim_box[data-fase="2d"] .MIS_an_via_dx,
.MIS_anim_box[data-fase="2e"] .MIS_an_via_dx { opacity: 1; }
.MIS_anim_box[data-fase="0"] .MIS_an_pill_email,
.MIS_anim_box[data-fase="1a"] .MIS_an_pill_email,
.MIS_anim_box[data-fase="1b"] .MIS_an_pill_email,
.MIS_anim_box[data-fase="1c"] .MIS_an_pill_email { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="2a"] .MIS_an_pill_torna,
.MIS_anim_box[data-fase="2b"] .MIS_an_pill_torna,
.MIS_anim_box[data-fase="2c"] .MIS_an_pill_torna,
.MIS_anim_box[data-fase="2d"] .MIS_an_pill_torna,
.MIS_anim_box[data-fase="2e"] .MIS_an_pill_torna { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="2c"] .MIS_an_nome,
.MIS_anim_box[data-fase="2d"] .MIS_an_nome { transform: translate(380px, 194px); }
.MIS_anim_box[data-fase="3a"] .MIS_an_nome,
.MIS_anim_box[data-fase="3b"] .MIS_an_nome,
.MIS_anim_box[data-fase="3c"] .MIS_an_nome,
.MIS_anim_box[data-fase="3d"] .MIS_an_nome { opacity: .4; }
.MIS_anim_box[data-fase="2a"] .MIS_an_scheda { transform: translate(240px, 250px); opacity: 1; }
.MIS_anim_box[data-fase="2b"] .MIS_an_scheda { transform: translate(240px, 250px); opacity: 1; }
.MIS_anim_box[data-fase="2c"] .MIS_an_scheda { transform: translate(262px, 72px); opacity: 1; }
.MIS_anim_box[data-fase="2d"] .MIS_an_scheda { transform: translate(262px, 72px); opacity: 1; }
.MIS_anim_box[data-fase="2e"] .MIS_an_scheda { transform: translate(240px, 250px); opacity: 1; }
.MIS_anim_box[data-fase="3a"] .MIS_an_scheda { transform: translate(240px, 250px); opacity: 1; }
.MIS_anim_box[data-fase="3b"] .MIS_an_scheda { transform: translate(480px, 232px); opacity: 1; }
.MIS_anim_box[data-fase="3c"] .MIS_an_scheda { transform: translate(756px, 232px); opacity: 1; }
.MIS_anim_box[data-fase="3d"] .MIS_an_scheda,
.MIS_anim_box[data-fase="4a"] .MIS_an_scheda,
.MIS_anim_box[data-fase="5a"] .MIS_an_scheda,
.MIS_anim_box[data-fase="5b"] .MIS_an_scheda { transform: translate(852px, 240px) scale(.5); opacity: 0; }
.MIS_anim_box[data-fase="2b"] .MIS_an_busta,
.MIS_anim_box[data-fase="2c"] .MIS_an_busta,
.MIS_anim_box[data-fase="2d"] .MIS_an_busta,
.MIS_anim_box[data-fase="2e"] .MIS_an_busta { opacity: 1; }
.MIS_anim_box[data-fase="2d"] .MIS_an_firma_b,
.MIS_anim_box[data-fase="2e"] .MIS_an_firma_b { opacity: 1; stroke-dashoffset: 0; }
.MIS_anim_box[data-fase="3a"] .MIS_an_firma_s,
.MIS_anim_box[data-fase="3b"] .MIS_an_firma_s,
.MIS_anim_box[data-fase="3c"] .MIS_an_firma_s,
.MIS_anim_box[data-fase="3d"] .MIS_an_firma_s { opacity: 1; }
.MIS_anim_box[data-fase="2d"] .MIS_an_ok,
.MIS_anim_box[data-fase="2e"] .MIS_an_ok { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="3a"] .MIS_an_orol,
.MIS_anim_box[data-fase="3b"] .MIS_an_orol { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="3b"] .MIS_an_strada,
.MIS_anim_box[data-fase="3c"] .MIS_an_strada { opacity: 1; }
.MIS_anim_box[data-fase="3b"] .MIS_an_strada_f,
.MIS_anim_box[data-fase="3c"] .MIS_an_strada_f { opacity: 1; }
.MIS_anim_box[data-fase="3b"] .MIS_an_senza,
.MIS_anim_box[data-fase="3c"] .MIS_an_senza { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="3d"] .MIS_an_valida { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="3b"] .MIS_an_cif,
.MIS_anim_box[data-fase="3c"] .MIS_an_cif,
.MIS_anim_box[data-fase="3d"] .MIS_an_cif,
.MIS_anim_box[data-fase="4a"] .MIS_an_cif,
.MIS_anim_box[data-fase="5a"] .MIS_an_cif,
.MIS_anim_box[data-fase="5b"] .MIS_an_cif { opacity: 0; transform: translateY(10px); }
.MIS_anim_box[data-fase="4a"] .MIS_an_reg { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="4a"] .MIS_an_imp { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="4a"] .MIS_an_ric,
.MIS_anim_box[data-fase="5a"] .MIS_an_ric,
.MIS_anim_box[data-fase="5b"] .MIS_an_ric { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="5a"] .MIS_an_spoglio,
.MIS_anim_box[data-fase="5b"] .MIS_an_spoglio { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="5b"] .MIS_an_bar_1 { width: 92%; }
.MIS_anim_box[data-fase="5b"] .MIS_an_bar_2 { width: 58%; }
.MIS_anim_box[data-fase="5b"] .MIS_an_bar_3 { width: 30%; }
.MIS_anim_box[data-fase="5a"] .MIS_an_mini,
.MIS_anim_box[data-fase="5b"] .MIS_an_mini { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="5a"] .MIS_an_pubblica,
.MIS_anim_box[data-fase="5b"] .MIS_an_pubblica { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="5b"] .MIS_an_verb { opacity: 1; transform: none; }
.MIS_anim_box[data-fase="1b"] .MIS_an_el .MIS_an_ring,
.MIS_anim_box[data-fase="1c"] .MIS_an_el .MIS_an_ring,
.MIS_anim_box[data-fase="2a"] .MIS_an_el .MIS_an_ring,
.MIS_anim_box[data-fase="2b"] .MIS_an_el .MIS_an_ring,
.MIS_anim_box[data-fase="2e"] .MIS_an_el .MIS_an_ring,
.MIS_anim_box[data-fase="4a"] .MIS_an_el .MIS_an_ring { opacity: 1; }
.MIS_anim_box[data-fase="1a"] .MIS_an_sv .MIS_an_ring,
.MIS_anim_box[data-fase="2c"] .MIS_an_sv .MIS_an_ring,
.MIS_anim_box[data-fase="2d"] .MIS_an_sv .MIS_an_ring { opacity: 1; }
.MIS_anim_box[data-fase="1c"] .MIS_an_db .MIS_an_ring,
.MIS_anim_box[data-fase="4a"] .MIS_an_db .MIS_an_ring { opacity: 1; }
.MIS_anim_box[data-fase="3c"] .MIS_an_ur .MIS_an_ring,
.MIS_anim_box[data-fase="3d"] .MIS_an_ur .MIS_an_ring,
.MIS_anim_box[data-fase="5a"] .MIS_an_ur .MIS_an_ring,
.MIS_anim_box[data-fase="5b"] .MIS_an_ur .MIS_an_ring { opacity: 1; }

/* ------------------------------------------------------------ ingresso a caso (09/11/2026)
   js/MIS_anim.js aggiunge MIS_anim_pronta + MIS_ent_<effetto> al caricamento e
   MIS_anim_entra quando la sezione diventa visibile; gli attori hanno MIS_ent_r0..r3
   (ordine casuale). Senza JS nessuna di queste classi: tutto subito visibile. */
.MIS_anim_pronta .MIS_an_svg, .MIS_anim_pronta .MIS_an_attore { opacity: 0; }
.MIS_anim_pronta.MIS_anim_entra .MIS_an_svg { animation: .9s cubic-bezier(.2, .8, .2, 1) both; }
.MIS_anim_pronta.MIS_ent_sale.MIS_anim_entra .MIS_an_svg { animation-name: MIS_ent_sale; }
.MIS_anim_pronta.MIS_ent_zoom.MIS_anim_entra .MIS_an_svg { animation-name: MIS_ent_zoom; }
.MIS_anim_pronta.MIS_ent_sinistra.MIS_anim_entra .MIS_an_svg { animation-name: MIS_ent_sinistra; }
.MIS_anim_pronta.MIS_ent_destra.MIS_anim_entra .MIS_an_svg { animation-name: MIS_ent_destra; }
.MIS_anim_pronta.MIS_ent_sfoca.MIS_anim_entra .MIS_an_svg { animation-name: MIS_ent_sfoca; }
.MIS_anim_pronta.MIS_ent_ruota.MIS_anim_entra .MIS_an_svg { animation-name: MIS_ent_ruota; }
@keyframes MIS_ent_sale { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes MIS_ent_zoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes MIS_ent_sinistra { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes MIS_ent_destra { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes MIS_ent_sfoca { from { opacity: 0; filter: blur(14px); transform: scale(1.05); } to { opacity: 1; filter: none; transform: none; } }
@keyframes MIS_ent_ruota { from { opacity: 0; transform: perspective(900px) rotateX(22deg) translateY(30px); } to { opacity: 1; transform: none; } }
/* attori: compaiono uno dopo l'altro con un piccolo rimbalzo */
.MIS_anim_pronta.MIS_anim_entra .MIS_an_attore { transform-box: fill-box; transform-origin: 50% 100%;
    animation: MIS_ent_attore .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.MIS_anim_pronta.MIS_anim_entra .MIS_ent_r0 { animation-delay: .35s; }
.MIS_anim_pronta.MIS_anim_entra .MIS_ent_r1 { animation-delay: .55s; }
.MIS_anim_pronta.MIS_anim_entra .MIS_ent_r2 { animation-delay: .75s; }
.MIS_anim_pronta.MIS_anim_entra .MIS_ent_r3 { animation-delay: .95s; }
@keyframes MIS_ent_attore { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ avanzamento, didascalie e controlli */
.MIS_anim_prog { height: 3px; background: var(--MIS-bordo); }
.MIS_anim_prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--MIS-primario), #4d9bff); }
.MIS_anim_sotto { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 18px; }
/* pallini di avanzamento (come nella tavola): attivo lungo e blu, fatti azzurri, futuri grigi */
.MIS_anim_passi { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.MIS_anim_num { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; }
.MIS_anim_pallino { display: block; width: 10px; height: 10px; border-radius: 5px; background: #c9d7e5;
    transition: width .45s cubic-bezier(.3, 1.2, .5, 1), background .35s; }
.MIS_anim_num.MIS_anim_fatto .MIS_anim_pallino { background: #9cc5ff; }
.MIS_anim_num[aria-current="step"] .MIS_anim_pallino { width: 34px; background: #007bff; }
.MIS_anim_num:hover .MIS_anim_pallino { background: #4d9bff; }
.MIS_anim_num:focus-visible, .MIS_anim_btn:focus-visible { outline: 3px solid var(--MIS-arancio); outline-offset: 2px; }
.MIS_anim_num:focus:not(:focus-visible), .MIS_anim_btn:focus:not(:focus-visible) { outline: none; }   /* niente anello del tema al clic col mouse */
/* intestazione del passo in alto: "Passo X di 5", titolo, spiegazione (dissolvenza incrociata) */
.MIS_anim_didas { display: grid; text-align: left; padding: 22px 32px 2px; }
.MIS_anim_d { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.MIS_anim_d.MIS_anim_on { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s; }
.MIS_anim_d_n { display: inline-block; padding: 5px 12px; border-radius: 20px; background: #e7f0fa; color: #0b5ed7;
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.MIS_anim_d h3 { margin: 8px 0 6px; font-size: 26px; font-weight: 800; color: var(--MIS-blu); }
.MIS_anim_d p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--MIS-testo-2); max-width: 900px; }
.MIS_anim_ctrl { display: flex; gap: 8px; flex: 0 0 auto; }
.MIS_anim_btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 1px solid var(--MIS-bordo); background: #ffffff; color: var(--MIS-blu); cursor: pointer;
    box-shadow: 0 2px 6px rgba(21, 71, 108, .08); transition: background .25s, box-shadow .25s, transform .2s; }
.MIS_anim_btn:hover { background: #eef4fb; box-shadow: 0 4px 12px rgba(21, 71, 108, .14); transform: translateY(-1px); }
.MIS_anim_play { background: var(--MIS-blu); border-color: var(--MIS-blu); color: #ffffff; }
.MIS_anim_play:hover { background: var(--MIS-primario); }
.MIS_anim_btn svg { color: inherit; }
.MIS_anim_play svg { color: #ffffff !important; fill: #ffffff !important; }
.MIS_anim_play .MIS_ico_pausa, .MIS_anim_box.MIS_anim_va .MIS_anim_play .MIS_ico_play { display: none; }
.MIS_anim_box.MIS_anim_va .MIS_anim_play .MIS_ico_pausa { display: inline; }

@media (max-width: 760px) {
    .MIS_anim { padding: 48px 0; }
    .MIS_anim_sotto { padding: 10px 12px 14px; }
    .MIS_anim_didas { padding: 20px 16px 4px; }
    .MIS_anim_d h3 { font-size: 21px; }
    .MIS_anim_num { width: 28px; }
    .MIS_anim_num[aria-current="step"] { width: 44px; }
    .MIS_anim_ctrl { gap: 6px; }
    .MIS_anim_btn { width: 42px; height: 42px; }
    .MIS_an_svg { width: 100%; }
    /* il disegno si rimpicciolisce: etichette dei protagonisti piu' grandi, riquadri di testo nascosti
       (il loro contenuto e' nelle didascalie); restano gli oggetti che viaggiano e i percorsi */
    .MIS_an_et { font-size: 24px; }
    .MIS_an_fo:not(.MIS_an_ric):not(.MIS_an_notif) { display: none; }
}
@media (max-width: 380px) {
    .MIS_anim_sotto { padding: 10px 8px 14px; gap: 8px; }
    .MIS_anim_num { width: 24px; }
    .MIS_anim_num[aria-current="step"] { width: 40px; }
}
@media (max-width: 340px) {
    .MIS_anim_num { width: 20px; }
    .MIS_anim_num[aria-current="step"] { width: 36px; }
    .MIS_anim_btn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .MIS_anim_box *, .MIS_anim_box *::before { transition: none !important; animation: none !important; }
}