/* ==========================================================================
   partecipazione (partecipazione.html): la scatola di cartoline, le cartoline, le icone e gli strati delle animazioni (js/partecipazione-fx.js).
   Usa solo le variabili di css/theme.css.
   ========================================================================== */

/* ---- Il "sopra" della scatola: coperchio verde salvia con il nastro e, attaccata, l'etichetta-cartolina ---- */
.sopra { position: relative; padding: 1.6rem 1rem; border: 3px solid var(--c-cartone-scuro); border-radius: .7rem; background: var(--c-cartone); box-shadow: var(--ombra); overflow: hidden; }
.sopra::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.6rem; margin-left: -.8rem; background: var(--c-nastro); border-inline: 1px solid var(--c-cartone-scuro); }
.sopra .cartolina { transform: rotate(-.6deg); box-shadow: 0 6px 14px -8px rgba(0,0,0,.45); }

/* ---- La scatola: verde salvia con dentro le cartoline ---- */
.scatola { padding: 1.4rem 1rem 1.6rem; border: 3px solid var(--c-cartone-scuro); border-radius: .7rem; color: var(--c-su-cartone);
  background: linear-gradient(180deg, rgba(40,60,38,.2), transparent 5rem), var(--c-cartone); box-shadow: inset 0 .7rem 1.5rem -.5rem rgba(40,60,38,.35), var(--ombra); }
.scatola__saluto { margin: 0 0 1.1rem; font: 400 clamp(3.2rem, 13vw, 4rem)/1 var(--f-corsivo); }
.scatola .btn--link { color: var(--c-su-cartone); }
.scatola form { margin-top: 1.4rem; padding: 1.1rem; background: var(--c-superficie); border-radius: .5rem; color: var(--c-testo); box-shadow: 0 6px 14px -8px rgba(0,0,0,.45); }
.scatola .btn--link { margin-top: .75rem; }

/* Il nucleo: sotto-sezione graficamente separata, con il flag "rispondo solo per me" sopra */
.nucleo { margin: 1.6rem 0 1.2rem; padding: 1rem .7rem .4rem; text-align: center; border: 2px dashed rgba(255,255,255,.7); border-radius: .8rem; background: rgba(255,255,255,.14); }
.solo-me { display: flex; align-items: center; gap: .65rem; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto .7rem; padding: .6rem .9rem; font-size: 1rem; font-weight: 600; color: var(--c-testo); cursor: pointer;
  border: 2px solid var(--c-accento); border-radius: .7rem; background: rgba(255,255,255,.75); }
.solo-me input { flex: none; width: 1.75rem; height: 1.75rem; margin: 0; }
.nucleo__filo { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .5rem; color: var(--c-su-cartone); }
.nucleo__filo i { flex: 1; border-top: 1.3px solid currentColor; }
.nucleo__filo svg { flex: none; width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nucleo__titolo { margin: 0; font: italic 400 clamp(1.7rem, 7vw, 2.2rem)/1.05 var(--f-titoli); color: var(--c-su-cartone); }
.nucleo__sotto { margin: .4rem 0 1.2rem; font-size: .9rem; opacity: .85; }
.nucleo--solo .nucleo__filo, .nucleo--solo .nucleo__titolo, .nucleo--solo .nucleo__sotto, .nucleo--solo #partecipazione-altri-schede { display: none; }
.solo-msg { margin: .3rem 0 .9rem; font: italic 400 1.15rem/1.3 var(--f-titoli); color: var(--c-su-cartone); }   /* battuta per chi sarà da solo (+1) */
.piu-uno { display: grid; gap: .5rem; margin-bottom: .9rem; }   /* nome e cognome dell'ospite (+1) */
.piu-uno input { width: 100%; }
.nucleo--solo { padding-bottom: .1rem; }

/* ---- Le cartoline: sparse nella scatola, ognuna con la sua animazione d'ingresso ---- */
.scheda-wrap { margin-bottom: 1.2rem; transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)); text-align: left; }
.scatola:not(.aperta) .scheda-wrap { opacity: 0; }
.scatola.aperta .scheda-wrap { animation: cade .85s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * .17s); }
@keyframes cade { from { opacity: 0; transform: translate(calc(var(--x, 0) * 3), -3rem) rotate(calc(var(--r, 0deg) * -5)) scale(.92); } }
.scheda { perspective: 1400px; }
.scheda__giro { position: relative; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.4, .2, .2, 1), height .35s; }
.scheda--girata .scheda__giro { transform: rotateY(180deg); }
.scheda__faccia { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: .5rem;
  box-shadow: 0 7px 16px -9px rgba(0,0,0,.55); backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--c-testo); }
