/* Confartigianato Agrigento — la home.
   Riproduce il modello approvato (materiale/modello-home/index.html): stessi numeri, stessi tempi, stesso ordine.
   Differenze rispetto al modello, solo tecniche:
   - la classe .home del modello qui si chiama .ingresso, perché WordPress mette già «home» sul <body> della prima pagina;
   - caratteri, pezzi del logo, piè di pagina e pulsante «Chiama» stanno in comune.css (servono anche alle pagine
     interne); lì ci sono anche la regola contro lo scorrimento orizzontale e @keyframes affiora;
   - il ritardo con cui le voci rientrano nel logo usa --ultima (numero di voci − 1: nel modello è 5, con sei voci),
     così va bene per qualunque numero di voci del menu; --ultima lo scrive inc/menu-logo.php;
   - la classe .ritorno su <html> (entrata breve, arrivando dal logo piccolo di una pagina interna) la mette lo script
     in testa a header.php, solo nella home;
   - la regola del modello @media (max-width:720px) per «Agrigento» e per le voci dell'orbita sta subito dopo il blocco
     del telefono, come nel modello, ma senza le regole del piè di pagina e di «Chiama» (in comune.css);
   - in fondo all'orbita, una regola per la barra di amministrazione di WordPress (si vede solo a chi ha fatto l'accesso). */

@property --sw{syntax:'<angle>';inherits:false;initial-value:400deg}
@property --sa{syntax:'<angle>';inherits:false;initial-value:400deg}

