/* ============================================================
   INVITISSIMO · MOTORE 1.0 · motore.css
   Dottrina della fluidità (architettura §5): ciò che si muove di
   continuo anima SOLO transform e opacity. Niente backdrop-filter,
   niente blend, niente filter/mask animati.
   Tutti i colori vengono dal tema: qui non esistono valori estetici.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* LA RADICE NON SI BLOCCA. Era html,body{height:100%;overflow:hidden}, il
   blocco classico dell'app a schermo intero: su Chrome per iOS (iPhone 13,
   02/09/2026, invito pubblicato aperto da WhatsApp) lasciava una fascia nera
   in fondo, il contenuto spostato in su con l'hero tagliato, e lo
   scorrimento fermo; Safari sullo stesso telefono e Chrome su S24+ no. La
   lettura: con la radice bloccata, la barra del browser e il contenuto si
   desincronizzano e nessun gesto dell'ospite li rimette in fase — un
   documento scorrevole ce l'ha. Quindi html e body restano scorrevoli, e il
   body è alto quanto il viewport GRANDE (100lvh): il documento scorre di
   poco — esattamente lo spazio che la barra libera ritirandosi, come ogni
   pagina web — e per il resto non si muove: le scene sono fisse, e l'invito
   aperto scorre da sé dentro #mv-invito (overscroll-behavior:contain: il suo
   scorrimento non si incatena al documento). Il fondale è già 100lvh.
   Diagnosi e alternative a confronto: prova/banco-viewport.html. */
html{min-height:100%;overscroll-behavior:none}
body{min-height:100vh;min-height:100lvh}
/* E LA BARRA DELLA RADICE NON SI VEDE (rilievo di Mirko, 03/09/2026, Chrome
   su iPhone 13). È l'effetto collaterale della riga qui sopra: finché la
   radice era bloccata il documento non scorreva e nessuna barra esisteva;
   adesso scorre — di quel poco che la barra del browser libera ritirandosi —
   e comparivano i pochi millimetri di barra sul bordo destro. Dentro l'invito
   la barra era già spenta (#mv-invito, più sotto): questa è la stessa scelta
   portata sulla radice, perché in un invito non c'è niente da governare a
   mano — la scena è a schermo intero e il documento scorre da sé. Si spegne
   in due modi perché sono due meccanismi diversi: `scrollbar-width` è quello
   standard (WebKit dal 18.2, Blink da sempre), lo pseudo-elemento copre i
   WebKit più vecchi. Nessuno dei due tocca lo scorrimento: solo il disegno. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
/* overscroll-behavior:none spegne il pull-to-refresh: ricaricare l'invito a
   metà lettura è il guasto peggiore. Su Android la barra del browser si
   ritira scorrendo e torna scorrendo in su fino in cima; il gesto oltre la
   cima — quello che ricaricherebbe la pagina — è spento. */
body{background:var(--bg);color:var(--ink);font-family:var(--font-testo);
  overscroll-behavior:none;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
svg{display:block}
img{display:block;max-width:100%}

/* ---------------- SFONDO (quasi tutto statico) ---------------- */
/* height 100lvh: quando la barra del browser si ritira il viewport si
   allarga — il fondale copre sempre quello grande, mai fasce scoperte */
.mv-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  height:100vh;height:100lvh;
  background-color:var(--bg);
  background-image:var(--texture),var(--texture);
  background-size:var(--texture-dim-1),var(--texture-dim-2);
  background-position:0 0,43px 91px}

.mv-fade{position:absolute;inset:0;
  background:
    radial-gradient(80% 52% at 88% -8%, var(--acc-velo-1), transparent 66%),
    radial-gradient(74% 48% at 6% 108%, var(--acc-velo-2), transparent 66%),
    radial-gradient(120% 88% at 50% 48%,
      rgba(var(--fondo-rgb,6,2,10),.985) 0%,rgba(var(--fondo-rgb,6,2,10),.94) 26%,
      rgba(var(--fondo-rgb,6,2,10),.66) 50%,rgba(var(--fondo-rgb,6,2,10),.20) 72%,
      rgba(var(--fondo-rgb,6,2,10),0) 90%)}

.mv-aur{position:absolute;border-radius:50%}
.mv-aur1{width:96vw;height:46vh;left:-12vw;top:-12vh;
  background:radial-gradient(closest-side,var(--acc-aur-1),transparent 72%);
  animation:mv-aur1 34s ease-in-out infinite alternate}
.mv-aur2{width:88vw;height:42vh;right:-14vw;bottom:-12vh;
  background:radial-gradient(closest-side,var(--acc-aur-2),transparent 72%);
  animation:mv-aur2 44s ease-in-out infinite alternate}
@keyframes mv-aur1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,6vh,0) scale(1.2)}}
@keyframes mv-aur2{from{transform:translate3d(0,0,0) scale(1.12)}to{transform:translate3d(-8vw,-5vh,0) scale(.94)}}

/* onda di bagliori: il ritardo dipende dall'altezza, l'onda scende da sola */
.mv-glints{position:absolute;inset:0}
.mv-glints i{position:absolute;display:block;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--fx-cuore,#fff) 0 20%,var(--fx-scia,rgba(255,216,238,.92)) 40%,var(--fx-scia-fine,rgba(255,90,158,0)) 74%);
  animation:mv-glint var(--onda,3.4s) linear var(--dl) infinite}