.scheda__faccia::before { content: ""; position: absolute; inset: .4rem; border: 1px dashed var(--c-rosa); border-radius: .3rem; pointer-events: none; }
.scheda__fronte::after { content: ""; position: absolute; top: .9rem; right: .9rem; width: 2.3rem; height: 2.9rem; background: var(--francobollo) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); pointer-events: none; }
.scheda__retro { transform: rotateY(180deg); }
.faccia__in { position: relative; padding: 1.2rem 1.15rem; }
.scheda__nome { margin: 0 0 .9rem; padding-right: 3rem; font: 500 1.55rem/1.15 var(--f-titoli); }
.scheda__testa { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: nowrap; margin-bottom: .6rem; }
.scheda__testa .scheda__nome { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; overflow-wrap: anywhere; }   /* il nome va a capo se serve: i 2 flag restano in alto a destra */
.scheda__minore { display: flex; align-items: center; gap: .45rem; justify-content: flex-start; margin: 0; max-width: none; padding: .3rem .55rem; text-align: left; font-size: .9rem; line-height: 1.2; font-weight: 400; color: var(--c-testo); border: 2px solid var(--c-accento); border-radius: .6rem; cursor: pointer; }
.scheda__flags { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: .35rem; }   /* 2 flag impilati, a destra del nome */
.scheda__minore small { display: block; font-size: .72em; line-height: 1.2; opacity: .85; }
.scheda__minore input { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; }
.scheda .nota { font-size: 1rem; }
.retro__titolo { margin: 0 0 .4rem; font: italic 1.7rem var(--f-titoli); color: var(--c-accento); }
.scheda__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; margin-top: .6rem; }
.scheda__azioni .esito { flex-basis: 100%; margin: 0; min-height: 0; }
.scheda input[type="email"], .scheda textarea { width: 100%; margin: .75rem 0; }
.scheda--nota .scheda__faccia { position: relative; }
.scheda-wrap:has(.scheda--nota) { width: 84%; margin-inline: auto; }
.scheda--nota .faccia__in { padding: .7rem .85rem; }
.scheda--nota .scheda__fronte::after { top: .6rem; right: .6rem; width: 1.7rem; height: 2.15rem; }
.scheda--nota textarea { margin: .4rem 0; }
.scheda--nota .btn { padding: .5rem 1.1rem; font-size: .68rem; }
.nota__titolo { margin: 0 0 .3rem; padding-right: 2.2rem; font: 500 1.05rem/1.2 var(--f-titoli); }

/* Le tre risposte: stessa dimensione del testo; solo "PARTECIPERÒ!" è in grassetto */
.opzioni { display: grid; gap: .55rem; }
.opzione { padding: .9rem 1rem; border: 1px solid var(--c-linea); border-radius: 999px; background: var(--c-superficie); color: var(--c-testo); font: 400 1.05rem var(--f-testo); letter-spacing: .04em; cursor: pointer; transition: all .25s; }
.opzione--si { font-weight: 700; border-color: var(--c-accento); color: var(--c-accento); }
.opzione:hover, .opzione[aria-pressed="true"] { background: var(--c-accento); border-color: var(--c-accento); color: var(--c-su-accento); }

/* Riga di riepilogo di una cartolina completata (resta dentro la scatola) */
.scheda-fatta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.1rem; background: var(--c-superficie); border: 1px solid var(--c-accento); border-radius: .5rem; color: var(--c-testo); font-size: .92rem; box-shadow: 0 5px 12px -8px rgba(0,0,0,.5); animation: compare .5s; }
.scheda-fatta .btn--link { margin: 0; color: var(--c-accento); }
@keyframes compare { from { opacity: 0; transform: translateY(-.5rem); } }