/* --cy = altezza del centro del logo nello schermo. */
:root{--cy:50%;--u:min(calc(100vw / 898), calc(100vh / 330), 2.6px)}
body{margin:0;background:#fff;font-family:'Barlow Semi Condensed',system-ui,sans-serif}

/* ---------- La home: fondo blu che sfuma nel bianco, come il banner ---------- */
.ingresso{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;color:var(--blu);
background:#fff linear-gradient(90deg,
#1e3d8f calc(50% - 282.69 * var(--u)), #203f8f calc(50% - 267.69 * var(--u)), #254292 calc(50% - 252.69 * var(--u)),
#294694 calc(50% - 237.69 * var(--u)), #304c95 calc(50% - 222.69 * var(--u)), #39549b calc(50% - 207.69 * var(--u)),
#425da2 calc(50% - 192.69 * var(--u)), #4f67a7 calc(50% - 177.69 * var(--u)), #5d73af calc(50% - 162.69 * var(--u)),
#6a7fb4 calc(50% - 147.69 * var(--u)), #7b8bbe calc(50% - 132.69 * var(--u)), #8a99c4 calc(50% - 117.69 * var(--u)),
#99a7ca calc(50% - 102.69 * var(--u)), #abb4d1 calc(50% - 87.69 * var(--u)), #b8c2dd calc(50% - 72.69 * var(--u)),
#c9d1e4 calc(50% - 57.69 * var(--u)), #d6dcec calc(50% - 42.69 * var(--u)), #e5e7f3 calc(50% - 27.69 * var(--u)),
#f0f0f8 calc(50% - 12.69 * var(--u)), #f8f9fb calc(50% + 2.31 * var(--u)), #fdfdfd calc(50% + 17.31 * var(--u)),
#ffffff calc(50% + 32.31 * var(--u)))}
.velo{position:absolute;inset:0;z-index:1;background:var(--blu);pointer-events:none;animation:velo .8s ease .15s both}
.logo,.scritte{position:absolute;inset:0;z-index:2;pointer-events:none}
.logo{transform-origin:50% var(--cy);transition:transform .35s ease}
.nucleo{position:absolute;inset:0;transform-origin:50% var(--cy)}

/* ---------- Entrata: il logo si costruisce (circa 4 secondi) ---------- */
.giro{transform-origin:53% 50.38%;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.anello{--sw:400deg;transform-origin:53% 50.38%;
-webkit-mask-image:conic-gradient(from 0deg at 53% 50.38%, #000 calc(var(--sw) - 40deg), transparent var(--sw));
mask-image:conic-gradient(from 0deg at 53% 50.38%, #000 calc(var(--sw) - 40deg), transparent var(--sw));
animation:dipingi 1.35s cubic-bezier(.5,.05,.25,1) .6s both}
.disco{transform-origin:50% 50%;animation:cresci .55s cubic-bezier(.34,1.56,.64,1) 1.5s both}
.lettera-i{animation:sali .5s cubic-bezier(.2,.8,.2,1) 1.9s both}
.lettera-a{--sa:400deg;
-webkit-mask-image:conic-gradient(from 0deg at 47.7% 52.4%, #000 calc(var(--sa) - 30deg), transparent var(--sa));
mask-image:conic-gradient(from 0deg at 47.7% 52.4%, #000 calc(var(--sa) - 30deg), transparent var(--sa));
animation:scrivi .75s ease-in-out 2.1s both}
.r1{animation:svela .5s cubic-bezier(.3,.7,.2,1) 2.65s both}
.r2{animation:svela .95s cubic-bezier(.45,.1,.3,1) 2.95s both}
.r3{animation:svela .5s cubic-bezier(.3,.7,.2,1) 3.55s both}
.r4{animation:affiora .55s ease-out 3.95s both}
.alone{position:absolute;left:calc(50% - 76 * var(--u));top:calc(var(--cy) - 76 * var(--u));width:calc(152 * var(--u));height:calc(152 * var(--u));box-sizing:border-box;border-radius:50%;border:2px solid rgba(30,61,143,.32);opacity:0;animation:alone 3.2s ease-out 4.6s 3}

/* ---------- Il logo è un pulsante ---------- */
.tocco{position:absolute;z-index:3;left:calc(50% - 88 * var(--u));top:calc(var(--cy) - 88 * var(--u));width:calc(176 * var(--u));height:calc(176 * var(--u));margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tocco:focus-visible{outline:3px solid var(--blu);outline-offset:6px}
.tocco:hover ~ .logo{transform:scale(1.035)}
.tocco:active ~ .logo{transform:scale(.985)}
.tocco:hover ~ .logo .giro{transform:rotate(14deg)}

/* Scritta di invito: accesa di base (decisione dell'utente del 3 novembre 2026). Sul telefono dice «Tocca».
   Testi e accensione in Aspetto → Personalizza → Home. */
.invito{position:absolute;z-index:2;left:50%;top:calc(var(--cy) + 106 * var(--u));margin:0;transform:translateX(-50%);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--blu);pointer-events:none;animation:invito .6s ease-out 4.4s both}
.invito .touch{display:none}
@media (hover:none){.invito .touch{display:inline}.invito .mouse{display:none}}

/* ---------- «Agrigento»: la Sicilia con il punto su Agrigento (direzione D, scelta dall'utente il 3 novembre 2026) ----------
   Computer: in alto a sinistra, bianco sul blu. Telefono: in basso a sinistra, blu sul bianco, sulla stessa riga del pulsante «Chiama».
   Si disegna mentre si costruisce il logo, sparisce al clic sul logo insieme alle scritte.
   La sagoma è scritta nella pagina (front-page.php) e si spegne in Aspetto → Personalizza → Home. «affiora» è in comune.css. */
.luogo{position:absolute;z-index:2;left:44px;top:44px;margin:0;display:flex;align-items:center;gap:20px;color:#fff;pointer-events:none;transition:opacity .35s ease}
.mappa{display:block;flex:none;width:clamp(140px, calc(112 * var(--u)), 220px);height:auto;overflow:visible}
.mappa .costa{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:traccia 1.6s cubic-bezier(.45,.1,.3,1) 2.6s both}
.mappa .isola{fill:currentColor;fill-opacity:.1;stroke:none;animation:dissolvi .8s ease 3.6s both}
.mappa .punto{fill:currentColor;transform-box:fill-box;transform-origin:center;animation:cresci .45s cubic-bezier(.34,1.56,.64,1) 4.1s both}
.mappa .onda{fill:none;stroke:currentColor;stroke-width:2.4;transform-box:fill-box;transform-origin:center;opacity:0;animation:battito 2.4s ease-out 4.5s 3}
.luogo-testo{display:flex;flex-direction:column;gap:6px;animation:affiora .6s ease-out 4.25s both}
.luogo-nome{font-size:clamp(20px, calc(15 * var(--u)), 30px);font-weight:600;line-height:1;letter-spacing:.2em;text-transform:uppercase}
.luogo-coord{font-size:clamp(14px, calc(9.5 * var(--u)), 18px);font-weight:500;line-height:1.2;letter-spacing:.06em;color:rgba(255,255,255,.82)}
@keyframes traccia{to{stroke-dashoffset:0}}
@keyframes battito{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}

/* ---------- Clic sul logo: il MENU A ORBITA (scelto dall'utente il 4 novembre 2026, versione «wow») ----------
   Il logo resta al centro e diventa il centro del menu. Al clic: il logo si «preme» e si rimpicciolisce con un rimbalzo,
   un'onda bianca parte dal logo, il blu si allarga dal logo fino a coprire lo schermo, schizzano gocce con i colori del logo IA,
   l'orbita tratteggiata si disegna girando (come l'anello) e le sezioni escono dal logo a molla, una dopo l'altra.
   Di nuovo clic sul logo, «Chiudi» o Esc: le sezioni rientrano nel logo, il blu si ritira, la home torna com'era.
   Le posizioni delle voci (--cos, --sin) si calcolano dal numero di voci: angoli uguali partendo dall'alto (-90°). */
/* --oh lascia libera la zona di «Scrivici» e «Chiama», a ogni misura. Con cinque voci quella in basso a destra sta a 54°: scende di .809 × --oh / 2 sotto
   il centro, che è a metà schermo. Quindi --oh = (altezza − 2 × spazio dei pulsanti − altezza della voce) / .809. Qui: 2 × (72 + 12 di margine) + 148 = 316.
   Con un numero diverso di voci cambia l'angolo: il conto va rifatto, anche nei blocchi sotto. */
:root{--s-menu:.78;--sposta:0px;--k:1;--r-logo:158px;--ow:min(860px, calc(100vw - 280px));--oh:min(600px, calc((100vh - 316px) / .809))}
@supports (height:100svh){:root{--oh:min(600px, calc((100svh - 316px) / .809))}}
.menu-aperto{overflow:hidden}
.ingresso{isolation:isolate}
.tocco{z-index:5}
.marea{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--blu);clip-path:circle(0px at 50% var(--cy));transition:clip-path .375s cubic-bezier(.65,0,.35,1) .275s}
.aperto .marea{clip-path:circle(150% at 50% var(--cy));transition:clip-path .8s cubic-bezier(.65,0,.25,1) .08s}
.bagliore{position:absolute;z-index:1;left:50%;top:calc(var(--cy) + var(--sposta));width:min(560px, calc(var(--oh) * .9));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(92,130,214,.5) 0,rgba(30,61,143,0) 68%);opacity:0;pointer-events:none;transition:opacity .15s ease}
.aperto .bagliore{opacity:1;transition:opacity 1s ease .35s}
.logo{transition:transform .35s ease}
/* alla chiusura il logo torna grande con un rimbalzo, dopo che le sezioni ci sono rientrate */
.chiusura .logo{transition:transform .4s cubic-bezier(.34,1.45,.5,1) .25s}
.chiusura .tocco{transition:transform .4s ease .25s}
.aperto .logo{transform:translateY(var(--sposta)) scale(var(--s-menu));transition:transform .85s cubic-bezier(.34,1.45,.5,1) .12s}
.aperto .tocco{transform:translateY(var(--sposta)) scale(var(--s-menu));transition:transform .85s ease .12s}
.aperto .tocco:hover ~ .logo{transform:translateY(var(--sposta)) scale(calc(var(--s-menu) * 1.05))}
.aperto .tocco:hover ~ .logo .giro{transform:rotate(-14deg)}
.aperto .tocco:focus-visible{outline-color:#fff}
.aperto .alone{border-color:rgba(255,255,255,.5)}
.scritte{transition:opacity .25s ease .475s,transform .325s cubic-bezier(.2,.8,.2,1) .475s}
.aperto .scritte{opacity:0;transform:translateX(70px);transition:opacity .25s ease,transform .4s cubic-bezier(.5,0,.75,0)}
.aperto .invito{animation:none;opacity:0}
.tornata .invito{animation-delay:.7s}
.aperto .luogo{opacity:0;transition:opacity .25s ease}
.luogo{transition:opacity .25s ease .55s}
.urto{position:absolute;z-index:2;left:50%;top:calc(var(--cy) + var(--sposta));width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;border:3px solid rgba(255,255,255,.85);opacity:0;pointer-events:none}
.aperto .urto{animation:urto .9s cubic-bezier(.1,.6,.3,1) .1s both}
.schizzi{position:absolute;inset:0;z-index:2;pointer-events:none}
.goccia{position:absolute;left:50%;top:var(--cy);width:var(--g);height:var(--g);border-radius:50%;background:var(--c);opacity:0}
.aperto .goccia{animation:schizzo 1.05s cubic-bezier(.12,.75,.3,1) var(--t) both}
/* alla chiusura (classe .chiusura per 0,75 s): le gocce tornano nel logo e un'onda bianca si stringe sul logo.
   Giro sugli effetti del 5/11: TUTTI i tempi della chiusura sono la metà di prima, circa 0,7 secondi. Le regole senza .aperto valgono solo
   quando il menu si chiude, quindi l'apertura non cambia. Il modello dimezza solo .chiusura, invito e script: qui sono dimezzati anche blu,
   bagliore, scritte, Sicilia, orbita, voci e «Chiudi», altrimenti il blu finirebbe a 1,3 s e le scritte a 1,6 s. */
.chiusura .goccia{animation:risucchio .33s cubic-bezier(.5,0,.75,0) calc(var(--t) * .4) both}
.chiusura .urto{animation:urto-dentro .3s cubic-bezier(.5,0,.75,0) .2s both}
@keyframes risucchio{0%{opacity:0;transform:translate(calc(-50% + var(--x) * var(--k) * 1px),calc(-50% + var(--y) * var(--k) * 1px)) scale(1)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
@keyframes urto-dentro{0%{opacity:0;transform:scale(3.2)}40%{opacity:.8}100%{opacity:0;transform:scale(.6)}}
@keyframes urto{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(3.4)}}
@keyframes schizzo{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}65%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x) * var(--k) * 1px),calc(-50% + var(--y) * var(--k) * 1px)) scale(1)}}
@property --og{syntax:'<angle>';inherits:false;initial-value:0deg}
.orbita{position:absolute;z-index:3;left:50%;top:calc(var(--cy) + var(--sposta));width:var(--ow);height:var(--oh);transform:translate(-50%,-50%);pointer-events:none;color:#fff;visibility:hidden;transition:visibility 0s linear .3s}
.aperto .orbita{visibility:visible;transition:none}
.traccia{position:absolute;inset:0;width:100%;height:100%;overflow:visible;--og:0deg;-webkit-mask-image:conic-gradient(from -90deg at 50% 50%,#000 var(--og),transparent 0);mask-image:conic-gradient(from -90deg at 50% 50%,#000 var(--og),transparent 0);transition:--og .275s cubic-bezier(.5,0,.75,0) .05s}
.aperto .traccia{--og:360deg;transition:--og 1.1s cubic-bezier(.6,0,.3,1) .3s}
.traccia ellipse{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.5;stroke-dasharray:5 9;vector-effect:non-scaling-stroke;animation:flusso 7s linear infinite}
@keyframes flusso{to{stroke-dashoffset:-140}}
.orbita ul{margin:0;padding:0;list-style:none}
.orbita li{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.2);pointer-events:none;
transition:left .25s cubic-bezier(.6,-.28,.735,.045),top .25s cubic-bezier(.6,-.28,.735,.045),transform .25s cubic-bezier(.6,-.28,.735,.045),opacity .075s ease .19s;transition-delay:calc((var(--ultima, 5) - var(--i)) * .025s)}
.aperto .orbita li{left:calc(50% + var(--cos) * 50%);top:calc(50% + var(--sin) * 50%);opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;
transition:left .85s cubic-bezier(.34,1.5,.55,1),top .85s cubic-bezier(.34,1.5,.55,1),transform .85s cubic-bezier(.34,1.5,.55,1),opacity .15s ease;transition-delay:calc(.42s + var(--i) * .07s)}
/* raggio colorato dalla voce al logo, al passaggio del mouse (decorativo: calcolato con hypot() e atan2()) */
.raggio{display:none}
@supports (width:hypot(1px,1px)) and (rotate:atan2(1px,1px)){
.raggio{display:block;position:absolute;z-index:-1;left:50%;top:50%;width:calc(hypot(var(--cos) * var(--ow) / 2, var(--sin) * var(--oh) / 2) - var(--r-logo));height:2px;transform-origin:0 50%;rotate:atan2(calc(var(--sin) * var(--oh) * -1), calc(var(--cos) * var(--ow) * -1));transform:scaleX(0);background:linear-gradient(90deg,var(--c),rgba(255,255,255,0));transition:transform .35s ease;pointer-events:none}
.orbita li:hover .raggio{transform:scaleX(1)}
}
.orbita a.voce{display:flex;flex-direction:column;align-items:center;gap:4px;width:230px;padding:12px 16px;box-sizing:border-box;border-radius:18px;background:var(--blu);color:#fff;text-align:center;text-decoration:none;transition:background .2s ease,color .2s ease,transform .25s ease}
.orbita a.voce::before{content:'';width:14px;height:14px;margin-bottom:6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 25%,transparent);transition:box-shadow .25s ease,transform .25s ease}
.orbita a.voce:hover{background:#fff;color:var(--blu);transform:translateY(-3px)}
.orbita a.voce:hover::before{transform:scale(1.25);box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 25%,transparent),0 0 22px var(--c)}
.orbita a.voce:focus-visible{outline:3px solid #fff;outline-offset:4px}
.orbita .nome{font-size:27px;font-weight:600;line-height:1.1}
.orbita .desc{font-size:15px;opacity:.8}
.chiudi-menu{position:absolute;z-index:6;right:32px;top:28px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;background:transparent;color:#fff;font:600 16px/1 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .075s ease,visibility 0s linear .075s}
.aperto .chiudi-menu{opacity:1;visibility:visible;transition:opacity .4s ease 1s}
.chiudi-menu:hover{background:rgba(255,255,255,.1)}
.chiudi-menu:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* telefono in orizzontale e schermi bassi (fino a 600 px: sotto, le voci con la descrizione toccherebbero il logo o le altre): la home sta nello schermo,
   così anche il menu a orbita. Voci piccole su una riga e senza descrizione, logo più piccolo, orbita più larga che alta.
   --oh: 2 × (72 + 6 di margine) + 44 = 200 (vedi sopra) */
@media (max-height:600px) and (min-width:721px){
.ingresso{min-height:0}
:root{--s-menu:.6;--r-logo:70px;--ow:min(760px, calc(100vw - 300px));--oh:calc((100vh - 200px) / .809)}
@supports (height:100svh){:root{--oh:calc((100svh - 200px) / .809)}}
.orbita a.voce{justify-content:center;gap:2px;width:auto;min-height:44px;padding:4px 8px;border-radius:12px;white-space:nowrap}
.orbita a.voce::before{width:8px;height:8px;margin-bottom:2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.orbita .nome{font-size:16px}
.orbita .desc{display:none}
}

/* ---------- Ritorno alla home da una pagina interna (deciso il 4 novembre 2026) ----------
   La pagina interna si copre di blu partendo dal logo piccolo, poi apre la home con la classe .ritorno su <html>:
   il blu si stringe dentro il logo, il logo compare già costruito con un rimbalzo, le scritte rientrano da destra,
   la Sicilia e l'invito ricompaiono. Circa 1,3 secondi invece dei 4,5 dell'entrata completa.
   Si usa animation-fill-mode «backwards» sul logo, così dopo il rimbalzo il clic e il menu funzionano come sempre. */
.ritorno .velo{animation:velo-dentro .7s cubic-bezier(.65,0,.35,1) .1s both}
.ritorno .anello,.ritorno .disco,.ritorno .lettera-i,.ritorno .lettera-a,.ritorno .r1,.ritorno .r2,.ritorno .r3,.ritorno .r4{animation:none}
.ritorno .logo{animation:logo-ritorno .8s cubic-bezier(.34,1.45,.5,1) .25s backwards}
.ritorno .scritte{animation:scritte-ritorno .6s cubic-bezier(.2,.8,.2,1) .6s backwards}
.ritorno .luogo{animation:dissolvi .5s ease .8s backwards}
.ritorno .mappa .costa,.ritorno .mappa .isola,.ritorno .mappa .punto,.ritorno .luogo-testo{animation:none;stroke-dashoffset:0}
.ritorno .mappa .onda{animation-delay:1.4s}
.ritorno .invito{animation-delay:1s}
.ritorno .alone{animation-delay:1.4s}
@keyframes velo-dentro{from{clip-path:circle(150% at 50% var(--cy))}to{clip-path:circle(0px at 50% var(--cy));visibility:hidden}}
@keyframes logo-ritorno{from{opacity:0;transform:scale(.55) rotate(-30deg)}}
@keyframes scritte-ritorno{from{opacity:0;transform:translateX(50px)}}

/* senza JavaScript: le sezioni compaiono come semplice elenco sotto la home */
.sezioni-semplici{background:var(--blu);color:#fff;padding:40px 20px}
.sezioni-semplici ul{max-width:1120px;margin:0 auto;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.sezioni-semplici a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;font-weight:600;text-decoration:none}
.js .sezioni-semplici,.no-js .orbita,.no-js .chiudi-menu{display:none}

/* ---------- Barra di amministrazione di WordPress (solo per chi ha fatto l'accesso) ---------- */
.admin-bar .ingresso{height:calc(100vh - var(--wp-admin--admin-bar--height, 32px));height:calc(100svh - var(--wp-admin--admin-bar--height, 32px))}

@keyframes velo{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes dipingi{from{--sw:0deg;transform:rotate(-110deg) scale(.82)}to{--sw:400deg;transform:none}}
@keyframes cresci{from{transform:scale(0)}to{transform:none}}
@keyframes sali{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes scrivi{from{--sa:0deg}to{--sa:400deg}}
@keyframes svela{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes alone{0%{opacity:0;transform:scale(.92)}15%{opacity:1}100%{opacity:0;transform:scale(1.42)}}
@keyframes invito{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes dissolvi{from{opacity:0}to{opacity:1}}

/* ---------- Telefono e schermi stretti: logo più in alto, scritte sotto ---------- */
@media (max-width:720px),(max-aspect-ratio:3/4){
/* --u: oltre a stare nella larghezza, il logo lascia libera in basso la riga con «Agrigento» e «Chiama» (72 px).
   svh = altezza dello schermo con le barre del browser visibili (Safari su iPhone). */
:root{--cy:38%;--u:min(calc(100vw / 260), calc(100vh / 470), calc((62vh - 104px) / 222), 2.2px)}
@supports (height:100svh){:root{--u:min(calc(100vw / 260), calc(100svh / 470), calc((62svh - 104px) / 222), 2.2px)}}
.ingresso{background:#fff linear-gradient(180deg,
#1e3d8f calc(38% - 214.25 * var(--u)), #203f8f calc(38% - 209 * var(--u)), #254292 calc(38% - 203.75 * var(--u)),
#294694 calc(38% - 198.5 * var(--u)), #304c95 calc(38% - 193.25 * var(--u)), #39549b calc(38% - 188 * var(--u)),
#425da2 calc(38% - 182.75 * var(--u)), #4f67a7 calc(38% - 177.5 * var(--u)), #5d73af calc(38% - 172.25 * var(--u)),
#6a7fb4 calc(38% - 167 * var(--u)), #7b8bbe calc(38% - 161.75 * var(--u)), #8a99c4 calc(38% - 156.5 * var(--u)),
#99a7ca calc(38% - 151.25 * var(--u)), #abb4d1 calc(38% - 146 * var(--u)), #b8c2dd calc(38% - 140.75 * var(--u)),
#c9d1e4 calc(38% - 135.5 * var(--u)), #d6dcec calc(38% - 130.25 * var(--u)), #e5e7f3 calc(38% - 125 * var(--u)),
#f0f0f8 calc(38% - 119.75 * var(--u)), #f8f9fb calc(38% - 114.5 * var(--u)), #fdfdfd calc(38% - 109.25 * var(--u)),
#ffffff calc(38% - 104 * var(--u)))}
.pz.riga{left:calc(50% - var(--w) * var(--u) / 2);top:calc(var(--cy) + var(--dym) * var(--u))}
.invito{top:calc(var(--cy) + 222 * var(--u));font-size:14px}
.luogo{left:20px;top:auto;bottom:20px;min-height:52px;gap:12px;color:var(--blu)}
.mappa{width:72px}
.mappa .costa,.mappa .onda{stroke-width:5.4}
.mappa .punto,.mappa .onda{scale:2.3}
.luogo-testo{gap:5px}
.luogo-nome{font-size:17px;letter-spacing:.16em}
.luogo-coord{font-size:12px;color:#3a4f8f}
/* menu a orbita sul telefono e sugli schermi verticali: l'orbita scende un po' sotto il logo, più stretta e alta.
   --oh: 2 × (136 dei due pulsanti uno sopra l'altro + 8 di margine) + 73 = 361 (vedi sopra) */
:root{--s-menu:.46;--k:.55;--sposta:12vh;--r-logo:96px;--ow:min(600px, calc(100vw - 120px));--oh:min(500px, calc((100vh - 361px) / .809))}
@supports (height:100svh){:root{--sposta:12svh;--oh:min(500px, calc((100svh - 361px) / .809))}}
.aperto .scritte{transform:translateY(40px)}
.bagliore{width:min(240px, calc(var(--oh) * .5))}
.urto{width:170px;height:170px;margin:-85px 0 0 -85px}
}

/* ---------- Telefono: «Agrigento» sulla stessa riga di «Chiama» (che qui sta a 16 px dai bordi, comune.css) e voci dell'orbita più piccole ---------- */
@media (max-width:720px){
.luogo{left:16px;bottom:16px;min-height:56px}
.orbita a.voce{width:110px;padding:8px 4px;border-radius:14px}
.orbita a.voce::before{width:11px;height:11px;margin-bottom:4px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.orbita .nome{font-size:17px}
.orbita .desc{display:none}
.chiudi-menu{right:20px;top:20px}
}
@media (max-width:359px){
.mappa{width:56px}
.mappa .costa,.mappa .onda{stroke-width:6.6}
.mappa .punto,.mappa .onda{scale:2.8}
.luogo{gap:10px}
.luogo-nome{font-size:15px;letter-spacing:.14em}
.luogo-coord{font-size:12px;letter-spacing:.03em}
}
/* menu a orbita sui telefoni in orizzontale con la larghezza del telefono: la home è alta 520 px e il suo centro (--cy) sta a 197,6 px, quindi --sposta
   porta il logo a metà dello schermo; orbita più larga che alta e più stretta dello schermo, così le voci non arrivano a «Scrivici» e «Chiama» */
@media (max-height:500px) and (max-width:720px){
:root{--sposta:calc(50vh - 197.6px);--r-logo:40px;--ow:calc(100vw - 300px);--oh:calc(100vh - 160px)}
@supports (height:100svh){:root{--sposta:calc(50svh - 197.6px);--oh:calc(100svh - 160px)}}
}
/* menu a orbita sui telefoni piccoli: logo più piccolo, voci più strette, così nessuna voce tocca il logo o le altre. --oh: 2 × (136 + 8) + 71 = 359 (vedi sopra) */
@media (max-width:374px){
:root{--s-menu:.36;--r-logo:60px;--ow:calc(100vw - 100px);--oh:min(500px, calc((100vh - 359px) / .809))}
@supports (height:100svh){:root{--oh:min(500px, calc((100svh - 359px) / .809))}}
.orbita a.voce{width:100px}
.orbita .nome{font-size:16px}
}
/* menu a orbita sui tablet verticali stretti: le voci sono larghe 230 px, l'orbita si stringe perché restino dentro lo schermo */
@media (min-width:721px) and (max-width:809px) and (max-aspect-ratio:3/4){
:root{--ow:calc(100vw - 256px)}
}

/* ---------- Animazioni spente sul dispositivo: tutto compare subito ---------- */
@media (prefers-reduced-motion:reduce){
.velo{display:none}
/* .chiama, .chiama svg e .chiama::after: in comune.css */
.anello,.disco,.lettera-i,.lettera-a,.r1,.r2,.r3,.r4,.alone,.invito{animation:none}
.luogo,.luogo-testo,.mappa .costa,.mappa .isola,.mappa .punto,.mappa .onda{animation:none}
.mappa .costa{stroke-dashoffset:0}
.mappa .onda{display:none}
.logo,.scritte{animation:dissolvi .4s ease both}
.logo,.giro{transition:none}
.tocco:hover ~ .logo,.tocco:hover ~ .logo .giro{transform:none}
.marea,.bagliore,.logo,.tocco,.scritte,.traccia,.orbita li,.chiudi-menu,.raggio,.luogo{transition:none !important}
.ritorno .velo,.ritorno .logo,.ritorno .scritte,.ritorno .luogo{animation:none}
.aperto .scritte{animation:none;opacity:0}
.aperto .urto,.aperto .goccia,.chiusura .urto,.chiusura .goccia,.traccia ellipse{animation:none}
}