.mv-glints i.g2{background:radial-gradient(circle,var(--fx-cuore,#fff) 0 20%,var(--fx-scia-oro,rgba(255,232,196,.92)) 40%,var(--fx-scia-oro-fine,rgba(255,170,90,0)) 74%)}
.mv-glints i.st{border-radius:0;background:var(--stella) center/contain no-repeat;
  animation-name:mv-glintStar}
@keyframes mv-glint{
  0%{opacity:0;transform:scale(.3)}
  4%{opacity:1;transform:scale(1.35)}
  9%{opacity:.5;transform:scale(.9)}
  19%{opacity:0;transform:scale(.35)}
  100%{opacity:0;transform:scale(.3)}}
@keyframes mv-glintStar{
  0%{opacity:0;transform:scale(.12) rotate(-22deg)}
  5%{opacity:.9;transform:scale(1) rotate(2deg)}
  21%{opacity:0;transform:scale(.3) rotate(24deg)}
  100%{opacity:0;transform:scale(.12) rotate(-22deg)}}

.mv-tw{position:absolute;inset:0}
.mv-tw i{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--fx-cuore,#fff) 0 24%,var(--fx-scia,rgba(255,200,228,.9)) 42%,var(--fx-scia-fine,rgba(255,90,158,0)) 74%);
  animation:mv-tw 5s ease-in-out infinite}
@keyframes mv-tw{0%,100%{opacity:0;transform:scale(.35)}50%{opacity:1;transform:scale(1.7)}}

/* Lo strato «flora»: il motore semina (posizione, ritardo e durata inline,
   più --fs e --fr da comporre nelle keyframes), il tema veste — forma,
   misura e animazione stanno TUTTE nel CSS del tema, solo transform e
   opacity. Qui solo la struttura: senza --flora-n lo strato non esiste nel
   DOM, e l'opacità di partenza è 0 perché un tema che dimentica
   l'animazione non lasci francobolli fermi sul fondale. */
.mv-flora{position:absolute;inset:0}
.mv-flora i{position:absolute;display:block;opacity:0}

/* La vignetta è un'immagine intera, non un colore: un tema di carta la vuole
   chiara, o non la vuole affatto. Il valore di ripiego è quello di sempre. */
.mv-vig{position:absolute;inset:0;
  background:var(--vignetta,
    radial-gradient(128% 96% at 50% 46%,transparent 46%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.5) 100%))}

#mv-fx{position:fixed;inset:0;z-index:45;pointer-events:none;width:100%;height:100%}
/* il cuore del lampo è del tema (fase A-bis): il bianco cablato leggeva
   grigio-freddo sul blu mezzanotte dell'Elegante. Il ripiego è di sempre. */
.mv-flash{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;
  background:radial-gradient(60% 40% at 50% 40%,var(--flash-cuore,rgba(255,255,255,.8)),var(--busta-riflesso) 38%,transparent 74%)}
.mv-flash.on{animation:mv-flash 1.1s ease-out forwards}
@keyframes mv-flash{0%{opacity:0;transform:scale(.4)}15%{opacity:.9}100%{opacity:0;transform:scale(1.8)}}

/* ---------------- FALLBACK STATICO ----------------
   Visibile dove il motore non arriva in fondo: JS spento, browser che non
   sa leggere motore.js, avvio fallito (§6). Il motore lo nasconde subito
   (hidden, che qui deve vincere sul display) e lo rimuove a scena pronta. */
.mv-fatti[hidden]{display:none}
.mv-fatti{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:28px}
.mv-fatti p{font-family:var(--font-testo);font-weight:300;font-size:17px;
  line-height:1.5;color:var(--ink)}
.mv-fatti .chi{font-family:var(--font-corsivo);font-size:34px;line-height:1.3}
.mv-fatti a{color:var(--oro-2)}

/* ---------------- ETICHETTE MAIUSCOLE ----------------
   La coppia spaziatura/rientro è un invariante: l'ultima lettera resta
   centrata solo se padding-left = letter-spacing, quindi è una sola
   variabile (--ls). Le eccezioni (firma, CTA) rientrano sul figlio. */
.mv-hint span,.mv-occhiello,.mv-cd i,.mv-btn span,.mv-pan-occhiello,.mv-pan-chiudi,
.mv-tappa-titolo,.mv-tappa-mappa span,.mv-lista-link span,.mv-iban-copia{
  font-family:var(--font-etichetta);text-transform:uppercase;
  letter-spacing:var(--ls,.2em);padding-left:var(--ls,.2em)}

/* ---------------- SCENE ---------------- */
/* niente height esplicita: inset:0 segue il viewport anche quando la
   barra del browser si ritira (con 100svh restava una fascia scoperta) */
.mv-scena{position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%}

/* ============ APERTURA · BUSTA-SIGILLO ============ */
#mv-apertura{perspective:1400px;perspective-origin:50% 40%;
  transition:opacity .65s ease,transform .95s var(--ease)}
#mv-apertura.out{opacity:0;transform:scale(1.4);pointer-events:none}
#mv-apertura.noanim,#mv-apertura.noanim *{transition:none!important;animation:none!important}

.mv-busta{position:relative;width:min(78vw,326px);height:0;padding-bottom:min(51.5vw,215px);
  perspective:1100px;perspective-origin:50% 28%;cursor:pointer;
  animation:mv-float 6.5s ease-in-out infinite}
@keyframes mv-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
.mv-busta>*{position:absolute;inset:0;width:100%;height:100%}
.mv-busta svg{overflow:visible}

.mv-busta-alone{position:absolute;left:50%;top:56%;width:168%;height:148%;
  transform:translate3d(-50%,-50%,0);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--acc-alone),transparent 70%);
  animation:mv-alone 4.4s ease-in-out infinite}
@keyframes mv-alone{0%,100%{opacity:.5}50%{opacity:1}}

/* stop dei gradienti: i colori vengono dal tema */
.mv-g-corpo-0{stop-color:var(--busta-corpo-0)} .mv-g-corpo-1{stop-color:var(--busta-corpo-1)} .mv-g-corpo-2{stop-color:var(--busta-corpo-2)}
.mv-g-fronte-0{stop-color:var(--busta-fronte-0)} .mv-g-fronte-1{stop-color:var(--busta-fronte-1)} .mv-g-fronte-2{stop-color:var(--busta-fronte-2)}
.mv-g-falda-0{stop-color:var(--busta-falda-0)} .mv-g-falda-1{stop-color:var(--busta-falda-1)} .mv-g-falda-2{stop-color:var(--busta-falda-2)}
.mv-g-fodera-0{stop-color:var(--busta-fodera-0)} .mv-g-fodera-1{stop-color:var(--busta-fodera-1)} .mv-g-fodera-2{stop-color:var(--busta-fodera-2)}
.mv-g-oro-0{stop-color:var(--oro-1)} .mv-g-oro-1{stop-color:var(--oro-3)} .mv-g-oro-2{stop-color:var(--oro-scuro)}
.mv-g-oro-3{stop-color:var(--oro-2)} .mv-g-oro-4{stop-color:var(--oro-1)}
.mv-g-sig-0{stop-color:var(--sigillo-0)} .mv-g-sig-1{stop-color:var(--sigillo-1)}
.mv-g-sig-2{stop-color:var(--sigillo-2)} .mv-g-sig-3{stop-color:var(--sigillo-3)}
/* la fermata finale del riflesso è lo stesso colore del tema portato a zero:
   con `transparent` (nero trasparente) il riflesso sfumava passando dal nero,
   e su una busta chiara si vedeva l'alone sporco */
.mv-g-rifl-0{stop-color:var(--busta-riflesso)}
.mv-g-rifl-1{stop-color:var(--busta-riflesso-fine,var(--busta-riflesso))}

.mv-corpo{z-index:1}
.mv-biglietto{z-index:2;left:6%;right:6%;top:5%;bottom:6%;width:auto;height:auto;
  border-radius:7px;background:linear-gradient(180deg,var(--biglietto-0),var(--biglietto-1));
  box-shadow:var(--biglietto-ombra,0 -8px 26px rgba(0,0,0,.55));
  display:flex;align-items:flex-start;justify-content:center;
  transition:transform .8s var(--ease) .85s}
.mv-biglietto::after{content:'';position:absolute;inset:9px;
  border:1px solid var(--biglietto-filo);border-radius:3px}
/* Il riquadro dell'hero è stretto sul numero, quindi la larghezza è in
   percentuale del riquadro nuovo. Il margine alto colloca il 18 al centro
   ottico della fascia di cartoncino che spunta — quella chiusa in basso
   dalla punta della falda (scelta di Mirko, 27/08). Non scendere oltre: più
   in basso sta, più tardi emerge dalla busta, e la scena se ne va a 1,62 s. */
.mv-biglietto .mv-bigl-hero{width:23%;margin-top:21%;opacity:.92}
/* nel biglietto piccolo l'ombra a piena forza pesa troppo */
.mv-bigl-hero .h3-ombra{opacity:.5}
.mv-bigl-hero .h3-suolo{opacity:.45}
/* senza blocco hero il biglietto porta i nomi in corsivo, inchiostro su
   cartoncino come una partecipazione stampata (Mirko, 28/08: niente 3D qui) */
