/**
 * La pagina /ecosistemi/ · v0.54.0 · 21/10/2026
 *
 * Qui c'è solo LA MAPPA (template-parts/site/mappa.php): il resto della pagina usa i
 * pezzi di servizi.css (flusso, inclusi, domande) e di demo.css (le scene).
 * Da computer (>= 1200px) la tavola ha le proporzioni del suo disegno (1200×640): il
 * cerchio carbone al centro, le fermate in percentuale, i fili nell'SVG sotto. Sotto i
 * 1200px la stessa lista diventa una linea verticale: il centro in cima come una card
 * carbone, le fermate sotto, ognuna col suo tratto di linea.
 *
 * Il movimento parte solo con motion.js (.as-mappa--viva, poi .is-viva entrando): senza
 * JS la mappa è intera e ferma. Il giro dei dati dura 9 s da computer (i --t e --p in
 * linea sono i secondi del giro, mappa.php) e 3,6 s da telefono (un impulso scende la
 * linea, 0,3 s per fermata). Arancio solo pieno: gli impulsi e i punti che si accendono
 * (materia sul bianco, brace nel carbone), mai sfumato.
 */

.as-mappa { --avvio: 1.7s; position: relative; }
.as-mappa__testa { display: grid; gap: var(--as-sp-5); margin-bottom: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) {
	.as-mappa__testa { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: var(--as-sp-8); }
}
.as-mappa__titolo { margin: 0; max-width: 16ch; }
.as-mappa__sotto { margin: 0; max-width: 40ch; color: var(--as-muted); }

.as-mappa__tavola { position: relative; }
.as-mappa__pezzi { list-style: none; margin: 0; padding: 0; }
.as-mappa__nome { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--as-ink); }
.as-mappa__riga { margin: var(--as-sp-1) 0 0; font-size: 14px; line-height: 1.35; color: var(--as-grigio-testo); }
.as-mappa__fili { display: none; }
.as-mappa__centro { position: relative; z-index: 2; }
.as-mappa__centro-in { position: relative; background: var(--as-carbone); color: var(--as-bianco); }
.as-mappa__centro-nome { margin: 0; font-size: clamp(17px, 1.45vw, 21px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.as-mappa__centro-riga { margin: var(--as-sp-1) 0 0; font-size: 14px; line-height: 1.35; color: var(--as-grigio-testo-inv); }
.as-mappa__brace { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--as-arancio); }
.as-mappa__onda { display: none; }
.as-mappa__punto { position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--as-bianco); box-shadow: inset 0 0 0 2px var(--as-carbone); }
/* Il punto che si accende: un disco arancio PIENO che compare e si stringe (niente sfumature verso il
   bianco: l'arancio annacquato è vietato, DS §2 legge 7). */
.as-mappa__punto::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--as-arancio); transform: scale(0); }

