/* ---------------------------------------------------------------
   La scena: tavolo, busta con ceralacca, foglio piegato, caselle.
   Usata identica nell'anteprima del personalizzatore e dal vivo.
   --------------------------------------------------------------- */

.scena{
  position:fixed; inset:0;
  display:grid; place-items:center;
  overflow:hidden;
  background:#070a14;
  perspective:1400px;
  perspective-origin:50% 42%;
  transition:background 1.4s ease;
  --luce-x:50%; --luce-y:30%;
}
/* dentro il personalizzatore la scena vive in un riquadro */
.scena.incastonata{ position:absolute; border-radius:var(--raggio); }

/* piano d'appoggio: lino chiaro con una luce morbida che segue il dito */
.scena::before{
  content:''; position:absolute; inset:-10%; z-index:1; pointer-events:none;
  background:radial-gradient(46% 40% at var(--luce-x) var(--luce-y), rgba(160,185,255,.045), transparent 70%);
  transition:opacity 1.4s ease;
}
.scena.notte{ background:#05070f; }

/* cielo stellato che compare solo nel finale felice */
.cielo{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; pointer-events:none; z-index:1; }
.scena.notte .cielo{ opacity:1; }
.scena > .notte-sfondo{ position:absolute; z-index:0; }
.scena > *:not(.notte-sfondo){ z-index:2; }

.palco{
  position:relative;
  width:min(94vw, 470px);
  transform-style:preserve-3d;
  display:grid; place-items:center;
}
.palco.fluttua{ animation:fluttua 8.5s ease-in-out infinite; }
@keyframes fluttua{
  0%,100%{ transform:translateY(0) rotate(-.7deg); }
  50%{ transform:translateY(-14px) rotate(.9deg); }
}
@media (prefers-reduced-motion: reduce){ .palco.fluttua{ animation:none; } }

/* =============== BUSTA ================================================ */

.busta{
  position:relative;
  width:min(88vw, 430px);
  aspect-ratio:1.5/1;
  transform-style:preserve-3d;
  cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), opacity .5s ease;
  -webkit-tap-highlight-color:transparent;
}
.busta:hover{ transform:translateY(-6px) rotate(-.6deg); }
.busta.aperta{ pointer-events:none; }
.busta.via{ opacity:0; transform:translateY(26px) scale(.94); }

.busta-corpo{
  position:absolute; inset:0;
  background:linear-gradient(12deg, #e2cfa8 0%, #d9c5a0 40%, #cbb58d 100%);
  border-radius:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.5), 0 26px 70px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.35);
}
/* le due alette laterali e quella inferiore, appena accennate */
.busta-corpo::before{
  content:''; position:absolute; inset:0; border-radius:5px;
  background:
    linear-gradient(to bottom right, rgba(0,0,0,.06) 0 49.6%, transparent 49.6%) left/50% 100% no-repeat,
    linear-gradient(to bottom left,  rgba(0,0,0,.06) 0 49.6%, transparent 49.6%) right/50% 100% no-repeat;
  opacity:.85;
}
.busta-corpo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(to top, rgba(255,255,255,.35), rgba(255,255,255,0));
  clip-path:polygon(0 100%, 50% 0, 100% 100%);
  border-radius:0 0 5px 5px;
}

/* patta superiore: si apre ruotando all'indietro */
.busta-patta{
  position:absolute; left:0; right:0; top:0; height:58%;
  transform-origin:top center;
  transform:rotateX(0deg);
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.6,-0.15,.3,1.1);
  z-index:3;
}
.busta-patta::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(178deg, #dcc9a4, #c9b489);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 3px 4px rgba(90,70,40,.28));
}
.busta.aperta .busta-patta{ transform:rotateX(-172deg); z-index:0; }