.mv-biglietto .mv-bigl-nomi{width:84%;margin-top:16%;
  font-family:var(--font-corsivo);font-size:clamp(19px,6.6vw,26px);line-height:1.28;
  text-align:center;color:var(--biglietto-inchiostro,#4a2333)}
.mv-bigl-nomi .n{white-space:nowrap}
.mv-busta.go .mv-biglietto{transform:translateY(-66%) scale(1.03)}

.mv-fronte{z-index:3}
.mv-falda{z-index:6;transform-style:preserve-3d;transform-origin:top center;
  transition:transform 1.02s var(--flap) .28s,z-index 0s linear .70s}
/* Le due facce della falda. La fodera è pre-ruotata di mezzo giro attorno
   all'asse verticale — il triangolo è simmetrico e il gradiente corre in
   verticale, quindi la sagoma non cambia: cambia solo quale fronte guarda
   l'ospite. Su Blink basta backface-visibility. WebKit invece, dentro un
   preserve-3d, la calcola e non la applica al dipinto, e con le due facce
   complanari non ordina nemmeno in profondità (provato: 1px e 20px di
   translateZ non cambiano nulla): vince l'ordine del markup, e la fodera si
   vedeva a busta chiusa (revisione, rilievo 10). Perciò l'ordine lo diciamo
   noi, con lo z-index — ignorato da Blink dentro il contesto 3D, obbedito da
   WebKit — che si scambia quando la falda passa il taglio dei 90°: a 0,66 s
   dal via, che è dove l'accelerazione --flap porta la piega (calcolato sulla
   curva, non a occhio). Lì la falda è di taglio e lo scambio non si vede. */
.mv-falda>svg{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:z-index 0s linear .66s}
.mv-falda .fout{z-index:2}
.mv-falda .fin{z-index:1;transform:rotateY(180deg)}
.mv-busta.go .mv-falda .fout{z-index:1}
.mv-busta.go .mv-falda .fin{z-index:2}
.mv-busta.go .mv-falda{transform:rotateX(-176deg);z-index:0}

.mv-sigillo{position:absolute;z-index:9;left:50%;top:41%;width:64px;height:64px;
  transform:translate(-50%,-50%);
  filter:var(--sigillo-ombra,drop-shadow(0 8px 16px rgba(0,0,0,.6)));
  transition:transform .45s var(--spring),opacity .34s ease}
.mv-sigillo svg{width:100%;height:100%}
.mv-sigillo b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-corsivo);font-size:36px;color:var(--sigillo-inchiostro);
  text-shadow:var(--sigillo-rilievo,0 1px 0 rgba(255,255,255,.5));transform:translateY(2px)}
/* La «&» dell'unione (più protagonisti — passata temi, 29/08/2026): di
   ripiego il corsivo del tema, che è l'unica faccia che OGNI tema precarica
   (il display dell'hero può non arrivare mai: un matrimonio va di soli
   nomi), ma da timbro e non da lettera — corpo un filo più contenuto,
   perché il glifo è più largo e pieno di una maiuscola, e centro ottico
   riportato al centro della ceralacca: una & corsiva pende in basso
   rispetto alla maiuscola. I due ganci sono vocabolario per i temi: non
   ogni corsivo ha una & da timbro (Pinyon usa la forma «Et», che a questo
   corpo si legge come una v sbarrata) e un tema può dire faccia e corpo
   suoi — se la faccia non è fra quelle precaricate va aggiunta al suo
   --precarica, o la & comparirebbe col carattere di ripiego. */
.mv-sigillo b.unione{font-family:var(--sigillo-unione-font,var(--font-corsivo));
  font-size:var(--sigillo-unione-corpo,32px);transform:translateY(0)}
.mv-busta.go .mv-sigillo{transform:translate(-50%,-50%) scale(1.55) rotate(14deg);opacity:0}

.mv-hint{position:relative;z-index:11;margin-top:38px;text-align:center;
  opacity:0;transition:opacity .6s ease}
.mv-hint.pronto{opacity:1}
.mv-hint span{display:block;font-weight:500;font-size:10.5px;--ls:.42em;color:var(--oro-2);
  animation:mv-pulse 3s ease-in-out infinite}
@keyframes mv-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* il segnale d'invito: compare SOLO a caricamento finito (contratto §3) */
.mv-tap{position:absolute;z-index:8;left:50%;top:41%;width:64px;height:64px;
  border-radius:50%;border:1px solid var(--hair);
  opacity:0;pointer-events:none}
.mv-busta.pronta .mv-tap{animation:mv-tap 5.5s cubic-bezier(.25,.6,.35,1) infinite}
.mv-busta.pronta .mv-tap.t2{animation-delay:.7s}
@keyframes mv-tap{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.74)}
  6%{opacity:.5}
  40%{opacity:0;transform:translate3d(-50%,-50%,0) scale(2.15)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(2.15)}}
.mv-busta.go .mv-tap{animation:none;opacity:0}
#mv-apertura.opening .mv-hint{opacity:0}

/* ============ INVITO APERTO (scorre IL DOCUMENTO: architettura §4) ============
   Decisione 15 (03/09/2026). Fino a ieri l'invito aperto era una scatola
   fissa che scorreva al suo interno (overflow-y:auto), e il documento non
   si muoveva mai. Chrome per iOS 26, aprendo un link da un'altra app,
   disegna il web view spostato in su e lo ricalcola SOLO a un gesto di
   scroll dell'utente sul documento: su ogni sito passa inosservato perché
   il primo gesto è uno scroll, sull'invito restava tagliato finché l'ospite
   non passava dalle schede — verificato sul telefono con ogni radice, senza
   layer fissi e su una pagina nuda (piano, cancello del 02-03/09).
   Quindi: finché è chiuso, #mv-invito è la scatola fissa e nascosta di
   sempre (si misura, non scorre); da `.on` in poi ENTRA NEL FLUSSO e a
   scorrere è la pagina, come su ogni sito. Lo scorrimento è quello nativo,
   la barra della radice è spenta più sopra, il pull-to-refresh resta spento
   da overscroll-behavior sulla radice. */
#mv-invito{opacity:0;visibility:hidden;pointer-events:none;
  display:block;overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 18px);
  transition:opacity .3s ease,visibility 0s linear .3s}
/* nel flusso: alto almeno uno schermo e flex in colonna, così l'invito
   corto resta centrato in verticale come nella scatola (la colonna ha
   margin:auto; il suo min-height:100% qui vale auto perché l'altezza del
   contenitore non è più definita) e quello lungo allunga la pagina; sopra
   il fondale fisso che sta a z 0 */
#mv-invito.on{position:relative;inset:auto;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100svh;overflow:visible;
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s ease,visibility 0s linear 0s}
/* col pannello aperto la pagina sotto non scorre: il corpo del pannello ha
   il suo scorrimento (overscroll-behavior:contain), e il velo copre tutto */
html.mv-fermo{overflow:hidden}
/* finché l'invito è nascosto le sue animazioni non girano (costano anche da invisibili) */
#mv-invito:not(.on) *,#mv-invito:not(.on) *::before,#mv-invito:not(.on) *::after{
  animation-play-state:paused}
.mv-colonna{display:flex;flex-direction:column;align-items:center;width:100%;
  max-width:400px;margin:auto;min-height:100%;justify-content:center}

