html body .area-page .ecosystem-diagram{padding:0;position:relative;display:block;min-height:0;aspect-ratio:4/3;background:#fff}
.ecosystem-diagram svg{display:block;width:100%;height:100%}
.ecosystem-energy{color:#00baff;animation:ecosystem-color 10s steps(1,end) infinite}
.ecosystem-core{fill:currentColor;fill-opacity:.18;stroke:currentColor;stroke-width:7;filter:drop-shadow(0 0 12px currentColor)}
.ecosystem-track{fill:none;stroke:currentColor;stroke-width:14;stroke-linejoin:round;opacity:.55}
.ecosystem-flow{fill:none;stroke:currentColor;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36 85;animation:ecosystem-flow 1.3s linear infinite;filter:drop-shadow(0 0 5px currentColor)}
.ecosystem-legend{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:22px;font:700 12px/1.3 'Segoe UI',sans-serif;letter-spacing:.06em}
.ecosystem-gas{color:#0079a8;animation:ecosystem-gas 10s steps(1,end) infinite}
.ecosystem-electric{color:#8a6500;animation:ecosystem-electric 10s steps(1,end) infinite}
@keyframes ecosystem-color{0%,100%{color:#00baff}50%{color:#ffd027}}
@keyframes ecosystem-flow{to{stroke-dashoffset:-121}}
@keyframes ecosystem-gas{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ecosystem-electric{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ecosystem-energy,.ecosystem-flow,.ecosystem-gas,.ecosystem-electric{animation:none}.ecosystem-electric{opacity:.4}}

.ecosystem-track{stroke:#314653;opacity:.8;stroke-width:14}.ecosystem-flow{stroke-width:9;stroke-dasharray:42 90}.ecosystem-arrow{filter:drop-shadow(0 0 5px currentColor)}@keyframes ecosystem-flow{to{stroke-dashoffset:-132}}@media(prefers-reduced-motion:reduce){.ecosystem-arrow{display:none}}

/* Pulsazione sincronizzata: il colore continua a cambiare ogni cinque secondi. */
.ecosystem-core{animation:ecosystem-core-glow 2.5s ease-in-out infinite}
.ecosystem-flow{animation:ecosystem-flow 1.3s linear infinite,ecosystem-stream-glow 2.5s ease-in-out infinite}
.ecosystem-arrow{animation:ecosystem-stream-glow 2.5s ease-in-out infinite}
@keyframes ecosystem-core-glow{0%,100%{fill-opacity:.12;stroke-opacity:.65;filter:drop-shadow(0 0 4px currentColor)}50%{fill-opacity:.34;stroke-opacity:1;filter:drop-shadow(0 0 18px currentColor) drop-shadow(0 0 30px currentColor)}}
@keyframes ecosystem-stream-glow{0%,100%{opacity:.65;filter:drop-shadow(0 0 2px currentColor)}50%{opacity:1;filter:drop-shadow(0 0 9px currentColor) drop-shadow(0 0 15px currentColor)}}
@media(prefers-reduced-motion:reduce){.ecosystem-core,.ecosystem-flow,.ecosystem-arrow{animation:none}}

.ecosystem-energy{animation:ecosystem-color 10s linear infinite}
.ecosystem-gas{animation:ecosystem-gas 10s linear infinite}
.ecosystem-electric{animation:ecosystem-electric 10s linear infinite}
@keyframes ecosystem-color{0%,42%,100%{color:#00baff}50%,92%{color:#ffd027}}
@keyframes ecosystem-gas{0%,42%,100%{opacity:1}50%,92%{opacity:.25}}
@keyframes ecosystem-electric{0%,42%,100%{opacity:.25}50%,92%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ecosystem-energy,.ecosystem-gas,.ecosystem-electric{animation:none}}

html .ecosystem-legend{font:700 clamp(16px,1.5vw,24px)/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:.12em}