/* Хроника IDEA — stile condiviso da tutti i capitoli (/priglashenie, /put, /glaza, /putniki, /mesto) */
/* VERBANO-CONTEXT: concept «Сад скрытых смыслов» — il testo dell'agenzia evoca Bosch
   (candele che si accendono, uccelli che parlano, occhi che compaiono): il sito li FA accadere.
   Un solo gesto forte (il trittico che si apre); tutto il resto risponde all'ospite. */
:root{
  --notte:#121a15; --notte-2:#1a241e; --muschio:#26332b;
  --oro:#d8bf86; --oro-chiaro:#efe0b8; --oro-scuro:#8f7644;
  --carminio:#b0402a; --incarnato:#e9c9b8; --azzurro:#7d9bb0; --grisaglia:#8c8a80;
  --crema:#f3e9dd; --inchiostro:#2b221c; --cannella:#9b4623;
  --serif:'Cormorant Garamond', Georgia, serif;
  --incisa:'Forum', 'Cormorant Garamond', serif;
  --voce:'Marck Script', cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{background:var(--notte);color:var(--oro-chiaro);font-family:var(--serif);font-size:20px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:1px dashed var(--oro);outline-offset:4px}
p{max-width:34em;margin-left:auto;margin-right:auto}

.scena{position:relative;padding:clamp(64px,11vh,120px) 22px;text-align:center}
.intestazione{font-family:var(--incisa);font-weight:400;font-size:clamp(28px,7.4vw,42px);line-height:1.15;letter-spacing:.06em;color:var(--oro)}
.sotto{font-style:italic;font-size:clamp(18px,4.6vw,22px);color:var(--oro);opacity:.8;margin-top:.3em}
.voce{font-family:var(--voce);font-size:clamp(26px,7vw,36px);line-height:1.25;color:var(--oro)}

/* ================= INGRESSO: tende + trittico ================= */
#ingresso{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:48px 22px 40px}
.drappo{position:absolute;top:0;width:min(29vw,300px);height:auto;z-index:5;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));transition:transform 2.4s cubic-bezier(.7,0,.2,1)}
.drappo.sx{left:0;transform-origin:0 0}
.drappo.dx{right:0;transform-origin:100% 0}
body.aperto .drappo.sx{transform:translateX(-72%) scaleX(.8)}
body.aperto .drappo.dx{transform:translateX(72%) scaleX(.8)}

.cartiglio{font-size:clamp(15px,3.9vw,18px);letter-spacing:.08em;color:var(--oro);opacity:.85;margin-bottom:18px;position:relative;z-index:6}