/* --- entrata: cascata per ciò che è in vista, poi rivelazione allo scroll --- */
.mv-r{opacity:0;transform:translate3d(0,30px,0)}
.reveal .mv-r{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .8s ease var(--d,.1s),transform 1s var(--spring) var(--d,.1s)}
/* Blocchi sotto la piega: si rivelano quando entrano nello schermo.
   NIENTE content-visibility, per decisione (revisione, rilievi 12 e 14): su
   WebKit il blocco saltato collassa a 0px, l'observer non scatta mai e la
   firma con la CTA non compare — e quando non collassava, tagliava i bagliori
   al riquadro. Il risparmio era teorico (blocchi di testo a opacità 0), il
   danno era reale; la traccia 6× senza contenimento resta pulita. */
.mv-rs{opacity:0;transform:translate3d(0,30px,0)}
.mv-rs.visto{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .8s ease,transform 1s var(--spring)}

/* ============ BLOCCHI ============ */

/* --- hero (SVG parametrico, decisione 7) --- */
.mv-hero{position:relative;display:flex;align-items:center;justify-content:center;
  width:min(74vw,330px)}
.mv-hero.mv-r{transform:translate3d(0,44px,0) scale(.66)}
.reveal .mv-hero.mv-r{transform:translate3d(0,0,0) scale(1);
  transition:opacity .9s ease var(--d),transform 1.25s var(--spring) var(--d)}
/* niente alone dietro l'hero nell'invito aperto (scelta di Mirko, 27/08):
   il numero sta sul cielo pulito */
.mv-anello{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;border:2px solid var(--anello,rgba(255,205,228,.8));opacity:0;pointer-events:none}
/* senza forwards: a fine corsa torna alla scatola piccola di base —
   ferma a scale(12) lascerebbe 500px di overflow orizzontale invisibile */
.reveal .mv-anello{animation:mv-anello 1.4s cubic-bezier(.16,.7,.24,1) calc(var(--d) + .2s)}
@keyframes mv-anello{0%{opacity:.9;transform:scale(.16)}100%{opacity:0;transform:scale(12)}}
.mv-hero svg.hero3d{width:100%;height:auto}
/* gli scintillii stanno DIETRO il metallo: da quando il riquadro è stretto
   sulle cifre, davanti sembrerebbero sporco sull'oro invece che cielo */
.mv-stelle{position:absolute;inset:-6% -8%;pointer-events:none;z-index:-1}
.mv-stelle i{position:absolute;display:block;opacity:0;
  background:var(--stella) center/contain no-repeat;
  animation:mv-stella 3.6s ease-in-out infinite}
@keyframes mv-stella{0%,100%{opacity:0;transform:scale(.2) rotate(0)}
  46%{opacity:.8;transform:scale(1) rotate(40deg)}}

/* --- nomi --- */
/* z-index:0 apre un contesto di impilamento sull'h1: serve al bagliore, che
   sta a −1, per restare dentro il blocco invece di sprofondare dietro la
   colonna. (Oggi lo aprirebbe già la translate3d della cascata, ma è un
   effetto collaterale: qui è detto.) */
.mv-nomi{position:relative;z-index:0;margin-top:-2px;font-family:var(--font-corsivo);
  font-size:clamp(58px,17.5vw,90px);line-height:1.3;color:var(--ink-forte,#fff);text-align:center}
.mv-nomi > span{display:block;font-weight:400}
.mv-nomi .n{white-space:nowrap}   /* un nome non si spezza mai: il capo cade fra i nomi */
/* La «&» fra i nomi (fase A-bis): elemento suo perché il tema possa
   vestirla — su Elegante la & di Pinyon è la stessa forma «Et» del
   sigillo. Vale anche per i nomi sul biglietto (.mv-bigl-nomi usa gli
   stessi segmenti). Di default eredita TUTTO — il b non deve ingrassare:
   senza gancio la resa è identica a prima, al pixel. Se la faccia del
   gancio non è fra quelle precaricate va aggiunta al --precarica del
   tema, come per la & del sigillo. */
.n b.unione{font-weight:inherit;font-family:var(--nomi-unione-font,inherit)}
/* Il bagliore sta DIETRO il testo vero. Davanti — dov'era — le sue sfocature
   dipingevano sopra i nomi e li sporcavano: un tema non poteva dare ombra ai
   nomi senza intorbidirli (revisione, rilievo 11). La lista di ombre è una
   variabile intera: un tema può spegnerla, o darne quante ne vuole. */
.mv-nomi .glow{position:absolute;left:0;top:0;width:100%;z-index:-1;color:transparent;opacity:0;
  text-shadow:var(--nomi-bagliore,
    0 0 26px var(--acc-glow-testo),0 0 74px var(--acc-glow-testo-2),0 6px 22px rgba(0,0,0,.6))}
.reveal .mv-nomi .glow{opacity:1;transition:opacity 1.3s ease calc(var(--d) + .35s)}
.mv-nomi.visto .glow{opacity:1;transition:opacity 1.3s ease .35s}

/* --- filetto --- */
.mv-filetto{display:flex;align-items:center;gap:12px;width:min(76%,280px);margin:12px 0 14px}
.mv-filetto i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.mv-filetto b{width:6px;height:6px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--oro-1),var(--oro-3));
  box-shadow:0 0 12px var(--oro-bagliore,rgba(244,214,182,.7))}

/* --- tappa: tre <p> sciolti (occhiello + data + ora) --- */
.mv-occhiello,.mv-data,.mv-ora{text-align:center}
.mv-occhiello{font-weight:400;font-size:10.5px;--ls:.44em;color:var(--oro-2)}
.mv-data{font-family:var(--font-testo);font-weight:500;font-size:clamp(27px,7.8vw,38px);
  line-height:1.16;margin-top:9px;color:var(--ink-caldo,#fffaf6);
  text-shadow:var(--data-ombra,0 3px 20px rgba(0,0,0,.6))}
.mv-ora{font-family:var(--font-testo);font-weight:300;font-size:clamp(15px,4.4vw,19px);
  margin-top:5px;letter-spacing:.13em;color:var(--muted)}

/* --- tappe multiple (matrimonio): ogni tappa è una piccola partecipazione --- */
.mv-tappe{display:flex;flex-direction:column;gap:clamp(18px,3vh,26px);margin-top:18px;text-align:center}
.mv-tappa-titolo{font-weight:500;font-size:10px;--ls:.4em;color:var(--oro-2)}
.mv-tappa-ora{font-family:var(--font-testo);font-weight:300;font-size:15px;
  margin-top:4px;letter-spacing:.13em;color:var(--muted)}
.mv-tappa-luogo{font-family:var(--font-testo);font-weight:500;font-size:clamp(20px,5.6vw,24px);
  line-height:1.2;margin-top:5px;color:var(--ink-caldo,#fffaf6);
  text-shadow:var(--luogo-ombra,0 2px 14px rgba(0,0,0,.55))}
.mv-tappa-indirizzo{font-family:var(--font-testo);font-weight:300;font-size:13.5px;
  letter-spacing:.04em;margin-top:3px;color:var(--muted)}
.mv-tappa-mappa,.mv-lista-link{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  height:34px;padding:0 17px;border-radius:100px;
  background:linear-gradient(180deg,var(--glass-chiaro),rgba(255,255,255,.03));
  border:1px solid var(--glass-line);
  box-shadow:var(--pastiglia-ombra,0 8px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.2));
  color:var(--ink);text-decoration:none}
button.mv-tappa-mappa{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.mv-tappa-mappa svg,.mv-lista-link svg{width:13px;height:13px;color:var(--oro-2)}
.mv-tappa-mappa span,.mv-lista-link span{font-weight:500;font-size:9.5px;--ls:.22em}
.mv-tappa-mappa:active,.mv-lista-link:active{transform:scale(.96)}

/* --- countdown --- */
/* il riquadro appena accennato del countdown e dell'IBAN: due variabili sole,
   perché sono lo stesso oggetto — una lastra di vetro con un filo intorno */
.mv-cd{display:flex;align-items:flex-start;gap:14px;margin-top:18px;padding:11px 18px;
  border-radius:16px;background:var(--riquadro-fondo,rgba(255,255,255,.05));
  border:1px solid var(--riquadro-filo,rgba(255,255,255,.08))}
.mv-cd div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:34px}
/* lining-nums: le cifre oldstyle di Cormorant («21» che pare «2I») sono
   eleganti nella data e ambigue in un contatore letto di sfuggita */
.mv-cd b{font-family:var(--font-testo);font-weight:500;font-size:22px;line-height:1;color:var(--ink-forte,#fff);
  font-variant-numeric:tabular-nums lining-nums}
.mv-cd i{font-style:normal;font-size:7.5px;color:var(--muted)}
.mv-cd s{text-decoration:none;color:var(--hair);font-size:16px;line-height:1.1}

/* --- azioni (bottoni vetro) --- */
.mv-azioni{display:flex;gap:11px;width:100%;max-width:344px;margin-top:clamp(20px,4.5vh,28px);
  justify-content:center}
/* un bottone rimasto solo non si spalma a tutta larghezza */
.mv-azioni .mv-btn:only-child{flex:0 1 auto;min-width:216px;padding:0 26px}
.mv-btn{flex:1;position:relative;overflow:hidden;height:54px;border-radius:100px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,var(--glass-chiaro),rgba(255,255,255,.035));
  border:1px solid var(--glass-line);
  box-shadow:var(--btn-ombra,0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.26));
  color:var(--ink);text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  font:inherit;
  transition:transform .3s var(--spring)}
