/* ==========================================================================
   moveIn – mappe 3D della landing (assets/js/mi-punti-esempio.js):
   "Vedi un esempio" (Punti di interesse) e giro degli itinerari (Dove funziona).
   Tutte le regole partono dalle due sezioni.
   ========================================================================== */
:is(.mi-punti-interesse, .mi-dove-funziona) { --mi-ok: #009E73; --mi-lim: #4D9ECA; --mi-no: #D55E00; --mi-ease: cubic-bezier(.22, .7, .2, 1); }

:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex { position: relative; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .6s var(--mi-ease); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex[hidden] { display: none; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex.is-in { opacity: 1; transform: none; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-view {
    position: relative; height: clamp(440px, 66vh, 640px); overflow: hidden; border-radius: 28px;
    /* bordi sfumati nel blu della sezione: niente riquadro */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 11%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 11%, #000 86%, transparent 100%);
    mask-composite: intersect;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-map, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-layer { position: absolute; inset: 0; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-map canvas { display: block; width: 100% !important; height: 100% !important; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-layer { pointer-events: none; overflow: hidden; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex.is-loading .mi-ex-view::after {
    content: attr(data-loading); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8); font-size: .95rem;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex.is-loading .mi-ex-view { background: radial-gradient(ellipse at center, rgba(159, 211, 234, .18), transparent 70%); }

/* comandi in sovrimpressione */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-top {
    position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3; pointer-events: none;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-back, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-chip { pointer-events: auto; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-back {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
    background: #fff; color: var(--lp-blue-deep, #16294a); font: inherit; font-size: .9rem; font-weight: 500;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-back:hover { background: #f3f6fb; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-back:focus-visible, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-replay:focus-visible { outline: 3px solid var(--lp-gold, #d6a02a); outline-offset: 2px; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-chip {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--lp-ink, #16213a); font-size: .88rem;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-chip strong { font-weight: 500; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* pin che cade (stesso pin dello slider, più piccolo) */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-bubble, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin.is-hidden, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-bubble.is-hidden, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-tag.is-hidden { visibility: hidden; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin-drop { position: absolute; left: -29px; bottom: 0; width: 58px; height: 74px; opacity: 0; transition: opacity .5s ease; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin .mi-pin { width: 58px; height: 74px; margin: 0; filter: drop-shadow(3px 6px 6px rgba(0, 0, 0, .3)); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin .mi-pin-glyph { font-size: 21px; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin.is-dropped .mi-ex-pin-drop { opacity: 1; animation: mi-ex-drop .9s cubic-bezier(.3, .7, .3, 1) both; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin.is-faded .mi-ex-pin-drop { opacity: 0; }
@keyframes mi-ex-drop {
    0% { transform: translateY(-340px); opacity: 0; }
    15% { opacity: 1; }
    62% { transform: translateY(0) scale(1.06, .9); }
    76% { transform: translateY(-16px) scale(.98, 1.03); }
    100% { transform: none; opacity: 1; }
}

/* fumetto sopra la carrozzina: ✓ verde, ? blu, ! arancione */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-b {
    position: absolute; left: -23px; top: -50px; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem;
    border: 3px solid #fff; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55);
    transform: scale(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-b::after {   /* codina del fumetto */
    content: ""; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
    background: inherit; border-right: 3px solid #fff; border-bottom: 3px solid #fff; z-index: -1;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-bubble.is-ok .mi-ex-b { background: var(--mi-ok); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-bubble.is-lim .mi-ex-b { background: var(--mi-lim); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-bubble.is-no .mi-ex-b { background: var(--mi-no); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-bubble.is-on .mi-ex-b { transform: scale(1); }

/* etichetta sull'elemento (rampa, gradino, ponte) */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-t {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) scale(.85); opacity: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--lp-ink, #16213a); font-size: .82rem; font-weight: 500;
    border-left: 4px solid var(--mi-tag-color, var(--mi-ok)); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5);
    transition: opacity .35s ease .15s, transform .45s cubic-bezier(.3, 1.4, .5, 1) .15s;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-t i { color: var(--mi-tag-color, var(--mi-ok)); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-tag.is-on .mi-ex-t { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* scheda con l'esito */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card {
    position: absolute; left: 50%; bottom: 26px; z-index: 3; width: min(560px, calc(100% - 32px));
    display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 12px; border-radius: 20px;
    background: #fff; color: var(--lp-ink, #16213a); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65);
    opacity: 0; transform: translate(-50%, 14px); transition: opacity .4s ease, transform .5s var(--mi-ease);
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card[hidden] { display: none; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card.is-in { opacity: 1; transform: translate(-50%, 0); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card-ic {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    color: #fff; font-size: 1.1rem;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card-txt { flex: 1; min-width: 0; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card-txt strong { display: block; font-weight: 500; font-size: 1.02rem; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card-txt p { margin: 2px 0 0; font-size: .9rem; color: var(--lp-muted, #55607a); line-height: 1.4; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-replay {
    flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--lp-line, #e3e8f2); border-radius: 999px;
    background: #fff; color: var(--lp-blue-deep, #16294a); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-replay:hover { background: #f3f6fb; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex.is-error .mi-ex-replay { display: none; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-foot { margin: 10px 0 0; text-align: center; font-size: .8rem; color: rgba(255, 255, 255, .62); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-foot a { color: inherit; }

@media (max-width: 700px) {
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-view { height: 460px; border-radius: 20px; }
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-top { top: 10px; left: 10px; right: 10px; }
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-chip { font-size: .8rem; padding: 6px 12px; }
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card { bottom: 18px; gap: 10px; padding: 10px; flex-wrap: wrap; }
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card-txt p { font-size: .84rem; }
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-replay { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-card, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-b, :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-t { transition: none; animation: none; }
    :is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin.is-landed .mi-ex-pin-drop { animation: none; }
}

/* pin della webapp sulla mappa e pallino blu delle fermate */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pinsvg { display: block; width: 58px; height: 75px; overflow: visible; filter: drop-shadow(3px 6px 6px rgba(0, 0, 0, .3)); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-dotpin, .mi-flyer .mi-ex-dotpin {
    display: block; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; border: 3px solid #fff;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .45), transparent 42%), var(--mi-dot, #0072B2);
    box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .45);
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin .mi-ex-pin-drop { left: -29px; width: 58px; height: 75px; display: flex; align-items: flex-end; justify-content: center; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin.is-landed .mi-ex-pin-drop { opacity: 1; animation: mi-ex-settle .5s cubic-bezier(.3, 1.6, .5, 1); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-pin.is-landed.is-faded .mi-ex-pin-drop { opacity: 0; transition: opacity .4s ease; }
@keyframes mi-ex-settle { from { transform: scale(1.25, .8); } to { transform: none; } }

/* il pin lanciato dallo slider alla mappa (fuori dalle sezioni: è sopra la pagina) */
.mi-flyer { position: fixed; z-index: 60; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; will-change: transform; }
.mi-flyer .mi-ex-pinsvg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(6px 14px 12px rgba(0, 0, 0, .35)); }
.mi-flyer.is-dot { align-items: center; }
.mi-flyer.is-dot .mi-ex-dotpin { width: 76%; height: auto; aspect-ratio: 1; border-width: 5px; }

/* la mappa si apre "per magia": scintille dal punto d'atterraggio */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-spark {
    position: absolute; z-index: 4; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff 0, #ffe7a3 40%, rgba(214, 160, 42, 0) 72%);
    animation: mi-spark 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-spark:nth-child(3n) { background: radial-gradient(circle, #fff 0, #bcd2ff 40%, rgba(74, 100, 212, 0) 72%); }
@keyframes mi-spark {
    0% { transform: translate(0, 0) scale(.4); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; }
}

/* giro dell'itinerario: alone colorato che pulsa sotto la carrozzina */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-halo { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-halo.is-hidden { visibility: hidden; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-halo span {
    position: absolute; left: -26px; top: -15px; width: 52px; height: 30px; border-radius: 50%;
    border: 3px solid var(--mi-halo, #3B51C0); background: rgba(255, 255, 255, .25);
    box-shadow: 0 0 18px var(--mi-halo, #3B51C0); animation: mi-halo 1.4s ease-in-out infinite;
}
@keyframes mi-halo { 0%, 100% { transform: scale(.85); opacity: .95; } 50% { transform: scale(1.15); opacity: .6; } }


/* giro: tappe reali dell'itinerario */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop.is-hidden { visibility: hidden; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop-n {
    position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--c, #3B51C0); color: #fff; border: 2px solid #fff; font: 600 .75rem/1 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .45); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop.is-done .mi-ex-stop-n { opacity: .55; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop.is-active { z-index: 3; }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop.is-active .mi-ex-stop-n { transform: scale(1.3); opacity: 1; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 6px 14px -4px rgba(0, 0, 0, .5); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop-l {
    position: absolute; left: 0; bottom: 20px; transform: translateX(-50%) translateY(6px); opacity: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--lp-ink, #16213a); font-size: .82rem; font-weight: 500;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); transition: opacity .3s ease, transform .35s ease;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop-l i { color: var(--lp-blue, #3a68ad); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-stop.is-active .mi-ex-stop-l { opacity: 1; transform: translateX(-50%); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-jump .mi-ex-t { border-left-color: var(--lp-gold, #d6a02a); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-jump .mi-ex-t i { color: var(--lp-gold, #d6a02a); }

/* giro dell'itinerario: cuori e stelline di gioia */
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-joy {
    position: absolute; z-index: 3; margin-left: -10px; font-size: 20px; color: #ff5a8a; pointer-events: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25); animation: mi-joy 1.6s ease-out forwards; opacity: 0;
}
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-joy:nth-child(3n) { color: var(--lp-gold, #d6a02a); }
:is(.mi-punti-interesse, .mi-dove-funziona) .mi-ex-joy:nth-child(4n) { color: #4D9ECA; }
@keyframes mi-joy {
    0% { transform: translate(0, 0) scale(.3); opacity: 0; }
    20% { opacity: 1; transform: translate(calc(var(--dx) * .3), -20px) scale(1.15); }
    100% { transform: translate(var(--dx), -90px) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mi-spark, .mi-ex-joy { display: none; } }