/* ceralacca */
.sigillo{
  position:absolute; left:50%; top:52%;
  width:clamp(64px, 17vw, 84px); aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-7deg);
  z-index:5;
  transition:transform .5s ease, opacity .5s ease;
  filter:drop-shadow(0 3px 5px rgba(80,20,10,.45));
}
.sigillo svg{ width:100%; height:100%; display:block; }
.sigillo .iniziale{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:2.1rem; color:#5e1109;
  text-shadow:0 1px 0 rgba(255,190,170,.35), 0 -1px 1px rgba(0,0,0,.4);
  pointer-events:none;
}
.busta.aperta .sigillo{ animation:sigillo-rompi .5s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes sigillo-rompi{
  0%{ transform:translate(-50%,-50%) rotate(-7deg) scale(1); }
  35%{ transform:translate(-50%,-50%) rotate(-7deg) scale(1.12); }
  100%{ transform:translate(-50%,-58%) rotate(-14deg) scale(.9); opacity:0; }
}
/* le due metà del sigillo che schizzano via */
.scheggia{ position:absolute; left:50%; top:52%; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:6; opacity:0; pointer-events:none; }

.busta-etichetta{
  position:absolute; left:0; right:0; bottom:12%;
  text-align:center; font-family:var(--mano); font-size:1.5rem; color:#54431f;
  z-index:2; opacity:.92; transition:opacity .35s ease;
  padding:0 12%;
}
.busta.aperta .busta-etichetta{ opacity:0; }


.suggerimento{
  position:absolute; left:0; right:0; bottom:-3.2em;
  text-align:center; font:400 .82rem/1.5 var(--sans); color:rgba(236,228,210,.6);
  animation:respiro 2.6s ease-in-out infinite;
}
@keyframes respiro{ 0%,100%{ opacity:.55; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

/* =============== FOGLIO =============================================== */

.foglio-strato{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transform-style:preserve-3d;
  pointer-events:none;
}
.foglio-strato.attivo{ pointer-events:auto; }

.foglio{
  position:relative;
  width:min(88vw, 430px);
  min-height:min(74vh, 560px);
  padding:clamp(26px, 6vw, 40px) clamp(24px, 6vw, 38px) clamp(30px, 7vw, 46px);
  background:#f3ead4;
  border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.5), 0 30px 80px -20px rgba(0,0,0,.8);
  transform-style:preserve-3d;
  display:flex; flex-direction:column;
  transition:transform .6s cubic-bezier(.2,.8,.3,1), box-shadow .6s ease, filter .8s ease;
  --colore-inchiostro:var(--biro);
  color:var(--colore-inchiostro);
}
/* luce: calda dal basso (lampione), fredda in cima (stelle) */
.luce-foglio{
  position:absolute; inset:0; border-radius:3px; pointer-events:none; z-index:3;
  background:
    linear-gradient(to top, rgba(255,150,55,.30), rgba(255,150,55,0) 58%),
    linear-gradient(to bottom, rgba(120,150,220,.11), rgba(120,150,220,0) 42%);
  mix-blend-mode:overlay;
}
.luce-foglio::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(255,170,80,.10), transparent 55%);
}

/* stropicciatura: rilievo generato con il rumore, moltiplicato sulla carta */
.foglio::before{
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='560'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='5' seed='7' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='2.4' diffuseConstant='1' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='125' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='400' height='560' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:cover;
  mix-blend-mode:multiply;
  opacity:.42;
}
/* seconda passata più larga: le grinze grosse */
.foglio::after{
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='560'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' seed='19' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='5' diffuseConstant='1' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='230' elevation='50'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='400' height='560' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:cover; mix-blend-mode:multiply; opacity:.3;
}

/* pieghe: la croce di chi ha piegato il foglio in quattro */
.pieghe{ position:absolute; inset:0; pointer-events:none; border-radius:3px; overflow:hidden; }
.pieghe span{ position:absolute; background:linear-gradient(90deg, transparent, rgba(120,100,70,.24) 45%, rgba(255,255,255,.7) 52%, transparent); }
.pieghe .v{ top:0; bottom:0; left:50%; width:14px; margin-left:-7px; }
.pieghe .o{ left:0; right:0; top:50%; height:14px; margin-top:-7px; background:linear-gradient(180deg, transparent, rgba(120,100,70,.24) 45%, rgba(255,255,255,.7) 52%, transparent); }