.mv-btn span{font-weight:500;font-size:10.5px;--ls:.17em;white-space:nowrap}
.mv-btn svg{width:17px;height:17px;flex:none;color:var(--oro-2)}
.mv-btn::after{content:'';position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translate3d(-240%,0,0) skewX(-18deg);
  animation:mv-sheen 7s ease-in-out infinite}
.mv-btn+.mv-btn::after{animation-delay:1.4s}
@keyframes mv-sheen{0%,76%{transform:translate3d(-240%,0,0) skewX(-18deg)}
  100%{transform:translate3d(300%,0,0) skewX(-18deg)}}
.mv-btn:active{transform:scale(.955)}

/* --- testo libero --- */
.mv-testo{max-width:36ch;margin-top:clamp(16px,3.6vh,24px);text-align:center}
.mv-testo h3{font-family:var(--font-corsivo);font-weight:400;
  font-size:clamp(26px,7.6vw,36px);line-height:1.3;color:var(--ink-forte,#fff);
  text-shadow:var(--titolo-bagliore,0 0 18px var(--acc-glow-testo))}
.mv-testo p{font-family:var(--font-testo);font-weight:300;font-size:16.5px;line-height:1.6;
  color:var(--muted);margin-top:6px}

/* --- programma della giornata: righe centrate, da cerimonia stampata --- */
.mv-prog{width:100%;margin-top:clamp(18px,4vh,26px);text-align:center}
.mv-prog-righe{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.mv-prog-riga{font-family:var(--font-testo);font-weight:300;font-size:16.5px;
  line-height:1.35;color:var(--ink)}
.mv-prog-riga b{font-weight:500;font-size:15.5px;letter-spacing:.05em;
  color:var(--oro-2);font-variant-numeric:tabular-nums lining-nums}
.mv-prog-riga i{font-style:normal;color:var(--oro-2);opacity:.45;font-size:13px;padding:0 8px}

/* --- lista nozze --- */
.mv-lista{width:100%;margin-top:clamp(18px,4vh,26px);text-align:center}
.mv-lista-testo{font-family:var(--font-testo);font-weight:300;font-size:16.5px;line-height:1.6;
  color:var(--muted);max-width:34ch;margin:8px auto 0}
.mv-iban{display:flex;align-items:center;gap:12px;max-width:344px;margin:14px auto 0;
  padding:9px 9px 9px 18px;border-radius:16px;
  background:var(--riquadro-fondo,rgba(255,255,255,.05));
  border:1px solid var(--riquadro-filo,rgba(255,255,255,.08))}
.mv-iban-codice{flex:1;text-align:left;font-family:var(--font-testo);font-weight:500;
  font-size:14.5px;line-height:1.45;letter-spacing:.03em;color:var(--ink-forte,#fff);
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-user-select:text;user-select:text}
.mv-iban-copia{flex-shrink:0;height:38px;padding:0 16px;border-radius:100px;
  background:linear-gradient(180deg,var(--glass-chiaro),rgba(255,255,255,.03));
  border:1px solid var(--glass-line);color:var(--oro-2);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  font-weight:500;font-size:9px;--ls:.18em}
.mv-iban-copia:active{transform:scale(.95)}
.mv-lista-nota{font-family:var(--font-testo);font-weight:300;font-size:13.5px;
  letter-spacing:.04em;margin-top:9px;color:var(--muted)}

/* --- conferme (rsvp) ---
   Nella pagina il blocco è una carta sobria: l'occhiello, una riga di
   testo, il bottone e UNA riga di stato. Quella riga non dice mai quante
   conferme sono arrivate né di chi (motore.js, il vincolo scritto sul
   registro): l'URL di un invito gira nelle chat. */
.mv-rsvp{width:100%;margin-top:clamp(18px,4vh,26px);text-align:center}
.mv-rsvp-testo{font-family:var(--font-testo);font-weight:300;font-size:16.5px;
  line-height:1.6;color:var(--muted);max-width:34ch;margin:8px auto 0}
.mv-rsvp-azione{display:flex;justify-content:center;width:100%;max-width:344px;
  margin:16px auto 0}
.mv-rsvp-azione .mv-btn{flex:0 1 auto;min-width:216px;padding:0 26px}
.mv-rsvp-azione .mv-btn[disabled]{opacity:.45;cursor:default}
.mv-rsvp-azione .mv-btn[disabled]::after{animation:none;opacity:0}
.mv-rsvp-stato{font-family:var(--font-testo);font-weight:300;font-size:13.5px;
  line-height:1.5;letter-spacing:.04em;margin-top:11px;color:var(--muted);
  min-height:1.2em}
/* la nota dell'anteprima: nell'invito pubblicato questo nodo non esiste */
.mv-rsvp-nota{font-family:var(--font-etichetta);font-size:10px;line-height:1.6;
  letter-spacing:.1em;margin-top:6px;color:var(--oro-2);opacity:.75}

/* --- chiusura --- */
.mv-chiusura{font-family:var(--font-corsivo);font-size:clamp(33px,10vw,47px);line-height:1.25;
  margin-top:clamp(20px,4.5vh,32px);color:var(--ink-forte,#fff);
  text-shadow:var(--chiusura-bagliore,0 0 18px var(--acc-glow-testo),0 0 44px var(--acc-glow-testo-2))}

/* --- firma --- */
.mv-firma{display:flex;flex-direction:column;align-items:center;margin-top:clamp(14px,3.2vh,24px)}
/* qui c'è il dominio, non una didascalia: spaziatura stretta perché il .it
   resti attaccato al nome (a .3em si legge «INVITISSIMO . IT») e oro invece
   di malva, così è una firma e non una nota a piè di pagina */
.mv-firma-occhiello{display:flex;align-items:center;gap:10px;
  font-family:var(--font-etichetta);font-weight:500;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--oro-2);opacity:.85}
.mv-firma-occhiello i{display:block;width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair))}
.mv-firma-occhiello i:last-child{background:linear-gradient(90deg,var(--hair),transparent)}
.mv-firma-occhiello span{padding-left:.17em}
.mv-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  margin-top:12px;height:44px;padding:0 22px;border-radius:100px;
  background:linear-gradient(135deg,var(--oro-1) 0%,var(--oro-2) 36%,var(--oro-3) 66%,var(--oro-1) 100%);
  color:var(--cta-inchiostro,#40200f);text-decoration:none;cursor:pointer;
  box-shadow:0 12px 28px var(--cta-ombra,rgba(214,150,104,.26)),
             inset 0 1px 0 rgba(255,255,255,.8),
             inset 0 -2px 6px rgba(150,90,55,.16);
  font-family:var(--font-etichetta);font-weight:600;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;
  transition:transform .3s var(--spring)}
.mv-cta span{padding-left:.2em}
.mv-cta .sp{width:12px;height:12px;flex:none}
.mv-cta .ar{width:13px;height:13px;flex:none;opacity:.7;transition:transform .3s var(--ease)}
.mv-cta::after{content:'';position:absolute;top:0;left:0;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translate3d(-240%,0,0) skewX(-18deg);
  animation:mv-sheen 6.5s ease-in-out 2.2s infinite}
.mv-cta:active{transform:scale(.965)}
.mv-cta:active .ar{transform:translate3d(3px,0,0)}

/* --- tasto: torna alla busta --- */
.mv-replay{position:fixed;z-index:30;top:calc(env(safe-area-inset-top) + 14px);left:14px;
  width:44px;height:44px;padding:0;border-radius:50%;   /* mai sotto i 44px tattili */
  display:flex;align-items:center;justify-content:center;
  /* stesso vetro delle pastiglie e dei bottoni: era l'unico elemento del
     motore senza una variabile addosso (revisione, rilievo 11) */
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,var(--glass-chiaro),rgba(255,255,255,.03));
  box-shadow:var(--replay-ombra,0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16));
  color:var(--oro-2);cursor:pointer;-webkit-appearance:none;appearance:none;
  opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
  transition:opacity .5s ease,transform .5s var(--spring),visibility 0s linear .5s}