.trittico{position:relative;z-index:4;width:min(78vw,430px);aspect-ratio:876/950;-webkit-perspective:1400px;perspective:1400px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.trittico .interno{position:absolute;inset:0;overflow:hidden;background:var(--notte-2);box-shadow:0 0 0 1px rgba(216,191,134,.35),0 30px 70px rgba(0,0,0,.6)}
.trittico .interno img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:saturate(.7) brightness(.65);transition:transform 3.2s cubic-bezier(.2,.7,.2,1) .5s,filter 2.4s ease .6s;
  -webkit-mask:linear-gradient(#000 62%,transparent 98%);mask:linear-gradient(#000 62%,transparent 98%)}
body.aperto .trittico .interno img{transform:scale(1);filter:saturate(1) brightness(1)}
.anta{position:absolute;top:0;bottom:0;width:50%;background-size:cover;background-position:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform 2.6s cubic-bezier(.65,0,.25,1);box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.anta.sx{left:0;background-image:url(anta-sx.webp);transform-origin:0 50%}
.anta.dx{right:0;background-image:url(anta-dx.webp);transform-origin:100% 50%}
body.aperto .anta.sx{transform:rotateY(-104deg)}
body.aperto .anta.dx{transform:rotateY(104deg)}
.iscrizione{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-style:italic;font-size:clamp(14px,3.6vw,17px);color:#e9e4d2;text-shadow:0 1px 6px rgba(0,0,0,.8);transition:opacity .8s}
body.aperto .iscrizione{opacity:0}

.apri{position:relative;z-index:6;margin-top:26px;padding:14px 30px;border:1px solid var(--oro);font-family:var(--incisa);font-size:18px;letter-spacing:.14em;color:var(--oro);transition:background .4s,color .4s}
.apri:hover{background:var(--oro);color:var(--notte)}
body.aperto .apri{opacity:0;pointer-events:none;transition:opacity .6s}

/* la locandina sorge dal giardino dopo l'apertura */
.locandina{position:relative;z-index:6;margin-top:0;text-align:center;width:100%;max-height:0;overflow:hidden;opacity:0;transition:opacity 1.6s ease 1.8s,max-height 0s linear 1.6s}
body.aperto .locandina{max-height:1400px;opacity:1;margin-top:-56px}
.monogramma{position:relative;display:inline-block;font-family:var(--serif);font-weight:400;font-size:clamp(88px,26vw,150px);line-height:1;letter-spacing:.02em;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.monogramma .parola{display:inline-block;background:linear-gradient(100deg,#b8612f 0%,#d9895a 34%,#efe0b8 56%,#fff6de 62%,#efe0b8 74%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.monogramma .amp{position:absolute;left:58%;bottom:-.28em;transform:translateX(-50%);font-size:.42em;color:var(--oro-chiaro);-webkit-text-fill-color:var(--oro-chiaro)}
.nomi{font-family:var(--voce);font-size:clamp(30px,8vw,42px);color:var(--oro);margin-top:22px}
.triade{font-size:clamp(24px,6.4vw,32px);font-style:italic;color:var(--oro-chiaro);margin-top:6px}
.data{font-family:var(--incisa);font-size:clamp(36px,10vw,56px);letter-spacing:.1em;color:var(--oro);margin:10px 0 4px}
.data i{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--carminio);vertical-align:middle;margin:0 .25em}
.lead{font-size:clamp(18px,4.7vw,21px);color:#efe3c6;margin-top:18px}

/* ================= occhi nel buio ================= */
.occhio{position:absolute;width:46px;height:22px;z-index:2;pointer-events:none;opacity:0;transition:opacity 2.5s ease}
body.aperto .occhio.visto{opacity:.9}
.occhio svg{width:100%;height:100%;overflow:visible}
.occhio .palpebra{transform-origin:50% 50%;animation:battito 7s infinite}
.occhio:nth-of-type(2n) .palpebra{animation-duration:9.5s;animation-delay:-3s}
@keyframes battito{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.06)}}

/* ================= uccelli che parlano ================= */
.uccello{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin:34px auto 0}
.uccello button{width:92px;height:92px;border-radius:50%;padding:0;background:var(--muschio);box-shadow:0 0 0 1px var(--oro-scuro),0 0 0 5px var(--notte),0 0 0 6px var(--oro-scuro),0 14px 28px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.uccello button img{width:100%;height:100%;border-radius:50%}
.uccello button:hover{transform:rotate(-6deg) scale(1.05)}
.uccello .suggerimento{font-style:italic;font-size:15px;color:var(--oro);opacity:.6;margin-top:10px}
.fumetto{max-width:300px;margin-top:14px;font-family:var(--voce);font-size:24px;line-height:1.3;color:var(--oro-chiaro);opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s}
.uccello.parla .fumetto{opacity:1;transform:none}
.uccello.parla .suggerimento{display:none}

/* ================= PROLOGO ================= */
#prologo p{color:#efe3c6}
#prologo p+p{margin-top:1em}
.inciso{font-family:var(--incisa);font-size:clamp(19px,4.8vw,23px);line-height:1.4;letter-spacing:.03em;color:var(--oro);margin:1.4em auto}
.caccia{margin-top:2.4em;font-style:italic;color:var(--oro);opacity:.85}

/* ================= LUOGO ================= */
.carta{position:relative;background:var(--crema);color:var(--inchiostro);width:min(460px,92vw);margin:0 auto;padding:78px 26px 30px;
  background-image:radial-gradient(rgba(120,90,60,.06) 1px,transparent 1px);background-size:4px 4px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.carta .sigillo{position:absolute;top:-48px;left:50%;width:100px;height:100px;transform:translateX(-50%);filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.carta .intestazione{color:var(--inchiostro)}
.carta .luogo{font-size:22px;margin-top:12px}
.carta .indirizzo{font-size:19px;margin-top:4px}
.mappa{margin-top:20px;width:100%;aspect-ratio:4/3;border:1px solid #cdb9a1;filter:sepia(.3) saturate(.85);background:#e8dccd}
.carta .rotta{display:inline-block;margin-top:18px;padding:12px 24px;border:1px solid var(--inchiostro);font-family:var(--incisa);letter-spacing:.1em;color:var(--inchiostro);text-decoration:none}
.carta .rotta:hover{background:var(--inchiostro);color:var(--crema)}

/* ================= PROGRAMMA: candele ================= */
.atti{list-style:none;text-align:left;max-width:520px;margin:40px auto 0}
.atto{display:grid;grid-template-columns:34px 64px 1fr;gap:0 14px;align-items:start;padding:14px 0}
.candela{width:34px;height:64px;overflow:visible}
.candela .fiamma{opacity:0;transform-origin:17px 20px;transform:scale(.3);transition:opacity .8s,transform .8s}
.candela .alone{opacity:0;transition:opacity 1.2s}
.atto.acceso .fiamma{opacity:1;transform:scale(1);animation:tremola 2.8s ease-in-out infinite}
.atto.acceso .alone{opacity:.55}
@keyframes tremola{0%,100%{transform:scale(1) skewX(0)}30%{transform:scale(1.04,.96) skewX(3deg)}60%{transform:scale(.97,1.05) skewX(-2deg)}}
.atto time{font-family:var(--incisa);font-size:24px;color:var(--oro);padding-top:14px}
.atto h3{font-family:var(--incisa);font-weight:400;font-size:clamp(20px,5.2vw,24px);color:var(--oro);padding-top:12px;line-height:1.25}
.atto p{font-size:18px;color:#e2d4b2;margin:4px 0 0}
.atto time,.atto h3,.atto p{transition:opacity 1s}
.atto:not(.acceso) time,.atto:not(.acceso) h3,.atto:not(.acceso) p{opacity:.45}
.atto.ora h3::after{content:" — сейчас";font-style:italic;color:var(--carminio)}

/* ================= DRESS CODE ================= */
#costumi{background:linear-gradient(var(--notte) 0,var(--crema) 70px,var(--crema) 100%);color:var(--inchiostro)}
#costumi .intestazione{color:var(--cannella)}
.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:460px;margin:30px auto 0}
.campione{width:116px;background:#fff;padding:8px 8px 10px;text-align:left;box-shadow:0 10px 22px rgba(60,40,20,.2);transform:rotate(var(--r))}
.campione i{display:block;height:88px;background:var(--c)}
.campione b{display:block;font-family:Arial,Helvetica,sans-serif;font-size:11px;margin-top:8px;color:#111}
.campione span{display:block;font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#333;line-height:1.35}
.regole{margin-top:30px}
.regole p+p{margin-top:.9em}
.regole .voce{color:var(--inchiostro);margin-top:1em}
#costumi .uccello button{box-shadow:0 0 0 1px #b39a6a,0 0 0 5px var(--crema),0 0 0 6px #b39a6a,0 14px 28px rgba(60,40,20,.3)}
#costumi .uccello .suggerimento,#costumi .fumetto{color:var(--inchiostro)}

/* ================= RSVP ================= */
#risposta{background:linear-gradient(var(--crema) 0,var(--notte-2) 70px,var(--notte) 100%)}
.modulo{width:min(480px,94vw);margin:30px auto 0;text-align:left}
.segno{border:1px solid rgba(216,191,134,.3);padding:20px;margin-bottom:16px;background:rgba(18,26,21,.6)}
.segno legend{font-family:var(--incisa);font-size:15px;letter-spacing:.08em;color:var(--oro);padding:0 8px}
.segno .domanda{font-size:21px;color:var(--oro-chiaro);line-height:1.3;margin-bottom:12px}
.campo{width:100%;background:transparent;border:0;border-bottom:1px solid var(--oro-scuro);color:#f6ead0;font:inherit;font-size:19px;padding:8px 2px;outline:none}
.campo:focus{border-color:var(--oro)}
.campo::placeholder{color:rgba(216,191,134,.45)}
.scelte{display:flex;flex-direction:column;gap:10px}
.scelte label{display:flex;align-items:center;gap:12px;font-size:19px;color:#efe0bd;cursor:pointer}
.scelte input{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:none;border:1px solid var(--oro);transform:rotate(45deg)}
.scelte input:checked{background:var(--oro);box-shadow:0 0 10px rgba(216,191,134,.7)}
.invia{width:100%;margin-top:6px;padding:15px;border:1px solid var(--oro);font-family:var(--incisa);font-size:18px;letter-spacing:.12em;color:var(--oro);transition:background .4s,color .4s}
.invia:hover{background:var(--oro);color:var(--notte)}
.errore{color:#f0a37e;font-size:17px;margin-top:10px;min-height:1.3em;text-align:center}
.famiglia-nota{font-size:17px;font-style:italic;color:var(--oro);opacity:.8;margin-bottom:12px}
.membro{border-top:1px solid rgba(216,191,134,.25);padding:16px 0 6px;margin-top:10px}
.membro-testa{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.membro-testa b{font-family:var(--incisa);font-weight:400;font-size:17px;letter-spacing:.06em;color:var(--oro)}
.membro-togli{font-size:15px;font-style:italic;color:#f0a37e;opacity:.85}
.membro .scelte{margin:12px 0}
.membro .riga{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
.membro .solo-adulti[hidden]{display:none}
.aggiungi{margin-top:10px;padding:10px 16px;border:1px dashed var(--oro);font-size:18px;color:var(--oro);width:100%}
.aggiungi:hover{background:rgba(216,191,134,.08)}
.accolto{display:none;text-align:center;padding:30px 10px}
form.fatto{display:none}
form.fatto+.accolto{display:block}

/* ================= attesa ================= */
.contatore{display:flex;justify-content:center;gap:clamp(16px,6vw,40px);margin-top:22px}
.contatore b{display:block;font-family:var(--incisa);font-weight:400;font-size:clamp(46px,13vw,72px);line-height:1;color:var(--oro);font-variant-numeric:tabular-nums}
.contatore span{font-style:italic;font-size:17px;color:var(--oro);opacity:.75}
footer{text-align:center;padding:24px 20px 40px;font-size:15px;color:var(--oro-scuro)}

/* ================= tre segni nascosti ================= */
.segreto{display:inline-block;width:26px;height:26px;vertical-align:middle;opacity:.55;transition:opacity .4s,transform .6s}
.segreto:hover{opacity:1}
.segreto svg{width:100%;height:100%}
.segreto.trovato{opacity:1;transform:scale(1.4) rotate(360deg);pointer-events:none}
.bottino{position:fixed;right:14px;bottom:14px;z-index:40;display:none;align-items:center;gap:8px;padding:8px 12px;background:rgba(18,26,21,.85);border:1px solid var(--oro-scuro);font-size:15px;color:var(--oro)}
.bottino.attivo{display:flex}
.bottino i{width:12px;height:12px;border:1px solid var(--oro);transform:rotate(45deg)}
.bottino i.pieno{background:var(--carminio);border-color:var(--carminio)}
.rivelazione{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(8,12,10,.86);backdrop-filter:blur(3px)}
.rivelazione.aperta{display:flex}
.pergamena{max-width:460px;background:var(--crema);color:var(--inchiostro);padding:40px 28px 30px;text-align:center;box-shadow:0 40px 80px rgba(0,0,0,.6);animation:srotola 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes srotola{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.pergamena p{font-size:20px;margin-top:.8em}
.pergamena .voce{color:var(--inchiostro);margin-top:1em}
.pergamena button{margin-top:22px;padding:10px 22px;border:1px solid var(--inchiostro);font-family:var(--incisa);letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  /* con «Riduci movimento» l'apertura resta visibile, ma come dissolvenza: niente rotazioni né scorrimenti */
  .anta,.drappo{transition:opacity 2.2s ease!important;transform:none!important}
  body.aperto .anta,body.aperto .drappo{opacity:0}
  .trittico .interno img{transition:filter 2.2s ease!important;transform:none!important}
  .locandina{transition:opacity 1.6s ease 1.2s,max-height 0s linear 1.2s!important}
  .occhio{transition:opacity 2.5s ease!important}
}

/* ================= indice dei capitoli (tutte le pagine) ================= */
.indice{position:relative;z-index:20;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:14px 16px 0;font-size:15px;color:var(--oro)}
.indice a,.indice b,.indice .sigillata{text-decoration:none;color:var(--oro);white-space:nowrap}
.indice .num{font-family:var(--incisa);letter-spacing:.06em;opacity:.8}
.indice b{color:var(--oro-chiaro);border-bottom:1px solid var(--oro)}
.indice a:hover{color:var(--oro-chiaro)}
.indice .sigillata{opacity:.45}.indice .sigillata i{font-size:13px}
.prosegue{padding-bottom:40px}
.prosegue a{display:inline-block;margin-top:18px;padding:14px 30px;border:1px solid var(--oro);font-family:var(--incisa);font-size:18px;letter-spacing:.12em;color:var(--oro);text-decoration:none}
.prosegue a:hover{background:var(--oro);color:var(--notte)}

/* ================= Глава II — Глаза ================= */
.occhio-grande{width:min(78vw,420px);margin:26px auto 10px;display:block;overflow:visible}
.occhio-grande .palpebra-su,.occhio-grande .palpebra-giu{transition:transform 2.4s cubic-bezier(.7,0,.2,1) .4s}
.occhio-grande .palpebra-su{transform:translateY(0)}.occhio-grande .palpebra-giu{transform:translateY(0)}
body.sveglio .occhio-grande .palpebra-su{transform:translateY(-58px)}
body.sveglio .occhio-grande .palpebra-giu{transform:translateY(58px)}
.caricamento{width:min(480px,94vw);margin:30px auto 0;text-align:left}
.scegli{display:block;width:100%;padding:18px;border:1px dashed var(--oro);text-align:center;font-size:19px;color:var(--oro);cursor:pointer}
.scegli input{position:absolute;opacity:0;width:1px;height:1px}
.anteprime{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.anteprime figure{position:relative;margin:0;width:96px;height:96px;border:1px solid var(--oro-scuro)}
.anteprime img{width:100%;height:100%;object-fit:cover;display:block}
.anteprime button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--carminio);color:#fff;font-size:15px;line-height:24px}
.consenso{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:17px;color:#efe0bd}
.consenso input{margin-top:5px;width:18px;height:18px;flex:none}
@media (prefers-reduced-motion:reduce){.occhio-grande .palpebra-su,.occhio-grande .palpebra-giu{transition:opacity 1.5s!important}body.sveglio .occhio-grande .palpebra-su,body.sveglio .occhio-grande .palpebra-giu{transform:none;opacity:0}}

/* ===== LIVE (agente C) ===== */
/* Глава II: testo, istruzioni, stati del modulo */
.glaz-scena .voce{margin-top:4px}
.testo-glava{margin-top:22px}
.testo-glava p+p{margin-top:.8em}
.come-fare{width:min(480px,94vw);margin:26px auto 0;padding:0;list-style:none;counter-reset:passo;text-align:left}
.come-fare li{counter-increment:passo;position:relative;padding:8px 0 8px 44px;border-bottom:1px solid rgba(143,118,68,.35);font-size:19px}
.come-fare li::before{content:counter(passo,upper-roman);position:absolute;left:0;top:8px;width:32px;font-family:var(--incisa);color:var(--carminio);text-align:center}
.come-fare b{font-weight:500;color:var(--oro)}
.scadenza{margin-top:18px;font-style:italic;color:var(--oro)}
.scadenza b{font-family:var(--incisa);font-style:normal;font-weight:400;letter-spacing:.06em;color:var(--oro-chiaro)}
.segno-campo{display:block;margin-bottom:20px;font-family:var(--incisa);font-size:15px;letter-spacing:.08em;color:var(--oro)}
.scegli.pieno{opacity:.55;cursor:default}
.caricamento .invia{margin-top:22px}
.caricamento .invia:disabled{opacity:.6;cursor:progress}
.esito{min-height:1.6em;margin-top:12px;font-size:17px;font-style:italic;color:var(--oro)}
.esito[data-tipo=errore]{color:#e98b72}
.esito[data-tipo=ok]{color:var(--oro-chiaro)}
.accolto{width:min(480px,94vw);margin:30px auto 0;padding:26px 20px;border:1px solid var(--oro);animation:accolto 1.1s cubic-bezier(.2,.8,.2,1) both}
.accolto .aggiungi{margin-top:18px}
/* Глаза: il riquadro di conferma è governato dall'attributo hidden (non da form.fatto+ come nel RSVP) */
.glaza .accolto:not([hidden]){display:block}
@keyframes accolto{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* /tavolo: pagina dei QR, una mano sola, pollice in basso */
body.tavolo{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.tavolo-main{max-width:520px;margin:0 auto;padding:22px 18px 0;text-align:center}
.tavolo-testa .cartiglio{margin-bottom:6px}
.presenti{min-height:1.4em;margin-top:6px;font-size:16px;font-style:italic;color:var(--oro);opacity:.8}
.tavolo-scatto{position:relative;margin-top:18px}
.camera{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:min(74vw,260px);aspect-ratio:1;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--muschio),var(--notte-2));color:var(--oro);cursor:pointer;
  box-shadow:0 0 0 1px var(--oro),0 0 0 9px var(--notte),0 0 0 10px var(--oro-scuro),0 24px 50px rgba(0,0,0,.55);transition:transform .3s}
.camera:active{transform:scale(.96)}
.camera input{position:absolute;opacity:0;width:1px;height:1px}
.camera svg{width:38%;height:auto}
.camera span{font-family:var(--incisa);font-size:21px;letter-spacing:.1em}
.camera.invio{animation:respiro 1.2s ease-in-out infinite}
@keyframes respiro{50%{box-shadow:0 0 0 1px var(--oro),0 0 0 9px var(--notte),0 0 0 10px var(--carminio),0 0 60px rgba(216,191,134,.45)}}
.tavolo-nome{margin-top:26px;text-align:center}
.tavolo .consenso{font-size:15px;text-align:left}
.caricamento .consenso input,.tavolo .consenso input{accent-color:var(--oro)}
.volo{position:absolute;left:50%;top:0;width:120px;height:120px;margin-left:-60px;background:center/cover no-repeat;border:3px solid var(--crema);opacity:0;pointer-events:none}
.volo.vola{animation:vola 1.4s cubic-bezier(.3,.7,.3,1) both}
@keyframes vola{0%{opacity:0;transform:translateY(60px) scale(.6) rotate(-6deg)}25%{opacity:1}100%{opacity:0;transform:translateY(420px) scale(.35) rotate(8deg)}}
.muro{margin-top:34px;padding-bottom:20px}
.muro-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.muro-griglia figure{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:var(--notte-2);animation:accolto .8s ease both}
.muro-griglia img{width:100%;height:100%;object-fit:cover}
.muro-griglia figcaption{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:12px;line-height:1.3;background:rgba(18,26,21,.7);color:var(--oro-chiaro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reazioni{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:rgba(18,26,21,.92);border-top:1px solid var(--oro-scuro);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reazioni button{width:46px;height:46px;font-size:26px;line-height:46px;border-radius:50%;transition:transform .2s}
.reazioni button.premuto{animation:premuto .35s ease}
@keyframes premuto{50%{transform:scale(1.35)}}
.pioggia{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
.pioggia span{position:absolute;bottom:70px;font-size:30px;animation:sale var(--d,3s) ease-out forwards}
@keyframes sale{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-70vh) scale(1.2)}}
@media (prefers-reduced-motion:reduce){
  .accolto,.muro-griglia figure{animation:none!important}
  .camera.invio{animation:none!important;opacity:.7}
  .volo.vola{animation:none!important}
}
.muro-griglia .cuore{position:absolute;top:4px;right:4px;min-width:44px;min-height:34px;padding:4px 8px;border:0;border-radius:17px;
  background:rgba(18,26,21,.72);color:var(--oro-chiaro);font:inherit;font-size:15px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.muro-griglia .cuore.mio{color:#f0a37e;background:rgba(176,64,42,.85);color:#fff}
.muro-griglia .cuore:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
@media (prefers-reduced-motion: no-preference){.muro-griglia .cuore.mio{animation:battito .35s ease}}
@keyframes battito{50%{transform:scale(1.25)}}
/* ===== fine LIVE ===== */

/* ===== QUESTIONARI (agente D) ===== */
/* Глава II «Начало пути» (/put) e IV «Путники» (/putniki): riusano .segno, .scelte, .campo, .invia, .esito, .accolto */
.sentiero,.piuma{width:min(78vw,380px);margin:22px auto 8px;display:block;overflow:visible}
.sentiero .strada{stroke-dashoffset:0}
.sentiero .uccellino{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .sentiero .strada{animation:strada 2.8s cubic-bezier(.4,0,.2,1) both}
  .sentiero .uccellino{animation:battito 1.6s ease-in-out infinite}
  .sentiero .u2{animation-delay:.4s}.sentiero .u3{animation-delay:.8s}
  .piuma .riga-scritta{stroke-dasharray:120;animation:scrivi 2.4s cubic-bezier(.4,0,.2,1) .4s both}
}
@keyframes strada{from{stroke-dashoffset:260;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes battito{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(.55) translateY(-3px)}}
@keyframes scrivi{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.questionario{margin-top:30px}
.questionario .segno-campo{font-family:var(--serif);font-size:18px;letter-spacing:0;color:var(--oro-chiaro);line-height:1.35}
.questionario .segno-campo small{color:var(--oro);opacity:.8}
.questionario .segno-campo .campo{margin-top:4px}
.questionario .spazio{margin-top:18px}
.questionario .domanda{margin:4px 0 10px}
/* pulsanti di scelta grandi: tutta la riga è il bersaglio del tocco (min 48px) */
.questionario .scelte label{min-height:48px;padding:6px 10px;border:1px solid rgba(216,191,134,.18)}
.questionario .scelte label:has(input:checked){border-color:var(--oro);background:rgba(216,191,134,.08)}
.questionario textarea.campo{resize:vertical;min-height:3.2em;line-height:1.45;border:1px solid var(--oro-scuro);padding:10px 12px;margin-top:6px}
.questionario textarea.campo:focus{border-color:var(--oro)}
.questionario input[type=date].campo{-webkit-appearance:none;appearance:none;min-height:46px;color-scheme:dark;text-align:left}
.questionario input[type=date].campo::-webkit-date-and-time-value{text-align:left}
.questionario .date{display:grid;gap:4px}
@media (min-width:560px){.questionario .date{grid-template-columns:1fr 1fr;gap:18px}}
.contatore{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 10px}
.contatore button{width:52px;height:52px;border:1px solid var(--oro);font-size:28px;line-height:1;color:var(--oro)}
.contatore button:active{background:rgba(216,191,134,.15)}
.contatore input.campo{width:72px;text-align:center;font-family:var(--incisa);font-size:30px;border-bottom-color:var(--oro);-moz-appearance:textfield}
.contatore input::-webkit-outer-spin-button,.contatore input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.questionario .invia{margin-top:22px}
.questionario .invia:disabled{opacity:.6;cursor:progress}
.questionario[hidden],.sigillo-pagina[hidden],.accolto[hidden]{display:none}
/* .accolto è display:none nella sezione RSVP (mostrato da form.fatto+.accolto): qui lo governa l'attributo hidden */
.questionario~.accolto:not([hidden]){display:block}
.sigillo-pagina{width:min(480px,94vw);margin:30px auto 0;padding:26px 20px;border:1px dashed var(--oro-scuro);text-align:center}
.sigillo-pagina .voce{margin-bottom:10px}
/* ===== fine QUESTIONARI ===== */

/* ===== Telegram: inviti al bot (vesti dei nuovi capitoli), mai mostrati dentro Telegram ===== */
.in-telegram .solo-fuori-tg{display:none!important}
.indice a.tg-invito{opacity:.75;font-style:italic}
.accolto .tg-invito{display:inline-block;margin-top:14px;padding:10px 18px;border:1px solid var(--oro);color:var(--oro);
  font-family:var(--incisa);letter-spacing:.06em;text-decoration:none}
/* ===== fine Telegram ===== */