/**
 * ControlAuto — mappa della copertura, layer di movimento
 *
 * Va caricato DOPO styles.css. Riguarda solo la sezione mappa:
 * contorno dell'Italia tracciato prima del riempimento, archi animati fra
 * le tre sedi, atterraggio sfalsato dei pin. Nient'altro del sito è toccato.
 */

/* Il gruppo della sagoma ha scale(0.1): gli stroke vanno moltiplicati per dieci */
.italy-outline path {
    fill: none;
    stroke: #8a6d05;
    stroke-width: 26;
    stroke-linejoin: round;
    opacity: 0.85;
}

.italy-shape {
    transition: opacity 600ms linear;
}

/* Archi che collegano le tre sedi.
   La scheda mappa ha fondo #2e4751: lo stroke va tenuto chiaro, altrimenti
   l'arco sparisce nel colore della scheda. */
.map-arc {
    fill: none;
    stroke: #f7e6a8;
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0.45;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    transition: stroke-dashoffset 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.map-arc.is-drawn {
    stroke-dashoffset: 0;
}

/* Il puntino che viaggia: un trattino corto che scorre lungo l'arco */
.map-arc-run {
    fill: none;
    stroke: var(--brand-accent, #f4c70e);
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0;
    stroke-dasharray: 10 var(--len);
}

.map-arc-run.is-live {
    opacity: 1;
    animation: arcRun 3.4s linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes arcRun {
    from { stroke-dashoffset: var(--len); }
    to   { stroke-dashoffset: 0; }
}

/* Atterraggio dei pin, sfalsato */
.map-pin {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.map-pin.is-landing {
    animation: pinLand 700ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
    animation-delay: calc(var(--i) * 140ms + 900ms);
}

@keyframes pinLand {
    0%   { transform: translateY(-38px) scale(0.4); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .map-arc { stroke-dashoffset: 0; }
    .map-arc-run.is-live { animation: none; opacity: 0; }
    .map-pin.is-landing { animation: none; }
}

/* --------------------------------------------------------------------
   Telecamera: la mappa si avvicina alla sede attiva e ci resta finché
   non tocca alla successiva. Il viewport ha il riquadro esatto dell'SVG,
   così l'overlay delle etichette combacia con i pin.
   -------------------------------------------------------------------- */
.map-viewport {
    position: relative;
    width: 100%;
    /* Più larga di prima perché il viewBox ora ha il margine di manovra
       della telecamera: la sagoma resta della stessa dimensione a video */
    max-width: 440px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius, 14px);
}

/* Dentro al viewport l'SVG occupa tutta la larghezza disponibile */
.map-viewport .italy-map { max-width: none; }

.map-overlay {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

/* I bottoni restano cliccabili anche se l'overlay non intercetta il mouse */
.map-overlay .map-hotspot { pointer-events: auto; }

.map-camera,
.map-overlay {
    transition: transform 1500ms cubic-bezier(0.2, 0.9, 0.12, 1);
}

/* Contrasto allo zoom: l'etichetta resta della stessa dimensione */
.map-overlay .map-hotspot {
    transform: translate(-50%, -50%) scale(calc(1 / var(--map-scale, 1)));
    transition: transform 620ms cubic-bezier(0.2, 0.9, 0.12, 1);
}

.map-hotspot.is-active .map-hotspot-label {
    animation: mapFloat 3400ms ease-in-out infinite;
}

@keyframes mapFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Trama di puntini e alone: compaiono con la sagoma */
.map-dots,
.map-glow {
    opacity: 0;
    transition: opacity 1200ms linear;
}
.map-dots { opacity: 0; }
/* Appena accennata: fa da texture, non da griglia */
[data-map].is-revealed .map-dots { opacity: 0.13; }
[data-map].is-revealed .map-glow {
    opacity: 1;
    animation: mapDrift 16s ease-in-out infinite;
    transform-origin: 682px 740px;
}

@keyframes mapDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(26px, -22px) scale(1.06); }
}

/* Fascia Nord / Centro / Sud */
.map-band {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateY(700px) scaleY(0);
    transition: transform 620ms cubic-bezier(0.2, 0.9, 0.12, 1),
                opacity 620ms cubic-bezier(0.2, 0.9, 0.12, 1);
    pointer-events: none;
}

/* Numero di regioni: appare quando l'area è attiva */
.coverage-area { position: relative; }
.coverage-area-count {
    position: absolute;
    right: 0;
    top: 0.15rem;
    font-family: var(--font-headings);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-accent-dark, #8a6d05);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 420ms cubic-bezier(0.2, 0.9, 0.12, 1),
                transform 420ms cubic-bezier(0.2, 0.9, 0.12, 1);
}
.coverage-area.is-hovered .coverage-area-count {
    opacity: 1;
    transform: translateX(0);
}
.coverage-area.is-hovered { transform: translateX(4px); }
.coverage-area { transition: transform 420ms cubic-bezier(0.2, 0.9, 0.12, 1); }

@media (prefers-reduced-motion: reduce) {
    .map-camera, .map-overlay, .map-band { transition: none; }
    .map-hotspot.is-active .map-hotspot-label { animation: none; }
    [data-map].is-revealed .map-glow { animation: none; }
}

/* --------------------------------------------------------------------
   Il Percorso
   La tela è disegnata a 1240px e main.js la riduce con scale() per farla
   stare nello spazio disponibile. Con l'origine predefinita al centro la
   tela resta centrata sul suo riquadro non scalato e sborda a destra di
   metà della differenza, tagliando l'ultima scheda. Ancorandola in alto a
   sinistra combacia con il bordo del contenitore.
   -------------------------------------------------------------------- */
.percorso-canvas {
    transform-origin: 0 0;
}