body.shown .mv-replay{opacity:1;visibility:visible;transform:translate3d(0,0,0);
  transition:opacity .6s ease 2.4s,transform .7s var(--spring) 2.4s,visibility 0s linear 2.4s}
body.shown .mv-replay:active{transform:scale(.9)}
.mv-replay svg{width:17px;height:17px;margin-left:-1px}

/* ============ PANNELLO (bottom sheet) ============ */
.mv-pannello{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mv-pannello.on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s}
.mv-pan-velo{position:absolute;inset:0;background:var(--pannello-velo)}
.mv-pan{position:relative;width:100%;max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;
  /* mai più alto dello schermo: resta visibile un lembo di velo per chiudere
     al tocco, e il contenuto in eccesso scorre nel corpo (mai fuori dall'alto) */
  max-height:calc(100vh - env(safe-area-inset-top,0px) - 56px);
  transform:translate3d(0,103%,0);transition:transform .5s var(--ease);
  background:linear-gradient(180deg,var(--pannello-0),var(--pannello-1));
  border-top:1px solid var(--glass-line);border-radius:28px 28px 0 0;
  box-shadow:var(--pannello-ombra,0 -24px 64px rgba(0,0,0,.7));
  padding:12px 24px calc(env(safe-area-inset-bottom) + 24px);text-align:center;touch-action:none}