/* righe e quadretti */
.foglio[data-carta="righe"] .rigatura{
  position:absolute; inset:0; border-radius:3px; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, transparent 0 33px, rgba(90,120,160,.34) 33px 34px);
  background-position:0 60px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 46px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 46px);
}
.foglio[data-carta="quadretti"] .rigatura{
  position:absolute; inset:0; border-radius:3px; pointer-events:none; opacity:.45;
  background:
    repeating-linear-gradient(to bottom, transparent 0 21px, rgba(90,120,160,.3) 21px 22px),
    repeating-linear-gradient(to right,  transparent 0 21px, rgba(90,120,160,.3) 21px 22px);
}
.foglio[data-carta="avorio"] .rigatura{ display:none; }
.foglio[data-carta="avorio"]{ background:#efe3c6; }
.foglio[data-carta="quadretti"]{ background:#f4ecd9; }

/* margine rosso del quaderno */
.foglio[data-carta="righe"] .rigatura::after{
  content:''; position:absolute; top:0; bottom:0; left:clamp(20px,5.5vw,32px); width:1.5px;
  background:rgba(190,80,80,.4);
}

/* inchiostri */
.foglio[data-inchiostro="blu"]  { --colore-inchiostro:#26356f; }
.foglio[data-inchiostro="nero"] { --colore-inchiostro:#14171d; }
.foglio[data-inchiostro="rosso"]{ --colore-inchiostro:#9d2b23; }

/* grafie */
.foglio[data-grafia="caveat"]  .scritto{ font-family:'Caveat', cursive; }
.foglio[data-grafia="shadows"] .scritto{ font-family:'Shadows Into Light', cursive; }
.foglio[data-grafia="gloria"]  .scritto{ font-family:'Gloria Hallelujah', cursive; }

.contenuto{ position:relative; z-index:2; display:flex; flex-direction:column; flex:1; }

.scritto{
  font-family:'Caveat', cursive;
  color:var(--colore-inchiostro);
  line-height:1.35;
  /* la penna scrive con pressioni leggermente diverse */
  text-shadow:0 0 .4px currentColor;
}
.saluto{ font-size:clamp(1.5rem,5.4vw,1.85rem); margin:0 0 .35em; opacity:.92; }
.domanda{ font-size:clamp(2.05rem,8.6vw,2.9rem); font-weight:600; margin:0 0 .1em; letter-spacing:.005em; }
.firma{ font-size:clamp(1.4rem,5vw,1.7rem); text-align:right; margin-top:auto; padding-top:1.2em; opacity:.9; }

/* ogni lettera è nascosta finché la penna non ci passa sopra */
.let{ display:inline-block; opacity:0; }
.let.scritta{ opacity:1; }
.sp{ white-space:pre-wrap; }

/* pennino che corre sulla riga */
.pennino{
  position:absolute; z-index:9; width:26px; height:34px; left:0; top:0;
  margin:-26px 0 0 -3px;
  opacity:0; pointer-events:none;
  transform-origin:6px 30px;
  transition:opacity .18s ease;
  will-change:transform;
}
.pennino.visibile{ opacity:1; }

/* =============== CASELLE ============================================== */

.caselle{
  display:flex; gap:clamp(14px,5vw,30px); align-items:flex-start;
  margin:clamp(18px,5vw,30px) 0 0; flex-wrap:wrap;
}
.casella{
  position:relative;
  display:inline-flex; align-items:center; gap:.5em;
  background:none; border:0; padding:6px 8px 6px 4px; margin:0;
  cursor:pointer; color:var(--colore-inchiostro);
  font-family:inherit;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1), opacity .35s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.casella:disabled{ cursor:default; }
.casella .quadro{ position:relative; width:var(--lato,44px); height:var(--lato,44px); flex:none; transition:width .4s cubic-bezier(.3,1.4,.5,1), height .4s cubic-bezier(.3,1.4,.5,1); }
.casella .quadro svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.casella .etichetta{ font-family:inherit; font-size:calc(var(--lato,44px) * .62); line-height:1; transition:font-size .4s ease; }
.casella:hover:not(:disabled){ transform:rotate(-1.2deg) scale(1.03); }
.casella:focus-visible{ outline:none; }
.casella:focus-visible .quadro::after{
  content:''; position:absolute; inset:-8px; border:2px dashed var(--rosa); border-radius:8px;
}
.casella .tratto{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.casella .bordo{ stroke-width:2.4; }
.casella .spunta{ stroke-width:3.4; }
.casella .sbavatura{ stroke-width:5; opacity:.16; filter:blur(1.4px); }

.casella[data-v="no"].mini{ --lato:20px; opacity:.75; }
.casella[data-v="si"].maxi{ --lato:70px; }

/* =============== MOTIVI (foglietti piegati) =========================== */

.motivi{ display:flex; gap:10px; margin:clamp(14px,4vw,22px) 0 0; flex-wrap:wrap; }
.motivo{
  position:relative; border:0; padding:0; background:none; cursor:pointer;
  width:clamp(72px,22vw,96px); min-height:56px;
  font-family:inherit; color:var(--colore-inchiostro);
  transition:transform .3s cubic-bezier(.3,1.3,.5,1);
  -webkit-tap-highlight-color:transparent;
}
.motivo:hover{ transform:translateY(-3px) rotate(1.5deg); }
.motivo .cartina{
  position:relative; display:block; padding:9px 10px; min-height:56px;
  background:#f4ecd8; border-radius:2px;
  box-shadow:0 1px 2px rgba(90,70,40,.2), 0 6px 12px -8px rgba(90,70,40,.5);
  font-family:'Caveat',cursive; font-size:1.02rem; line-height:1.18; text-align:left;
  transform:rotate(var(--incl,-2deg));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.motivo .cartina::after{ /* angolo piegato */
  content:''; position:absolute; right:0; top:0; width:16px; height:16px;
  background:linear-gradient(225deg, #e2d6ba 50%, transparent 50%);
  box-shadow:-1px 1px 2px rgba(0,0,0,.14);
}
.motivo .chiuso{ display:grid; place-items:center; min-height:38px; opacity:.65; font-size:1.5rem; }
.motivo.aperto .cartina{ transform:rotate(var(--incl,-2deg)) scale(1.04); background:#f8f2e3; }
.motivo .testo{ display:none; }
.motivo.aperto .testo{ display:block; }
.motivo.aperto .chiuso{ display:none; }

/* =============== INSISTENZE E RISPOSTA ================================ */

.replica{
  font-family:'Caveat',cursive; color:var(--colore-inchiostro);
  font-size:clamp(1.35rem,5vw,1.7rem); line-height:1.25;
  margin:.5em 0 0; min-height:1.3em;
}
.cancellato{ position:relative; opacity:.55; }
.cancellato::after{
  content:''; position:absolute; left:-2%; right:-2%; top:52%; height:2.5px;
  background:currentColor; border-radius:2px;
  transform:rotate(-1.2deg); transform-origin:left;
  animation:scarabocchia .45s ease forwards;
}
@keyframes scarabocchia{ from{ transform:rotate(-1.2deg) scaleX(0); } to{ transform:rotate(-1.2deg) scaleX(1); } }

.risposta-lei{ margin-top:1.1em; }
.riga-risposta{
  width:100%; background:transparent; border:0; border-bottom:2px dashed rgba(0,0,0,.18);
  font-family:'Caveat',cursive; font-size:clamp(1.3rem,4.6vw,1.6rem);
  color:var(--colore-inchiostro); padding:.15em .1em .25em; resize:none; overflow:hidden;
  line-height:1.4; min-height:2.6em;
}
.riga-risposta:focus{ outline:none; border-bottom-color:currentColor; box-shadow:none; }
.riga-risposta::placeholder{ color:currentColor; opacity:.32; }

.azioni-foglio{ display:flex; gap:10px; flex-wrap:wrap; margin-top:1em; align-items:center; }

/* =============== FUOCO ================================================ */

.foglio.brucia{ filter:contrast(1.06) sepia(.12); }
.tela{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:20; }
.tela-fondo{ z-index:1; }

.epilogo{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:8vw; opacity:0; pointer-events:none; transition:opacity 1.4s ease;
  font-family:'Caveat',cursive; font-size:clamp(1.6rem,6vw,2.2rem); line-height:1.35;
  color:#e8ded0;
}
.epilogo.visibile{ opacity:1; pointer-events:auto; }

/* =============== FINALE FELICE ======================================== */

.foglio.illuminato{
  box-shadow:0 0 0 1px rgba(255,220,170,.25), 0 10px 40px -6px rgba(255,190,120,.45), 0 40px 90px -30px rgba(0,0,0,.8);
}
.messaggio-finale{
  font-family:'Caveat',cursive; font-size:clamp(1.5rem,5.4vw,1.9rem);
  line-height:1.32; color:var(--colore-inchiostro);
}
.barra-fine{
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.barra-fine.visibile{ opacity:1; transform:none; }

/* audio */
.altoparlante{
  position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:40;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.18); cursor:pointer;
  color:#e8dfd0; backdrop-filter:blur(6px); transition:background .2s;
}
.altoparlante:hover{ background:rgba(255,255,255,.2); }

/* attesa (link con data futura) */
.attesa{ text-align:center; color:#d9cdb4; font-family:var(--sans); }
.attesa .conto{ font-family:var(--serif); font-size:clamp(2.2rem,9vw,3.4rem); letter-spacing:.02em; margin:.2em 0 0; font-variant-numeric:tabular-nums; }

@media (max-height:660px){
  .foglio{ min-height:min(78vh,470px); padding-top:22px; padding-bottom:26px; }
  .domanda{ font-size:clamp(1.8rem,7.4vw,2.4rem); }
}

/* =============== PIEGATURA (il foglio che si apre in due) ============= */

.piegatura{
  position:absolute; transform-style:preserve-3d; pointer-events:none;
  z-index:8; filter:drop-shadow(0 18px 30px rgba(70,50,25,.4));
}
.piegatura .meta{
  position:absolute; left:0; right:0; height:50%;
  background:var(--carta);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' seed='3' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='2' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='125' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:cover; background-blend-mode:multiply;
  box-shadow:0 1px 2px rgba(80,60,30,.18);
}
.piegatura .giu{ bottom:0; border-radius:0 0 3px 3px; }
.piegatura .su{
  top:0; border-radius:3px 3px 0 0;
  transform-origin:bottom center; transform:rotateX(-179deg);
  transition:transform 1.05s cubic-bezier(.34,.02,.2,1);
  box-shadow:0 -1px 3px rgba(80,60,30,.22);
}
.piegatura.aperta .su{ transform:rotateX(0deg); }
.piegatura .ombra{
  position:absolute; left:0; right:0; top:0; height:50%;
  background:linear-gradient(to bottom, rgba(70,50,25,.34), rgba(70,50,25,0));
  opacity:1; transition:opacity 1.05s ease; pointer-events:none;
}
.piegatura.aperta .ombra{ opacity:0; }

/* stato "dopo la risposta": si fa spazio al messaggio */
.foglio.dopo .domanda{ font-size:clamp(1.5rem,6vw,2rem); }
.foglio.dopo .motivi{ display:none; }
.foglio .contenuto{ overflow-y:auto; overscroll-behavior:contain; }
.foglio .contenuto::-webkit-scrollbar{ width:0; }

.puff{ animation:puff .45s ease forwards; }
@keyframes puff{ to{ transform:scale(1.5) rotate(12deg); opacity:0; } }

/* =============== STRAPPO E VORTICE ==================================== */

.frammento{
  position:absolute; z-index:12; pointer-events:none;
  will-change:transform, opacity;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.frammento > .foglio{ position:absolute; inset:0; margin:0; transition:none; animation:none; }

/* la risposta scritta sul retro dell'epilogo */
.epilogo .barra-epilogo{
  margin-top:1.6em; display:flex; flex-direction:column; gap:12px; align-items:center;
  font-size:1rem; font-family:var(--sans);
}

/* quando la coda è visibile, il foglio le fa spazio */
.palco.in-coda{
  transform:translateY(-6vh) scale(.92);
  transition:transform 1s cubic-bezier(.2,.8,.3,1);
}
.barra-fine{
  background:linear-gradient(to top, rgba(5,7,15,.92) 55%, transparent);
  padding-top:34px;
}