/* ==========================================================================
   moveIn – sezione "Dove funziona": mappa interattiva della laguna
   Tutte le regole partono da .mi-dove-funziona. Usa le variabili del sito (--lp-*).
   Isole direttamente sullo sfondo della pagina, senza riquadro: i bordi della mappa sfumano.
   ========================================================================== */

.mi-dove-funziona {
    --mi-bg: var(--lp-white, #fff);
    --mi-land: var(--lp-blue, #3a68ad);
    --mi-land-hot: #5b8bd0;
    --mi-land-zoom: #cddcf0;
    --mi-other: #d5e0ee;
    --mi-ease: cubic-bezier(.65, 0, .35, 1);
    text-align: center;
}

/* Intestazione (etichetta + titolo), poi mappa, poi paragrafo */
.mi-dove-funziona .mi-head { margin: 0 auto 28px; max-width: 760px; }
.mi-dove-funziona .mi-head h2 { margin-bottom: 0; }
.mi-dove-funziona .mi-intro {
    max-width: 640px; margin: 56px auto 0;
    color: var(--lp-muted, #55607a); font-size: 1.05rem;
}

/* Mappa: nessun riquadro, i bordi sfumano nello sfondo */
.mi-dove-funziona .mi-map { position: relative; max-width: 920px; margin: 0 auto; }
.mi-dove-funziona .mi-svg {
    display: block; width: 100%; height: auto; overflow: hidden;
    /* sfumatura lunga e graduale (più tappe = passaggio morbido, senza bordo percepibile) */
    --mi-fade-x: transparent 0%, rgba(0, 0, 0, .1) 4%, rgba(0, 0, 0, .3) 8%, rgba(0, 0, 0, .58) 12%,
                 rgba(0, 0, 0, .82) 15%, #000 18%, #000 82%, rgba(0, 0, 0, .82) 85%, rgba(0, 0, 0, .58) 88%,
                 rgba(0, 0, 0, .3) 92%, rgba(0, 0, 0, .1) 96%, transparent 100%;
    --mi-fade-y: transparent 0%, rgba(0, 0, 0, .1) 3%, rgba(0, 0, 0, .3) 6%, rgba(0, 0, 0, .58) 9%,
                 rgba(0, 0, 0, .82) 12%, #000 14%, #000 86%, rgba(0, 0, 0, .82) 88%, rgba(0, 0, 0, .58) 91%,
                 rgba(0, 0, 0, .3) 94%, rgba(0, 0, 0, .1) 97%, transparent 100%;
    -webkit-mask-image: linear-gradient(to right, var(--mi-fade-x)), linear-gradient(to bottom, var(--mi-fade-y));
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, var(--mi-fade-x)), linear-gradient(to bottom, var(--mi-fade-y));
            mask-composite: intersect;
}

/* Etichetta a pillola (aria-live) e pulsante di ritorno */
.mi-dove-funziona .mi-hint,
.mi-dove-funziona .mi-back {
    position: absolute; top: 8px; z-index: 2; margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--lp-ink, #16213a);
    border: 1px solid var(--lp-line, #e3e8f2);
    box-shadow: 0 6px 18px -10px rgba(22, 41, 74, .35);
    font-size: .88rem; font-weight: 500; line-height: 1.3; text-align: left;
}
.mi-dove-funziona .mi-hint { left: 8px; }
.mi-dove-funziona .mi-hint i { color: var(--lp-blue, #3a68ad); }
/* Numero cerchiato (stesso colore della manina), al posto della manina nella vista zoomata */
.mi-dove-funziona .mi-hint.is-count i { display: none; }
.mi-dove-funziona .mi-hint-num {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px;
    border: 1.5px solid var(--lp-blue, #3a68ad); color: var(--lp-blue, #3a68ad);
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: .82rem; line-height: 1;
}
.mi-dove-funziona .mi-hint-num[hidden] { display: none; }
.mi-dove-funziona .mi-back {
    right: 8px; cursor: pointer; font: inherit; font-weight: 500; font-size: .88rem;
    color: var(--lp-blue-dark, #2a5191); transition: background-color .15s ease, border-color .15s ease;
}
.mi-dove-funziona .mi-back[hidden] { display: none; }
.mi-dove-funziona .mi-back:hover { background: #fff; border-color: #cdd8ea; }
.mi-dove-funziona .mi-back:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 2px; }

/* Attribuzione dati mappa (obbligatoria) */
.mi-dove-funziona .mi-attrib {
    position: absolute; right: 8px; bottom: 4px; margin: 0;
    font-size: .7rem; color: var(--lp-muted, #55607a); opacity: .8;
}
.mi-dove-funziona .mi-attrib a { color: inherit; }

/* Nome dell'itinerario al passaggio del mouse */
.mi-dove-funziona .mi-tip {
    position: absolute; z-index: 3; pointer-events: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 10px;
    background: var(--lp-blue-deep, #16294a); color: #fff;
    box-shadow: 0 8px 22px -10px rgba(22, 41, 74, .6);
    font-size: .88rem; font-weight: 500; line-height: 1.2;
}
.mi-dove-funziona .mi-tip[hidden] { display: none; }
.mi-dove-funziona .mi-tip-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }

/* Forme */
.mi-dove-funziona .mi-shape { transition: opacity .25s ease, fill .25s ease; vector-effect: non-scaling-stroke; }
.mi-dove-funziona .mi-land { fill: var(--mi-land); stroke: rgba(255, 255, 255, .7); stroke-width: .75; stroke-linejoin: round; }
.mi-dove-funziona .mi-other { fill: var(--mi-other); }
.mi-dove-funziona .mi-bridge { fill: none; stroke: var(--mi-other); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mi-dove-funziona .mi-canal {
    fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s ease; vector-effect: non-scaling-stroke;
}

/* Zone attive (attributi aggiunti dal JS) */
.mi-dove-funziona .mi-zone[role="button"] { cursor: pointer; outline: none; }
.mi-dove-funziona .mi-zone[role="button"]:focus-visible .mi-land { stroke: var(--lp-gold, #d6a02a); stroke-width: 3; }

/* Hover / focus in vista generale: la zona si schiarisce, il resto scende al 30% */
.mi-dove-funziona.is-hover .mi-shape,
.mi-dove-funziona.is-hover .mi-canal { opacity: .3; }
.mi-dove-funziona.is-hover .mi-zone.is-hot .mi-shape,
.mi-dove-funziona.is-hover .mi-zone.is-hot .mi-canal { opacity: 1; }
.mi-dove-funziona.is-hover .mi-zone.is-hot .mi-land { fill: var(--mi-land-hot); }

/* Vista zoomata: terra più chiara, così le aree colorate degli itinerari risaltano */
.mi-dove-funziona.is-zoomed .mi-land { fill: var(--mi-land-zoom); }
.mi-dove-funziona.is-zoomed .mi-canal { stroke: rgba(255, 255, 255, .9); }

/* Aree degli itinerari: stessi colori e poligoni della webapp */
.mi-dove-funziona .mi-area {
    fill: var(--mi-c); fill-opacity: .6;
    stroke: #232323; stroke-opacity: .5; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke;
    opacity: 0; pointer-events: none; outline: none;
    transition: opacity .35s ease, fill-opacity .2s ease, stroke-opacity .2s ease, stroke-width .2s ease;
}
.mi-dove-funziona .mi-area.is-shown { opacity: 1; pointer-events: visiblePainted; cursor: pointer; }
.mi-dove-funziona .mi-areas.has-active .mi-area.is-shown { fill-opacity: .2; stroke-opacity: .2; }
.mi-dove-funziona .mi-areas.has-active .mi-area.is-active,
.mi-dove-funziona .mi-area.is-shown:focus-visible { fill-opacity: .9; stroke-opacity: 1; stroke-width: 2; }

/* Itinerari senza poligono: punto colorato */
.mi-dove-funziona .mi-spot { stroke: #fff; cursor: pointer; outline: none; transition: opacity .2s ease; }
.mi-dove-funziona .mi-spots.has-active .mi-spot { opacity: .35; }
.mi-dove-funziona .mi-spots.has-active .mi-spot.is-active,
.mi-dove-funziona .mi-spot:focus-visible { opacity: 1; stroke: var(--lp-blue-deep, #16294a); }

/* Nomi delle zone: spariscono durante lo zoom e nella vista zoomata */
.mi-dove-funziona .mi-labels text {
    fill: var(--lp-blue-deep, #16294a); font-size: 26px; font-weight: 500; letter-spacing: .01em;
    paint-order: stroke; stroke: var(--mi-bg); stroke-width: 6px; stroke-linejoin: round;
    pointer-events: none;
}
.mi-dove-funziona .mi-labels { transition: opacity .2s ease; }
.mi-dove-funziona.is-zooming .mi-labels,
.mi-dove-funziona.is-zoomed .mi-labels { opacity: 0; }

/* Responsive */
@media (max-width: 700px) {
    .mi-dove-funziona .mi-hint { top: 0; left: 0; padding: 6px 12px; font-size: .78rem; }
    .mi-dove-funziona .mi-back { top: auto; right: auto; bottom: 0; left: 0; padding: 6px 12px; font-size: .78rem; }
    .mi-dove-funziona .mi-labels text { font-size: 38px; stroke-width: 8px; }
    .mi-dove-funziona .mi-tip { font-size: .8rem; }
}

/* Movimento ridotto: niente animazioni */
@media (prefers-reduced-motion: reduce) {
    .mi-dove-funziona .mi-shape,
    .mi-dove-funziona .mi-canal,
    .mi-dove-funziona .mi-labels,
    .mi-dove-funziona .mi-area,
    .mi-dove-funziona .mi-spot,
    .mi-dove-funziona .mi-back { transition: none; }
}

/* ==========================================================================
   Climax: "Dove funziona" è il momento più spettacolare della pagina.
   Laguna notturna, isole luminose, entrata in scena per gradi, titolo magico,
   numero degli itinerari in evidenza, giro 3D dell'itinerario (assets/css/mi-esempio-3d.css).
   ========================================================================== */
.mi-dove-funziona {
    --mi-bg: #0c1a36;
    --mi-land: #3f78d4;
    --mi-land-hot: #6ea2f0;
    --mi-land-zoom: #2a4a7f;
    --mi-other: #213c69;
    position: relative; isolation: isolate; overflow: hidden;
    background:
        radial-gradient(900px 520px at 50% 58%, rgba(63, 120, 212, .28), transparent 70%),
        radial-gradient(600px 300px at 12% 0%, rgba(214, 160, 42, .14), transparent 70%),
        linear-gradient(180deg, #0a1631 0%, #0e1f40 55%, #0a1631 100%);
    color: #fff;
}
/* cielo stellato che brilla */
.mi-dove-funziona::before, .mi-dove-funziona::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 30%, #cfe0ff, transparent),
        radial-gradient(1.5px 1.5px at 37% 8%, #fff, transparent), radial-gradient(1px 1px at 52% 22%, #ffe7a3, transparent),
        radial-gradient(1.5px 1.5px at 68% 14%, #fff, transparent), radial-gradient(1px 1px at 81% 34%, #cfe0ff, transparent),
        radial-gradient(1.5px 1.5px at 93% 9%, #fff, transparent), radial-gradient(1px 1px at 14% 72%, #cfe0ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 88%, #fff, transparent), radial-gradient(1px 1px at 61% 92%, #ffe7a3, transparent),
        radial-gradient(1.5px 1.5px at 76% 80%, #fff, transparent), radial-gradient(1px 1px at 90% 62%, #cfe0ff, transparent);
    animation: mi-twinkle 5s ease-in-out infinite alternate;
}
.mi-dove-funziona::after { transform: translate(3%, 6%) scale(1.1); opacity: .6; animation-delay: -2.5s; }
@keyframes mi-twinkle { from { opacity: .35; } to { opacity: 1; } }

.mi-dove-funziona .lp-kicker { color: var(--lp-gold, #d6a02a); }
.mi-dove-funziona .mi-head h2 { position: relative; color: #fff; }
.mi-dove-funziona .mi-intro { color: rgba(255, 255, 255, .78); }
.mi-dove-funziona .mi-attrib { color: rgba(255, 255, 255, .6); }

/* isole luminose */
.mi-dove-funziona .mi-zone .mi-land { filter: drop-shadow(0 0 10px rgba(110, 162, 240, .55)); }
.mi-dove-funziona .mi-land { stroke: rgba(255, 255, 255, .55); }
.mi-dove-funziona.is-hover .mi-zone.is-hot .mi-land { filter: drop-shadow(0 0 18px rgba(255, 220, 140, .75)); }
.mi-dove-funziona .mi-labels text { fill: #fff; stroke: var(--mi-bg); }
.mi-dove-funziona.is-zoomed .mi-zone .mi-land, .mi-dove-funziona.is-zooming .mi-zone .mi-land, .mi-dove-funziona.is-zooming .mi-area { filter: none !important; }
.mi-dove-funziona.is-zoomed .mi-canal { stroke: rgba(255, 255, 255, .28); }
.mi-dove-funziona .mi-area { stroke: #fff; stroke-opacity: .55; }
.mi-dove-funziona .mi-area.is-shown { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .25)); }
.mi-dove-funziona .mi-areas.has-active .mi-area.is-active { filter: drop-shadow(0 0 12px var(--mi-c)); }

/* pillole sopra la mappa: vetro scuro */
.mi-dove-funziona .mi-hint, .mi-dove-funziona .mi-back {
    background: rgba(12, 26, 54, .72); color: #fff; border-color: rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mi-dove-funziona .mi-hint i { color: var(--lp-gold, #d6a02a); }
.mi-dove-funziona .mi-back { color: #fff; }
.mi-dove-funziona .mi-back:hover { background: rgba(12, 26, 54, .9); border-color: rgba(255, 255, 255, .5); }

/* numero degli itinerari accessibili: molto più evidente */
.mi-dove-funziona .mi-hint.is-count { gap: 12px; padding: 8px 18px 8px 8px; font-size: 1rem; font-weight: 600; }
.mi-dove-funziona .mi-hint-num {
    min-width: 46px; height: 46px; padding: 0 10px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #f3c35a, var(--lp-gold, #d6a02a)); color: #16294a;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.45rem;
    box-shadow: 0 0 0 4px rgba(214, 160, 42, .25), 0 8px 20px -6px rgba(214, 160, 42, .7);
}
.mi-dove-funziona .mi-hint.is-count .mi-hint-num { animation: mi-count-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mi-count-pop { from { transform: scale(.3) rotate(-20deg); } to { transform: none; } }

/* titolo magico: "where the magic happens" */
.mi-dove-funziona .mi-head h2 { transition: opacity .25s ease, filter .25s ease, transform .25s ease; }
.mi-dove-funziona .mi-head h2.is-vanish { opacity: 0; filter: blur(8px); transform: translateY(-8px) scale(.98); }
.mi-dove-funziona .mi-mw { display: inline-block; white-space: nowrap; }
.mi-dove-funziona .mi-mc {
    display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(14px) scale(.6) rotate(-8deg);
    animation: mi-letter .7s cubic-bezier(.2, .9, .3, 1.2) forwards; animation-delay: calc(var(--i) * 38ms);
}
@keyframes mi-letter { to { opacity: 1; filter: none; transform: none; } }
.mi-dove-funziona h2.is-magic .mi-mc { animation: mi-letter .7s cubic-bezier(.2, .9, .3, 1.2) forwards, mi-glow 1.6s ease-out forwards; animation-delay: calc(var(--i) * 38ms), calc(var(--i) * 38ms); }
@keyframes mi-glow {   /* breve bagliore dorato, poi resta testo normale */
    0% { color: #ffe6a6; text-shadow: 0 0 18px rgba(214, 160, 42, .9); }
    100% { color: #fff; text-shadow: none; }
}

/* climax: entrata in scena per gradi */
.mi-dove-funziona.is-pre .mi-head > *, .mi-dove-funziona.is-pre .mi-intro { opacity: 0; transform: translateY(18px); }
.mi-dove-funziona.is-pre .mi-zone, .mi-dove-funziona.is-pre .mi-context { opacity: 0; }
.mi-dove-funziona.is-entering .mi-head > * { animation: mi-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.mi-dove-funziona.is-entering .mi-head > :nth-child(2) { animation-delay: .15s; }
.mi-dove-funziona.is-entering .mi-context { animation: mi-fade 1s ease .3s both; }
.mi-dove-funziona.is-entering .mi-zone { animation: mi-island 1s cubic-bezier(.2, .8, .2, 1.15) both; transform-box: fill-box; transform-origin: 50% 50%; }
.mi-dove-funziona.is-entering .mi-zone[data-zone="venezia"] { animation-delay: .45s; }
.mi-dove-funziona.is-entering .mi-zone[data-zone="murano"] { animation-delay: .7s; }
.mi-dove-funziona.is-entering .mi-zone[data-zone="burano"] { animation-delay: .95s; }
.mi-dove-funziona.is-entering .mi-labels { animation: mi-fade .8s ease 1.3s both; }
.mi-dove-funziona.is-entering .mi-intro { animation: mi-rise .8s cubic-bezier(.2, .7, .2, 1) 1.4s both; }
@keyframes mi-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mi-island { 0% { opacity: 0; transform: scale(.6); filter: brightness(2.2); } 60% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }

/* passaggio alla mappa 3D del giro */
.mi-dove-funziona .mi-map, .mi-dove-funziona .mi-intro { transition: opacity .35s ease, transform .35s ease; }
.mi-dove-funziona.is-ex-leaving .mi-map, .mi-dove-funziona.is-ex-leaving .mi-intro { opacity: 0; transform: scale(.97); }
.mi-dove-funziona.is-ex-back .mi-map, .mi-dove-funziona.is-ex-back .mi-intro { animation: mi-fade .45s ease both; }
.mi-dove-funziona .mi-map[hidden], .mi-dove-funziona .mi-intro[hidden] { display: none; }
.mi-dove-funziona .mi-ex { margin-top: 8px; text-align: left; }
/* giro: la mappa 3D si apre sopra la mappa 2D (zoom continuo, la 2D non sparisce prima) */
.mi-dove-funziona .lp-wrap { position: relative; }
.mi-dove-funziona .mi-ex.is-overlay { position: absolute; z-index: 5; margin: 0; transform: none; transition: opacity .7s ease; }
.mi-dove-funziona .mi-ex.is-overlay .mi-ex-view {
    border-radius: 0;
    /* a tutta larghezza, nessun riquadro: sfumature lunghe e uguali ai due lati, e verso il basso fino alla fine della sezione
       (la parte nitida al centro è la stessa che il codice usa per tenere in vista la carrozzina: safeX in mi-punti-esempio.js) */
    --mi-fx: 25%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mi-fx), #000 calc(100% - var(--mi-fx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 var(--mi-fx), #000 calc(100% - var(--mi-fx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 58%, transparent 100%);
    mask-composite: intersect;
}
@media (max-width: 899px) { .mi-dove-funziona .mi-ex.is-overlay .mi-ex-view { --mi-fx: 15%; } }
.mi-dove-funziona .mi-ex.is-overlay .mi-ex-top { left: max(16px, calc((100% - 1100px) / 2)); right: max(16px, calc((100% - 1100px) / 2)); top: 18px; }
.mi-dove-funziona .mi-ex.is-overlay .mi-ex-foot { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; }
/* durante il giro il testo sotto la mappa lascia spazio alla mappa 3D */
.mi-dove-funziona .mi-intro { transition: opacity .4s ease; }
.mi-dove-funziona.is-tour .mi-intro { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .mi-dove-funziona::before, .mi-dove-funziona::after, .mi-dove-funziona .mi-mc,
    .mi-dove-funziona.is-entering .mi-head > *, .mi-dove-funziona.is-entering .mi-zone, .mi-dove-funziona.is-entering .mi-intro { animation: none; }
}