/* ==========================================================================
   «Il comune che sale» — il paese del vecchio oesis.it (templates/_parti/comune.html.twig)
   Sequenza: monti → municipio che sale dal terreno → palazzi dal centro verso i lati → banchi →
   cipressi → persone → le tre tessere scendono → i fasci di luce illuminano il municipio.
   Parte con .is-attivo (assets/app.js); con prefers-reduced-motion si vede subito la scena finita.
   ========================================================================== */

.panorama__scena { display: block; width: 100%; height: 100%; overflow: visible; }
.panorama__scena text { font-family: var(--f-titoli); }
.p-insegna { font-size: 12px; font-weight: 800; letter-spacing: .14em; fill: #2b2f34; }
.p-etichetta { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.p-fin { fill: #fff; opacity: .92; }
.p-fin--luce { fill: #ffe3a1; opacity: 1; }
.p-fin--vetro { fill: #a9b3bd; opacity: .9; }

/* Tessere: sono link */
.p-tessera { cursor: pointer; outline: none; }
.p-tessera > rect:first-child { transition: transform .35s var(--molla), filter .3s; transform-box: fill-box; transform-origin: 50% 50%; }
.p-tessera:hover > rect:first-child, .p-tessera:focus-visible > rect:first-child { transform: translateY(-4px) scale(1.05); }
.p-tessera:focus-visible > rect:first-child { stroke: var(--inchiostro); stroke-width: 4; }

/* Origini delle trasformazioni */
.p-sale, .p-cipresso, .p-persona, .p-tessera, .p-raggio, .p-monti { transform-box: fill-box; }
.p-sale, .p-cipresso, .p-persona { transform-origin: 50% 100%; }
.p-raggio { transform-origin: 50% 0; }
.p-tessera { transform-origin: 50% 50%; }

/* Stato iniziale (solo con JS e animazioni attive) */
.js .comune:not(.is-attivo) .p-sale { transform: translateY(105%); }
.js .comune:not(.is-attivo) .p-cipresso { transform: scaleY(0); }
.js .comune:not(.is-attivo) .p-persona { opacity: 0; transform: translateY(12px); }
.js .comune:not(.is-attivo) .p-tessera { opacity: 0; transform: translateY(-40px) scale(.8); }
.js .comune:not(.is-attivo) .p-raggio { opacity: 0; transform: scaleY(0); }
.js .comune:not(.is-attivo) .p-monti { opacity: 0; transform: translateY(40px); }
.js .comune:not(.is-attivo) .p-nuvola, .js .comune:not(.is-attivo) .p-uccelli { opacity: 0; }

/* Ingresso */
.comune.is-attivo .p-monti { animation: p-monti 2.04s var(--morbido) both; }
.comune.is-attivo .p-municipio { animation: p-sale 2.1s 0.3s cubic-bezier(.3, .45, .2, 1) both; }
.comune.is-attivo .p-ed-l1, .comune.is-attivo .p-ed-r1 { animation: p-sale 1.87s 1.27s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-ed-l3, .comune.is-attivo .p-ed-r2 { animation: p-sale 1.87s 1.53s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-ed-l2, .comune.is-attivo .p-ed-r3 { animation: p-sale 2.04s 1.7s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-ed-l4, .comune.is-attivo .p-ed-r4 { animation: p-sale 1.87s 1.9s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-ed-l5, .comune.is-attivo .p-ed-r5 { animation: p-sale 1.87s 2.11s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-banco-1 { animation: p-sale 1.53s 2.29s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-banco-2 { animation: p-sale 1.53s 2.46s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-banco-3 { animation: p-sale 1.53s 2.38s cubic-bezier(.3, .5, .25, 1) both; }
.comune.is-attivo .p-cipresso-1 { animation: p-cresce 1.36s 2.55s var(--molla) both; }
.comune.is-attivo .p-cipresso-2 { animation: p-cresce 1.36s 2.72s var(--molla) both; }
.comune.is-attivo .p-cipresso-3 { animation: p-cresce 1.36s 2.89s var(--molla) both; }
.comune.is-attivo .p-persona { animation: p-arriva 1.02s 3.23s var(--morbido) both; }
.comune.is-attivo .p-persona-2, .comune.is-attivo .p-corridore { animation-delay: 3.4s; }
.comune.is-attivo .p-ciclista, .comune.is-attivo .p-persona-3 { animation-delay: 3.57s; }
.comune.is-attivo .p-persona-4, .comune.is-attivo .p-venditore { animation-delay: 3.74s; }
.comune.is-attivo .p-tessera-1 { animation: p-tessera 1.36s 3.57s var(--molla) both; }
.comune.is-attivo .p-tessera-2 { animation: p-tessera 1.36s 3.82s var(--molla) both; }
.comune.is-attivo .p-tessera-3 { animation: p-tessera 1.36s 4.08s var(--molla) both; }
.comune.is-attivo .p-raggio-1 { animation: p-raggio 1.7s 4.59s var(--morbido) both, p-pulsa 8.5s 6.29s ease-in-out infinite; }
.comune.is-attivo .p-raggio-2 { animation: p-raggio 1.7s 4.84s var(--morbido) both, p-pulsa 8.5s 7.14s ease-in-out infinite; }
.comune.is-attivo .p-raggio-3 { animation: p-raggio 1.7s 5.1s var(--morbido) both, p-pulsa 8.5s 7.99s ease-in-out infinite; }
.comune.is-attivo .p-nuvola, .comune.is-attivo .p-uccelli { animation: p-appare 2.04s 0.51s both; }

/* Vita del paese */
.comune.is-attivo .p-nuvola-1 { animation: p-appare 2s .5s both, p-deriva 40s 1.5s linear infinite; }
.comune.is-attivo .p-nuvola-2 { animation: p-appare 2s .8s both, p-deriva 30s 1.5s linear infinite reverse; }
.comune.is-attivo .p-nuvola-3 { animation: p-appare 2s 1.1s both, p-deriva 36s 1.5s linear infinite; }
.comune.is-attivo .p-nuvola-4 { animation: p-appare 2s 1.4s both, p-deriva 26s 1.5s linear infinite reverse; }
.comune.is-attivo .p-uccelli { animation: p-appare 2s 1.7s both, p-volo 9s 3.5s ease-in-out infinite; }
.p-bandiera { transform-box: fill-box; }
.p-bandiera-it { transform-origin: 0 50%; }
.p-bandiera-ue { transform-origin: 100% 50%; }
.comune.is-attivo .p-bandiera { animation: p-sventola 2.6s 3s ease-in-out infinite; }
.comune.is-attivo .p-bandiera-ue { animation-delay: 2.1s; }
.p-lancetta { transform-box: view-box; transform-origin: 800px 644px; }
.comune.is-attivo .p-minuti { animation: p-gira 14s 3s linear infinite; }
.comune.is-attivo .p-ore { animation: p-gira 168s 3s linear infinite; }
.comune.is-attivo .p-fin--luce { animation: p-luce 6s 2s ease-in-out infinite; }
.p-ruota { transform-box: fill-box; transform-origin: 50% 50%; }
.comune.is-attivo .p-ruota { animation: p-gira 1.6s linear infinite; }

@keyframes p-sale { from { transform: translateY(105%); } to { transform: none; } }
@keyframes p-cresce { from { transform: scaleY(0); } }
@keyframes p-arriva { from { opacity: 0; transform: translateY(12px); } }
@keyframes p-tessera { from { opacity: 0; transform: translateY(-40px) scale(.8); } }
@keyframes p-raggio { from { opacity: 0; transform: scaleY(0); } }
@keyframes p-pulsa { 50% { opacity: .65; } }
@keyframes p-monti { from { opacity: 0; transform: translateY(40px); } }
@keyframes p-appare { from { opacity: 0; } }
@keyframes p-deriva { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(60px); } }
@keyframes p-volo { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -14px); } }
@keyframes p-sventola { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-5deg) scaleX(.93); } }
@keyframes p-gira { to { transform: rotate(360deg); } }
@keyframes p-luce { 0%, 100% { fill: #ffe3a1; } 50% { fill: #fff1c9; } }

/* Lottie originale (se presente in public/anim) */
.comune-lottie { width: 100%; aspect-ratio: 1600 / 960; }
.comune-lottie svg { width: 100% !important; height: 100% !important; }
/* finito l'ingresso, nuvole e uccelli continuano a muoversi (unita' della scena: 10024 di larghezza) */
.l-vita { transform-box: view-box; }
.comune-lottie.is-vivo .l-vita-nuvola1 { animation: l-deriva 60s ease-in-out infinite alternate; }
.comune-lottie.is-vivo .l-vita-nuvola2 { animation: l-deriva-indietro 48s ease-in-out infinite alternate; }
.comune-lottie.is-vivo .l-vita-nuvola3 { animation: l-deriva 54s 1.5s ease-in-out infinite alternate; }
.comune-lottie.is-vivo .l-vita-uccelli { animation: l-volo 14s ease-in-out infinite; }
/* fuori dallo schermo o con la scheda nascosta le nuvole si fermano (assets/app.js) */
.comune-lottie.is-fermo .l-vita { animation-play-state: paused; }
@keyframes l-deriva { from { transform: translateX(0); } to { transform: translateX(1100px); } }
@keyframes l-deriva-indietro { from { transform: translateX(0); } to { transform: translateX(-900px); } }
@keyframes l-volo { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-260px, -90px); } 50% { transform: translate(-520px, 30px); } 75% { transform: translate(-240px, 110px); } }

@media (prefers-reduced-motion: reduce) {
  .js .comune:not(.is-attivo) :is(.p-sale, .p-cipresso, .p-persona, .p-tessera, .p-raggio, .p-monti, .p-nuvola, .p-uccelli) { transform: none; opacity: 1; }
}