@supports (max-height:100dvh){
  .mv-pan{max-height:calc(100dvh - env(safe-area-inset-top,0px) - 56px)}
}
.mv-pan:focus{outline:none}   /* il fuoco entra via script: niente anello sul contenitore */
.mv-pannello.on .mv-pan{transform:translate3d(0,0,0)}
.mv-pan.drag{transition:none}
.mv-pan-corpo{min-height:0}
.mv-pan.scorre .mv-pan-corpo{overflow-y:auto;touch-action:pan-y;
  overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.mv-pan.scorre .mv-pan-corpo::-webkit-scrollbar{display:none}
.mv-maniglia{display:block;flex-shrink:0;width:42px;height:4px;border-radius:4px;margin:0 auto 20px;background:var(--hair)}
.mv-pan-occhiello{font-weight:500;font-size:9.5px;--ls:.4em;color:var(--oro-2)}
.mv-pan-titolo{font-family:var(--font-corsivo);font-size:clamp(42px,12vw,56px);line-height:1.25;margin-top:4px;
  color:var(--ink-forte,#fff);text-shadow:var(--pan-titolo-bagliore,0 0 20px var(--acc-glow-testo))}
.mv-pan-testo{font-family:var(--font-testo);font-weight:300;font-size:16.5px;line-height:1.6;
  margin:12px auto 0;color:var(--muted);max-width:33ch}
.mv-colori{display:flex;justify-content:center;gap:12px;margin-top:20px}
.mv-colori i{width:29px;height:29px;border-radius:50%;
  box-shadow:var(--colori-ombra,0 3px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28))}
.mv-pan-nota{font-family:var(--font-etichetta);font-size:10.5px;line-height:1.7;letter-spacing:.05em;
  margin-top:18px;color:var(--muted)}
.mv-pan-chiudi{display:block;flex-shrink:0;margin-top:22px;width:100%;height:50px;border-radius:100px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid var(--glass-line);color:var(--oro-2);cursor:pointer;
  font-weight:500;font-size:10.5px;--ls:.26em}
.mv-pan-chiudi:active{transform:scale(.98)}

/* ============ IL MODULO DELLE CONFERME (dentro il pannello) ============
   Vive nel bottom sheet di sempre — trappola del fuoco, trascinamento,
   corpo che scorre — e non si porta una finestra modale sua. Tutto ciò
   che c'è qui è statico: nessuna animazione, nessuna transizione oltre
   quelle discrete di tocco (dottrina §5.2). I colori sono del tema. */
.mv-pan-modulo:empty{display:none}
/* IL FONT DEL MODULO. Le etichette restano nella grafia del tema; ciò che
   l'ospite scrive e legge da vicino — i campi, la formula del consenso, gli
   aiuti, gli errori — va in un carattere di sistema, dritto e a corpo pieno:
   la leggibilità viene prima del registro (Mirko, 03/09/2026). Niente sotto
   i 14 px. */
.mv-mod{--font-modulo:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  margin-top:22px;text-align:left;display:flex;flex-direction:column;gap:16px}
.mv-mod-campo{display:flex;flex-direction:column;gap:7px}
/* LE MISURE (03/09/2026): coi campi e il consenso passati al carattere di
   sistema a 15-16 px, le etichette tracciate a 9,5 px sembravano didascalie;
   tutto ciò che è nella grafia del tema sale di un gradino, senza perdere
   la spaziatura che lo distingue dal testo. */
.mv-mod-eti{display:block;font-family:var(--font-etichetta);text-transform:uppercase;
  font-weight:500;font-size:11px;letter-spacing:.22em;color:var(--oro-2)}
.mv-mod-facoltativo{font-style:normal;text-transform:none;letter-spacing:.04em;
  font-family:var(--font-modulo);font-size:12px;color:var(--muted);margin-left:8px}
.mv-mod-input{width:100%;min-height:48px;padding:12px 14px;border-radius:14px;
  background:var(--riquadro-fondo,rgba(255,255,255,.05));
  border:1px solid var(--riquadro-filo,rgba(255,255,255,.08));
  color:var(--ink-forte,#fff);font-family:var(--font-modulo);font-weight:400;
  font-size:16px;line-height:1.4;-webkit-appearance:none;appearance:none;
  -webkit-user-select:text;user-select:text;touch-action:auto;
  /* le cifre oldstyle dei corpi da libro fanno leggere «1» come una «I»:
     stessa medicina del contatore e dell'IBAN */
  font-variant-numeric:tabular-nums lining-nums}
.mv-mod-input::placeholder{color:var(--muted);opacity:.7}
.mv-mod-input:focus{outline:none;border-color:var(--oro-2)}
.mv-mod-input[aria-invalid="true"]{border-color:var(--errore,#e2607a)}
.mv-mod-area{min-height:72px;resize:none;line-height:1.5}

/* le due pastiglie della presenza: radio veri, vestiti */
.mv-mod-scelte{display:flex;gap:10px}
.mv-mod-pastiglia{flex:1;position:relative;display:flex;align-items:center;
  justify-content:center;min-height:48px;padding:0 12px;border-radius:100px;
  background:linear-gradient(180deg,var(--glass-chiaro),rgba(255,255,255,.03));
  border:1px solid var(--glass-line);cursor:pointer;
  transition:transform .2s var(--spring)}
.mv-mod-pastiglia:active{transform:scale(.97)}
.mv-mod-pastiglia span{font-family:var(--font-etichetta);text-transform:uppercase;
  font-weight:500;font-size:11.5px;letter-spacing:.16em;padding-left:.16em;
  color:var(--ink)}
.mv-mod-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  -webkit-appearance:none;appearance:none;cursor:pointer}
/* La scelta si vede PRIMA di tutto sull'etichetta: `:has()` non c'è su
   ogni WebKit ancora in giro, e una regola sola col gruppo invalido
   sparirebbe tutta. Questa vale ovunque; il contorno d'oro qui sotto è
   la rifinitura di chi ce l'ha. */
.mv-mod-radio:checked+span{color:var(--ink-forte,#fff);font-weight:700}
.mv-mod-pastiglia:has(.mv-mod-radio:checked){border-color:var(--oro-2)}
.mv-mod-radio:focus-visible+span{text-decoration:underline}

/* «NON SEI TU?» — la riga del dispositivo condiviso.
   Discreta di proposito: la stragrande maggioranza di chi riapre il modulo è
   la stessa persona che l'ha compilato, e questa riga parla al caso raro del
   telefono che si passa di mano. Un bottone-testo, non una pastiglia: deve
   essere raggiungibile e non deve competere con «Salva». Nessuna transizione
   e nessuna proprietà animata (dottrina §5): cambia solo un colore, al tocco. */
.mv-mod-altro{margin-top:-6px}
.mv-mod-altro[hidden]{display:none}
.mv-mod-altro-btn,.mv-mod-togli{display:inline-block;min-height:32px;padding:0;border:0;
  background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  font-family:var(--font-modulo);font-weight:400;font-size:14px;line-height:1.5;
  text-align:left;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.mv-mod-altro-btn:active,.mv-mod-togli:active{color:var(--ink)}

/* ---- CHI VIENE CON TE — le persone che l'ospite porta con sé ----
   (conferme nominali, 02/09/2026). Tutto quello che c'è qui è statico:
   il gruppo compare e sparisce con `hidden`, le righe nascono e muoiono
   senza una transizione — è un gesto una-tantum dentro un pannello già
   fermo, e la dottrina §5 vieta il movimento CONTINUO, non il gesto. Se
   una riga entrasse in dissolvenza, il pannello dovrebbe ridisegnare e
   ri-misurare mentre l'ospite ha ancora il dito sullo schermo. */
.mv-mod-vengo{display:flex;flex-direction:column;gap:16px}
.mv-mod-vengo[hidden]{display:none}
.mv-mod-elenco{display:flex;flex-direction:column;gap:12px}
.mv-mod-elenco:empty{display:none}   /* zero righe: resta il solo bottone */

/* una riga persona: un riquadro leggero del tema, i campi IMPILATI —
   su un telefono non c'è larghezza per affiancarli, e affiancati il
   bersaglio scenderebbe sotto i 44 px */
.mv-mod-persona{position:relative;display:flex;flex-direction:column;gap:12px;
  padding:14px;border-radius:16px;
  background:var(--riquadro-fondo,rgba(255,255,255,.05));
  border:1px solid var(--riquadro-filo,rgba(255,255,255,.08))}
/* dentro il riquadro il campo ha lo stesso fondo del riquadro: i due si
   sommano (sono colori con alfa) ma il filo va rinforzato, o il bordo
   dell'input sparisce contro quello della scatola */
.mv-mod-persona .mv-mod-input{border-color:var(--glass-line)}
/* la textarea delle esigenze qui è di UNA riga: nove campi alti due righe
   fanno un modulo che non finisce mai */
.mv-mod-area-1{min-height:48px}
/* l'etichetta del nome lascia il posto alla X */
.mv-mod-persona > .mv-mod-campo:first-child > .mv-mod-eti{padding-right:44px}
/* «Togli» è una X in alto a destra del riquadro (Mirko, 03/09/2026):
   discreta ma con un bersaglio pieno, e sopra lo spazio dell'etichetta, non
   del campo */
.mv-mod-togli{position:absolute;top:2px;right:2px;width:40px;height:36px;
  display:flex;align-items:center;justify-content:center;padding:0;
  color:var(--muted);text-decoration:none;border-radius:10px}
.mv-mod-togli svg{width:18px;height:18px}

/* «Aggiungi una persona»: un filo tratteggiato, non una pastiglia piena.
   L'unica pastiglia piena del modulo resta «Manda la risposta», e questo
   bottone non deve competerci; il tratteggio dice «qui si aggiunge»
   meglio di qualunque parola in più. Colori del tema, 48 px di bersaglio,
   nessuna proprietà animata oltre lo scatto di tocco. */
.mv-mod-aggiungi{width:100%;min-height:48px;border-radius:14px;cursor:pointer;
  background:none;border:1px dashed var(--glass-line);color:var(--oro-2);
  -webkit-appearance:none;appearance:none;
  font-family:var(--font-etichetta);text-transform:uppercase;font-weight:500;
  font-size:11.5px;letter-spacing:.18em;padding:0 12px 0 calc(12px + .18em);
  transition:transform .2s var(--spring)}
.mv-mod-aggiungi:active{transform:scale(.98)}
.mv-mod-aggiungi[disabled]{opacity:.45;cursor:default}

/* la casella del consenso: 24px veri in un bersaglio da 44 */
.mv-mod-riga{display:flex;align-items:flex-start;gap:12px}
.mv-mod-check{flex:none;width:24px;height:24px;margin:2px 0 0;border-radius:7px;
  background:var(--riquadro-fondo,rgba(255,255,255,.05));
  border:1px solid var(--glass-line);cursor:pointer;
  -webkit-appearance:none;appearance:none}
.mv-mod-check:checked{background:var(--oro-2);border-color:var(--oro-2)}
.mv-mod-check:checked::after{content:'';display:block;width:7px;height:12px;
  margin:2px auto 0;border:solid var(--bg);border-width:0 2px 2px 0;
  transform:rotate(43deg)}
.mv-mod-check[aria-invalid="true"]{border-color:var(--errore,#e2607a)}
/* la stessa etichetta della casella del consenso vale per «È un bambino»:
   una casella con accanto una frase da leggere, e tutta la frase è il
   bersaglio */
.mv-mod-consenso-testo,.mv-mod-check-eti{flex:1;font-family:var(--font-modulo);
  font-weight:400;font-size:15px;line-height:1.5;color:var(--ink);cursor:pointer}
/* la riga corta («È un bambino»): casella e frase sulla stessa linea */
.mv-mod-riga-corta{align-items:center}
.mv-mod-riga-corta .mv-mod-check{margin-top:0}
.mv-mod-link{color:var(--oro-2)}
.mv-mod-aiuto{font-family:var(--font-modulo);font-weight:400;font-size:14px;
  line-height:1.5;color:var(--muted)}
.mv-mod-errore:empty,.mv-mod-generale:empty{display:none}
.mv-mod-errore,.mv-mod-generale{font-family:var(--font-modulo);font-weight:400;
  font-size:14px;line-height:1.5;color:var(--errore,#e2607a)}
.mv-mod-generale{margin-top:2px;padding:10px 12px;border-radius:12px;
  background:var(--riquadro-fondo,rgba(255,255,255,.05));
  border:1px solid var(--riquadro-filo,rgba(255,255,255,.08));
  color:var(--ink)}
.mv-mod-generale.grave{color:var(--errore,#e2607a)}

.mv-mod-invia{width:100%;min-height:52px;border-radius:100px;cursor:pointer;
  background:linear-gradient(180deg,var(--glass-chiaro),rgba(255,255,255,.04));
  border:1px solid var(--oro-2);color:var(--ink-forte,#fff);
  -webkit-appearance:none;appearance:none;
  font-family:var(--font-etichetta);text-transform:uppercase;font-weight:500;
  font-size:12px;letter-spacing:.22em;padding-left:.22em;
  transition:transform .2s var(--spring)}
.mv-mod-invia:active{transform:scale(.98)}
.mv-mod-invia[disabled]{opacity:.5;cursor:default}
.mv-mod-cancella{width:100%;min-height:44px;border:0;background:none;cursor:pointer;
  color:var(--muted);-webkit-appearance:none;appearance:none;
  font-family:var(--font-etichetta);text-transform:uppercase;font-weight:500;
  font-size:11px;letter-spacing:.18em;padding-left:.18em}
.mv-mod-cancella[hidden]{display:none}
.mv-mod-cancella.sicuro{color:var(--errore,#e2607a)}

/* COL MODULO DENTRO, «Chiudi» SI FA DA PARTE.
   Il tasto del pannello è fisso in fondo e il modulo scorre sopra di lui:
   con la stessa pastiglia di sempre sarebbe il bottone più grosso e più
   stabile della scena — proprio sotto le dita di chi ha appena finito di
   scrivere, e proprio mentre cerca «manda». Qui diventa una riga di testo:
   resta raggiungibile (e resta nel giro del Tab), smette di competere. */
.mv-pannello.con-modulo .mv-pan-chiudi{margin-top:8px;height:44px;
  background:none;border:0;box-shadow:none;color:var(--muted);font-size:9.5px;--ls:.2em}

/* L'ESCA — fuori dallo schermo, non «display:none»: i compilatori
   automatici più ingenui saltano ciò che è dichiarato nascosto, e questo
   campo esiste apposta perché lo riempiano. */
.mv-mod-esca{position:absolute;left:-9999px;top:0;width:1px;height:1px;
  opacity:0;pointer-events:none}

/* ============ ANTEPRIMA (solo dentro il guscio dell'editor) ============
   Ogni regola è appesa a body[data-anteprima]: nel guscio di pubblicazione
   quell'attributo non esiste, quindi qui non si dipinge nulla. */

/* nell'editor il ritorno alla busta è un comando del genitore, non un tasto
   dentro la scena */
body[data-anteprima] .mv-replay{display:none}

/* A riposo l'anteprima è FERMA: rimontare un blocco a ogni tasto non deve
   rifargli fare l'entrata. La classe cade solo quando si prova l'apertura —
   lì la coreografia è il soggetto — e torna appena è finita. */
body[data-anteprima].mv-fermo .mv-r,
body[data-anteprima].mv-fermo .mv-rs{opacity:1;transform:none;transition:none}
body[data-anteprima].mv-fermo .mv-nomi .glow{opacity:1;transition:none}
body[data-anteprima].mv-fermo .mv-anello{animation:none}

/* il blocco che l'editor sta toccando: contorno dipinto una volta, niente
   animazione — si spegne da sé dopo un attimo */
body[data-anteprima] .mv-evid{
  outline:2px solid var(--evidenzia,rgba(76,141,255,.9));outline-offset:7px;border-radius:6px}

/* --- LA FILIGRANA ---
   Fissa, sorda al puntatore, DIPINTA UNA VOLTA: nessuna animazione, nessun
   filter, nessun blend (dottrina §5) — sta sopra tutto, quindi qualunque
   costo per fotogramma lo pagherebbe ogni scorrimento. Il testo si ripete in
   diagonale su tutta la superficie: non c'è ritaglio che la tolga, e sta
   anche sulla scena chiusa e sul biglietto perché la scena vera sta sotto.
   Il colore è una variabile: il ripiego è un grigio neutro a bassa opacità,
   l'unico che regge sia sulla carta chiara sia sulla notte. */
.mv-filigrana{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;
  /* un layer suo: sotto scorre l'invito, e la filigrana non si ridipinge */
  transform:translateZ(0)}
.mv-fil-griglia{position:absolute;left:50%;top:50%;width:190%;height:190%;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--filigrana-passo,84px);
  transform:translate(-50%,-50%) rotate(-24deg)}
.mv-fil-griglia span{display:block;white-space:nowrap;text-align:center;
  font-family:var(--font-etichetta,system-ui,sans-serif);
  font-weight:500;font-size:var(--filigrana-corpo,11px);letter-spacing:.34em;
  color:var(--filigrana,rgba(128,124,132,.38))}
/* righe sfalsate: da vicino è una trama, non una griglia */
.mv-fil-griglia span:nth-child(even){transform:translateX(-7em)}

/* ============ ADATTAMENTI ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.2s!important}
  .mv-hint{opacity:1}
}
@media (orientation:landscape) and (max-height:560px){
  .mv-hero{width:min(32vw,200px)}
  .mv-nomi{font-size:clamp(36px,6.4vw,52px)}
  .mv-data{font-size:clamp(22px,3.4vw,28px)}
  .mv-azioni{max-width:300px}
  .mv-cd{padding:7px 13px}
  .mv-cd b{font-size:17px}
  .mv-cta{height:38px}
}
@media (max-height:680px){
  .mv-firma{margin-top:9px}
  .mv-cta{height:36px;margin-top:9px}
  .mv-azioni{margin-top:15px}
  .mv-hero{width:min(56vw,240px)}
  .mv-nomi{font-size:clamp(46px,14vw,62px)}
  .mv-filetto{margin:8px 0 8px}
  .mv-cd{margin-top:12px;padding:9px 14px}
  .mv-cd b{font-size:19px}
  .mv-chiusura{margin-top:11px}
}