/*
 * Mappa animata del Distretto (template-parts/site/mappa-distretto.php) e mappine dei Comuni (duc_mappina()).
 * Animazioni come nel design: i Comuni entrano, il bordo di Bergamo si disegna, le etichette spuntano,
 * poi Bergamo esce e la mappa si avvicina al Distretto. Con movimento ridotto: subito lo stato finale.
 */
@layer sections {
  .mappa { width: 100%; }
  .mappa svg { display: block; width: 100%; height: auto; overflow: visible; }

  .md-comune {
    transform-box: fill-box; transform-origin: center;
    animation: md-entra .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--d);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s, stroke .2s;
  }
  .md-link { cursor: pointer; outline: none; }
  .md-link:hover .md-comune, .md-link:focus-visible .md-comune { transform: translateY(-6px); filter: brightness(1.12) saturate(1.1); }
  .md-link:focus-visible .md-comune { stroke: var(--color-accent); stroke-width: 8; }
  .md-traccia { stroke-dasharray: 1; stroke-dashoffset: 1; animation: md-disegna 2.2s .6s ease-in-out forwards; pointer-events: none; }
  .md-etichetta {
    transform-box: fill-box; transform-origin: 50% 100%; pointer-events: none;
    animation: md-spunta .6s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: var(--d);
    & text { font-family: var(--font-body); }
  }
  .md-onda { transform-box: fill-box; transform-origin: center; animation: md-onda 2.8s ease-out infinite; animation-delay: calc(2s + var(--p)); }
  #md-etichetta-bergamo .md-onda { animation-duration: 2s; }
  .md-esce { transform-box: fill-box; transform-origin: center; animation: md-esce .9s 3.4s cubic-bezier(.4, 0, .2, 1) forwards; }
  .md-zoom { animation: md-zoom 1.4s 3.8s cubic-bezier(.65, 0, .25, 1) forwards; }

  @keyframes md-entra { from { opacity: 0; transform: translateY(24px) scale(.96); } }
  @keyframes md-disegna { to { stroke-dashoffset: 0; } }
  @keyframes md-spunta { from { opacity: 0; transform: translateY(10px) scale(.85); } }
  @keyframes md-onda { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
  @keyframes md-esce { to { opacity: 0; transform: scale(.94) translate(20px, -20px); visibility: hidden; } }
  @keyframes md-zoom { to { transform: translate(500px, 515px) scale(1.45) translate(-270.8px, -687.4px); } }

  @media (prefers-reduced-motion: reduce) {
    .md-esce { animation: none; display: none; }
    .md-zoom { animation: none; transform: translate(500px, 515px) scale(1.45) translate(-270.8px, -687.4px); }
    .md-comune, .md-etichetta, .md-onda { animation: none; }
    .md-traccia { animation: none; stroke-dashoffset: 0; }
  }

  /* Mappina di un Comune (card della Home, filtri di Attività, carosello di Il Distretto) */
  .mappina { display: block; overflow: visible; }
  .mappina__lift { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .mappina__other { transition: opacity .35s; }
  .mappina__trace { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-in-out; }
}