/* ── Da computer: la tavola ────────────────────────────────────────────── */
@media (min-width: 1200px) {
	.as-mappa__tavola { aspect-ratio: 1200 / 640; max-width: 1248px; margin-inline: auto; }
	.as-mappa__fili { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
	.as-mappa__anello { fill: none; stroke: var(--as-filo); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1.5 9; }
	.as-mappa__base path { fill: none; stroke: var(--as-filo); stroke-width: 2; stroke-linecap: round; transition: stroke var(--as-t-micro) var(--as-ease-micro); }
	.as-mappa__impulsi path { fill: none; stroke: var(--as-arancio); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .16 2; stroke-dashoffset: .16; opacity: 0; }

	.as-mappa__centro { position: absolute; left: 50%; top: 50%; width: 16.5%; aspect-ratio: 1; transform: translate(-50%, -50%); }
	.as-mappa__centro-in { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--as-sp-4); border-radius: 50%; text-align: center; }
	.as-mappa__brace { margin-bottom: var(--as-sp-3); }
	.as-mappa__onda { display: block; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--as-filo); opacity: 0; pointer-events: none; }

	.as-mappa__pezzo { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 0; height: 0; }
	.as-mappa__punto { position: absolute; left: -8px; top: -8px; }
	.as-mappa__testo { position: absolute; width: max-content; max-width: 200px; }
	.as-mappa__pezzo.is-dx .as-mappa__testo { left: 22px; top: 0; transform: translateY(-50%); }
	.as-mappa__pezzo.is-sx .as-mappa__testo { right: 22px; top: 0; transform: translateY(-50%); text-align: right; }
	.as-mappa__pezzo.is-su .as-mappa__testo { left: 0; bottom: 22px; transform: translateX(-50%); text-align: center; }
	.as-mappa__pezzo.is-giu .as-mappa__testo { left: 0; top: 22px; transform: translateX(-50%); text-align: center; }

	/* Col mouse sopra una fermata, il suo filo si scurisce: si vede da dove passa. */
	@media (hover: hover) {
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(1):hover) .as-mappa__base path:nth-child(1),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(2):hover) .as-mappa__base path:nth-child(2),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(3):hover) .as-mappa__base path:nth-child(3),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(4):hover) .as-mappa__base path:nth-child(4),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(5):hover) .as-mappa__base path:nth-child(5),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(6):hover) .as-mappa__base path:nth-child(6),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(7):hover) .as-mappa__base path:nth-child(7),
		.as-mappa__tavola:has(.as-mappa__pezzo:nth-child(8):hover) .as-mappa__base path:nth-child(8) { stroke: var(--as-carbone); }
	}

	/* L'entrata: il centro sale, i fili si disegnano dal centro, le fermate compaiono. */
	.as-mappa--viva .as-mappa__centro-in { transition: transform var(--as-t-reveal) var(--as-ease-out), opacity var(--as-t-azione) var(--as-ease-out); }
	.as-mappa--viva .as-mappa__base path { stroke-dasharray: 1 1; transition: stroke-dashoffset .9s var(--as-ease-io) calc(.15s + var(--i) * .06s), stroke var(--as-t-micro) var(--as-ease-micro); }
	.as-mappa--viva .as-mappa__anello { transition: opacity 1.2s var(--as-ease-out) .3s; }
	.as-mappa--viva .as-mappa__punto { transition: transform .5s var(--as-ease-stato) calc(.6s + var(--i) * .07s); }
	.as-mappa--viva .as-mappa__testo { transition: opacity var(--as-t-azione) var(--as-ease-out) calc(.66s + var(--i) * .07s); }
	.as-mappa--viva:not(.is-viva) .as-mappa__centro-in { opacity: 0; transform: scale(.86); }
	.as-mappa--viva:not(.is-viva) .as-mappa__base path { stroke-dashoffset: 1; }
	.as-mappa--viva:not(.is-viva) .as-mappa__anello { opacity: 0; }
	.as-mappa--viva:not(.is-viva) .as-mappa__punto { transform: scale(0); }
	.as-mappa--viva:not(.is-viva) .as-mappa__testo { opacity: 0; }

	/* Il giro dei dati: quattro storie, un impulso per filo (dentro = dalla fermata al centro). */
	.as-mappa.is-viva .as-mappa__impulsi path { animation: as-mappa-fuori 9s linear infinite; animation-delay: calc(var(--avvio) + var(--t) * 1s); }
	.as-mappa.is-viva .as-mappa__impulsi path.is-dentro { animation-name: as-mappa-dentro; }
	.as-mappa.is-viva .as-mappa__punto::after { animation: as-mappa-punto 9s var(--as-ease-in) infinite; animation-delay: calc(var(--avvio) + var(--p) * 1s); }
	/* Ogni dato che arriva al centro: la brace si accende e parte un'onda (ogni 2,25 s, dal primo arrivo). */
	.as-mappa.is-viva .as-mappa__brace { animation: as-mappa-brace 2.25s var(--as-ease-out) infinite; animation-delay: calc(var(--avvio) + .9s); }
	.as-mappa.is-viva .as-mappa__onda { animation: as-mappa-onda 2.25s var(--as-ease-out) infinite; animation-delay: calc(var(--avvio) + .9s); }
	.as-mappa.is-viva .as-mappa__onda.is-seconda { animation-delay: calc(var(--avvio) + 1.15s); }
}

@keyframes as-mappa-fuori {
	0% { stroke-dashoffset: .16; opacity: 1; }
	10% { stroke-dashoffset: -1; opacity: 1; }
	10.01%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes as-mappa-dentro {
	0% { stroke-dashoffset: -1; opacity: 1; }
	10% { stroke-dashoffset: .16; opacity: 1; }
	10.01%, 100% { stroke-dashoffset: .16; opacity: 0; }
}
@keyframes as-mappa-punto {
	0%, 3% { transform: scale(1.15); }
	10%, 100% { transform: scale(0); }
}
@keyframes as-mappa-brace {
	0% { transform: scale(1.7); }
	30%, 100% { transform: scale(1); }
}
@keyframes as-mappa-onda {
	0% { opacity: 1; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.75); }
}