/* Icone cerchiate (.tondo è in pagine.css): diete più grandi e colorate, 14 allergeni su 2 file da 7 */
.diete { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .5rem 0 1.1rem; }
.allergeni { display: grid; grid-template-columns: repeat(7, 1fr); gap: .7rem .15rem; margin: .5rem 0 1.1rem; }
.dieta, .allergene { display: grid; justify-items: center; align-content: start; gap: .3rem; padding: 0; border: 0; background: none; color: var(--c-testo-soft); font: inherit; cursor: pointer; }
.allergene .tondo { width: clamp(2rem, 9.6vw, 2.7rem); border-width: 1.2px; }
.tondo__nome { font-size: clamp(.5rem, 1.9vw, .64rem); line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.dieta .tondo { width: clamp(3.6rem, 16vw, 4.6rem); border-width: 2px; }
.dieta .tondo svg, .guida__diete .tondo svg { width: 84%; }
.dieta .tondo__nome { font-size: .8rem; font-weight: 600; }
.dieta--onnivoro { color: var(--c-onnivoro); } .dieta--vegetariano { color: var(--c-vegetariano); } .dieta--vegano { color: var(--c-vegano); }
.dieta[aria-pressed="true"] .tondo { background: currentColor; }
.dieta[aria-pressed="true"] .tondo svg { color: #fff; }
.allergene[aria-pressed="true"] { color: var(--c-accento); }
.allergene[aria-pressed="true"] .tondo { background: var(--c-accento); color: var(--c-su-accento); border-color: var(--c-accento); }
.allergene[aria-pressed="true"] .tondo__nome { color: var(--c-accento); font-weight: 600; }
.dieta:focus-visible, .allergene:focus-visible, .opzione:focus-visible { outline: 2px solid var(--c-accento); outline-offset: 3px; border-radius: .6rem; }

/* Grazie: la stessa cartolina, senza francobollo */
.cartolina--grazie::after { display: none; }

/* Guida alla compilazione (in fondo alla pagina), compatta */
.guida { margin-top: 1.6rem; padding: 0 .5rem; color: var(--c-testo-soft); font-size: .9rem; }
.guida h2 { margin-bottom: .4rem; font: italic 1.7rem var(--f-titoli); color: var(--c-accento); }
.guida ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .15rem; }
.guida .nota { margin: .25rem 0 0; font-size: inherit; color: inherit; }
.guida__diete { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .3rem; }
.guida__diete li { display: flex; align-items: center; gap: .6rem; }
.guida__diete .tondo { width: 2.4rem; }
.guida .btn { margin-top: .6rem; padding: .6rem 1.2rem; font-size: .68rem; }

/* ==========================================================================
   Strato delle animazioni
   ========================================================================== */
.fx { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.fx > * { position: absolute; }

/* Coperchio che si taglia e si apre */
.fx-coperchio { perspective: 1600px; }
.fx-meta { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.fx-meta--sx { left: 0; transform-origin: 0 50%; } .fx-meta--dx { right: 0; transform-origin: 100% 50%; }
.fx-meta__fronte, .fx-meta__dorso { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fx-meta__fronte { box-sizing: border-box; background: var(--c-cartone); border: 3px solid var(--c-salvia-scuro); box-shadow: inset 0 0 0 4px var(--c-cartone), inset 0 0 0 5px var(--c-salvia-scuro), 0 6px 12px -6px rgba(0,0,0,.5); }
.fx-meta--sx .fx-meta__fronte { border-radius: .7rem 0 0 .7rem; } .fx-meta--dx .fx-meta__fronte { border-radius: 0 .7rem .7rem 0; }
.fx-meta__dorso { transform: rotateY(180deg); box-sizing: border-box; background: var(--c-cartone-scuro); border: 3px solid var(--c-salvia-scuro); }
.fx-meta--sx .fx-meta__dorso { border-radius: .7rem 0 0 .7rem; } .fx-meta--dx .fx-meta__dorso { border-radius: 0 .7rem .7rem 0; }
.fx-clone { position: absolute; top: 0; margin: 0 !important; }
.fx-meta--sx .fx-clone { left: 0; } .fx-meta--dx .fx-clone { right: 0; }
.fx-taglio { left: 50%; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--c-su-cartone); transform-origin: top; z-index: 3; }

/* Foglio / aeroplanino piegato (240×120): ogni pezzo ha un bordo ben visibile */
.fx-foglio { position: relative; display: grid; align-content: start; background: var(--c-superficie); border: 2px solid var(--c-accento); border-radius: .4rem; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); font: 500 1.15rem var(--f-titoli); color: var(--c-testo); overflow: hidden; }
.fx-foglio span { display: grid; place-items: center; height: 50%; padding: 0 .5rem; text-align: center; }
.fx-foglio::after { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 15px, var(--c-rosa) 15px 16px); }
.fx-nome { fill: var(--c-testo); font: 500 18px var(--f-titoli); text-anchor: middle; dominant-baseline: central; }
.fx-righe { fill: none; stroke: var(--c-rosa); stroke-width: 1; }
.fx-aereo { width: 240px; height: 120px; perspective: 900px; }
.fx-corpo { position: absolute; inset: 0; transform-style: preserve-3d; }
.fx-pz { position: absolute; left: 0; top: 0; width: 240px; height: 120px; transform-style: preserve-3d; }
.fx-pz svg { position: absolute; left: 0; top: 0; width: 240px; height: 120px; }
.fx-pz polygon { fill: var(--c-superficie); stroke: var(--c-accento); stroke-width: 2; stroke-linejoin: round; }
.fx-sup, .fx-inf { transform-origin: 0 60px; }
.fx-copia { position: absolute; }
.fx-as, .fx-ai { transform-origin: 240px 60px; }

/* Busta: dorso, linguetta, cartolina, tasca, francobollo (dimensioni date da js/partecipazione-fx.js) */
.fx-busta { perspective: 900px; }
.fx-busta > .scheda { position: absolute; }
.bu { position: absolute; inset: 0; } .bu svg { width: 100%; height: 100%; display: block; }
.bu polygon, .bu rect { stroke: var(--c-accento); stroke-width: 2; stroke-linejoin: round; }
.bu--dorso rect { fill: var(--c-rosa); } .bu--fronte polygon { fill: var(--c-accento-chiaro); } .bu--linguetta polygon { fill: var(--c-rosa); }
.bu--linguetta { transform-origin: 50% 0; z-index: 1; } .bu--fronte { z-index: 3; }
.bu__riga { fill: none; stroke: var(--c-accento); stroke-width: 1.5; stroke-linecap: round; }
.bu-franco { position: absolute; z-index: 5; top: 9px; right: 11px; width: 36px; height: 45px; background: var(--francobollo) center / 100% 100% no-repeat; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* Fuochi d'artificio e collina */
.fx-scena { overflow: hidden; border: 2px solid var(--c-cielo-alto); border-radius: .6rem; background: linear-gradient(180deg, var(--c-cielo-alto), var(--c-cielo)); box-shadow: 0 14px 34px -12px rgba(0,0,0,.6); }
.fx-scena i { position: absolute; display: block; }
.fx-stella { width: 2px; height: 2px; border-radius: 50%; background: var(--c-stella); animation: brilla 1.6s ease-in-out infinite alternate; }
@keyframes brilla { from { opacity: .2; } }
.fx-razzo { width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, var(--c-stella), transparent); }
.fx-scintilla { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; }
.fx-bino { filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.fx-bino .fx-scena { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.fx-bino__bordo { position: absolute; inset: 0; } .fx-bino__bordo svg { width: 100%; height: 100%; display: block; }
.bi-ombra { fill: none; stroke: var(--c-sagoma); stroke-width: 9; stroke-linejoin: round; } .bi-luce { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; }
.bi-ponte { fill: var(--c-sagoma); stroke: rgba(255,255,255,.3); stroke-width: 1; }
.fx-bordo { filter: drop-shadow(2px 0 0 var(--c-accento)) drop-shadow(-2px 0 0 var(--c-accento)) drop-shadow(0 2px 0 var(--c-accento)) drop-shadow(0 -2px 0 var(--c-accento)); }
.fx-pieghe { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .75;
  background: linear-gradient(115deg, transparent 38%, rgba(0,0,0,.16) 40%, transparent 42%, transparent 60%, rgba(0,0,0,.12) 62%, transparent 64%), linear-gradient(25deg, transparent 45%, rgba(0,0,0,.16) 47%, transparent 49%); }

/* Spedizione: aeroplanini, scatola chiusa con nastro, etichetta, francobollo e timbro */
.fx-piano { left: 0; top: 0; width: 132px; height: 66px; transform-origin: 50% 50%; }
.fx-piano svg { width: 100%; height: 100%; }
.fx-piano polygon { fill: var(--c-superficie); stroke: var(--c-accento); stroke-width: 1.1; stroke-linejoin: round; } .fx-piano polygon + polygon { fill: var(--c-rosa); }
.fx-piano path { fill: none; stroke: var(--c-accento); stroke-width: .9; }
.fx-lettera-mini { left: 0; top: 0; width: 110px; height: 75px; transform-origin: 50% 50%; }
.fx-lettera-mini svg { width: 100%; height: 100%; }
.fx-lettera-mini rect { fill: var(--c-accento-chiaro); stroke: var(--c-accento); stroke-width: 1.1; stroke-linejoin: round; }
.fx-lettera-mini polyline { fill: var(--c-rosa); stroke: var(--c-accento); stroke-width: 1.1; stroke-linejoin: round; }
.fx-nastro { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.8rem; margin-left: -.9rem; background: var(--c-nastro); border-inline: 2px solid var(--c-salvia-scuro); transform-origin: top; z-index: 3; }
.fx-etichetta { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(72%, 15rem); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-2deg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .9rem; padding: 1.2rem; text-align: center;
  background: var(--c-superficie); border: 1px solid var(--c-linea); outline: 1px solid var(--c-rosa); outline-offset: -8px; color: var(--c-testo); box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.fx-etichetta__testo { font: italic 400 clamp(1.6rem, 8vw, 2.2rem)/1.1 var(--f-corsivo); color: var(--c-accento); }
.fx-etichetta small { font: 500 .68rem var(--f-testo); letter-spacing: .22em; text-transform: uppercase; color: var(--c-testo-soft); }
.fx-franco { top: 3%; right: 4%; opacity: 1; z-index: 5; width: 44px; height: 55px; }

@media (prefers-reduced-motion: reduce) {
  .scatola.aperta .scheda-wrap, .scheda-fatta { animation: none; }
  .scheda__giro { transition: none; }
}
.intro[data-cfg$="testoNome"] { max-width: none; margin-bottom: 1.1rem; font-size: .8rem; line-height: 1.35; }