/* ── Sotto i 1200px: la linea verticale ─────────────────────────────────── */
@media (max-width: 1199px) {
	.as-mappa { --avvio: 1.2s; }
	.as-mappa__tavola { max-width: 640px; }
	.as-mappa__centro-in { padding: var(--as-sp-5) var(--as-sp-5) var(--as-sp-5) 56px; border-radius: var(--as-r-card-lg); }
	.as-mappa__brace { position: absolute; left: 23px; top: 50%; margin-top: -5px; }
	.as-mappa__pezzi { padding-top: var(--as-sp-3); }
	.as-mappa__pezzo { position: relative; padding: 14px 0 14px 56px; }
	/* Il tratto di linea di ogni fermata (il primo si attacca al centro, l'ultimo finisce sul punto). */
	.as-mappa__pezzo::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--as-filo); transform-origin: 50% 0; }
	.as-mappa__pezzo:first-child::before { top: calc(-1 * var(--as-sp-3)); }
	.as-mappa__pezzo:last-child::before { bottom: auto; height: 28px; }
	.as-mappa__punto { position: absolute; left: 20px; top: 20px; z-index: 1; }

	.as-mappa--viva .as-mappa__centro-in { transition: transform var(--as-t-reveal) var(--as-ease-out), opacity var(--as-t-azione) var(--as-ease-out); }
	.as-mappa--viva .as-mappa__pezzo { transition: opacity var(--as-t-azione) var(--as-ease-out) calc(.3s + var(--i) * .08s), transform var(--as-t-reveal) var(--as-ease-out) calc(.3s + var(--i) * .08s); }
	.as-mappa--viva .as-mappa__pezzo::before { transition: transform .5s var(--as-ease-io) calc(.25s + var(--i) * .08s); }
	.as-mappa--viva:not(.is-viva) .as-mappa__centro-in { opacity: 0; transform: translateY(16px); }
	.as-mappa--viva:not(.is-viva) .as-mappa__pezzo { opacity: 0; transform: translateY(12px); }
	.as-mappa--viva:not(.is-viva) .as-mappa__pezzo::before { transform: scaleY(0); }

	/* L'impulso scende la linea un tratto alla volta (0,3 s ciascuno) e accende i punti. */
	.as-mappa__pezzo::after { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--as-arancio), var(--as-arancio)) no-repeat 0 -24px / 2px 24px; pointer-events: none; }
	.as-mappa__pezzo:first-child::after { top: calc(-1 * var(--as-sp-3)); }
	.as-mappa__pezzo:last-child::after { bottom: auto; height: 28px; }
	.as-mappa.is-viva .as-mappa__pezzo::after { animation: as-mappa-scende 3.6s linear infinite; animation-delay: calc(var(--avvio) + var(--i) * .3s); }
	.as-mappa.is-viva .as-mappa__punto::after { animation: as-mappa-punto-m 3.6s var(--as-ease-in) infinite; animation-delay: calc(var(--avvio) + var(--i) * .3s + .1s); }
	.as-mappa.is-viva .as-mappa__brace { animation: as-mappa-brace 3.6s var(--as-ease-out) infinite; animation-delay: calc(var(--avvio) - .15s); }
}
/* Tra 1000 e 1199px (tablet orizzontale, portatili piccoli) la linea sta accanto al titolo, come il test
   delle scene: da sola sotto il titolo lasciava mezzo schermo vuoto. */
@media (min-width: 1000px) and (max-width: 1199px) {
	.as-mappa > .as-container { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--as-sp-8); align-items: start; }
	.as-mappa__testa { grid-template-columns: none; align-items: start; margin-bottom: 0; }
	.as-mappa__tavola { max-width: none; }
}
@keyframes as-mappa-scende {
	0% { background-position: 0 -24px; }
	8.33% { background-position: 0 calc(100% + 24px); }
	8.34%, 100% { background-position: 0 calc(100% + 24px); }
}
@keyframes as-mappa-punto-m {
	0%, 8% { transform: scale(1.15); }
	24%, 100% { transform: scale(0); }
}

/* Fuori dallo schermo il giro si ferma (motion.js mette .is-ferma): niente lavoro a vuoto. */
.as-mappa.is-ferma .as-mappa__tavola *,
.as-mappa.is-ferma .as-mappa__punto::after,
.as-mappa.is-ferma .as-mappa__pezzo::after { animation-play-state: paused; }