/* Simulatore timbro — pagina Timbri (dal lavoro del 20/09/2026, pubblicato il 01/10/2026). Caricato solo da timbri.html. */
/* ====== SIMULATORE TIMBRO ====== */
.sim { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.2rem; align-items: start; }
.sim-form label { display: block; font-weight: 800; margin-bottom: .4rem; }
.sim-form textarea {
  width: 100%; border: 2px solid #e4ebe7; border-radius: 16px; padding: .9rem 1rem;
  font: 500 1rem/1.45 Manrope, sans-serif; resize: vertical; background: #fff; color: #23201a;
}
.sim-form textarea:focus { outline: none; border-color: var(--salvia-scuro, #41675b); }
.sim-hint { font-size: .85rem; color: var(--inchiostro-70, #6b6660); margin-top: .45rem; }
.sim-row { margin-top: 1.1rem; }
.sim-row > span.lab { display: block; font-weight: 800; margin-bottom: .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  border: 2px solid #e4ebe7; background: #fff; border-radius: 999px; padding: .45rem .95rem;
  font: 700 .9rem Manrope, sans-serif; cursor: pointer; color: #23201a; transition: .15s;
}
.chip:hover { border-color: var(--salvia, #cfe0d7); }
.chip[aria-pressed="true"] { background: var(--salvia-scuro, #41675b); border-color: var(--salvia-scuro, #41675b); color: #fff; }
.chip-ink { display: inline-flex; align-items: center; gap: .45rem; }
.chip-ink i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.sim-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.btn-timbra { font-size: 1.02rem; }
.btn-timbra .em { font-size: 1.15rem; }

/* documento */
.doc-wrap { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 26px 60px -34px rgba(0,0,0,.55); background: #cdd8d2; padding: 6%; }
.doc {
  position: relative; aspect-ratio: 1/1.32; background: #fdfcf8; border-radius: 6px;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); padding: 7% 7% 5%;
  font: 400 clamp(6px, 1.35vw, 11px)/1.5 Helvetica, Arial, sans-serif; color: #2b2b2b; overflow: hidden;
}
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #e3e0d8; padding-bottom: .6em; }
.doc-head strong { font-size: 1.25em; letter-spacing: .02em; }
.doc-meta { text-align: right; color: #7a7a7a; }
.doc-rows { margin-top: 1.1em; display: grid; gap: .55em; }
.doc-rows div { height: .55em; background: #ecebe4; border-radius: 3px; }
.doc-rows div:nth-child(2) { width: 82%; }
.doc-rows div:nth-child(4) { width: 64%; }
.doc-rows div:nth-child(6) { width: 74%; }
.doc-tot { margin-top: 1.2em; display: flex; justify-content: flex-end; gap: 1.2em; color: #7a7a7a; }
.doc-sign { position: absolute; left: 7%; right: 7%; bottom: 6%; display: flex; justify-content: space-between; align-items: flex-end; color: #9a9a9a; }
.doc-sign span { border-top: 1px solid #ddd9d0; padding-top: .35em; width: 42%; text-align: center; }
.sign-zone { position: absolute; left: 8%; bottom: 13%; width: 46%; aspect-ratio: 1.6/1; }

/* impronta */
.impronta {
  position: absolute; inset: 0; display: grid; place-items: end center; opacity: 0;
  transform: rotate(-2deg) scale(.98); transition: opacity .1s linear;
  mix-blend-mode: multiply; pointer-events: none;
}
.impronta.on { opacity: 1; }
.imp-box {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.7' intercept='-.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.7' intercept='-.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 180px; mask-size: 180px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  box-sizing: border-box; text-align: center; font-family: Helvetica, Arial, sans-serif;
  line-height: 1.22; letter-spacing: .01em; filter: blur(.15px);
}
/* cornice: disegnata con un'ombra interna in "em", così resta proporzionata
   a qualsiasi dimensione dell'impronta (anche ingrandita) */
.imp-box.rett { padding: 2% 3%; }
.imp-box.quad { padding: 3%; }
.imp-box.tondo { border-radius: 50%; padding: 6%; }
.imp-box b { font-weight: 700; }
.imp-box span { display: block; white-space: nowrap; }

/* timbro che scende — due fotogrammi: a riposo e compresso */
.stamp-rig {
  position: absolute; left: 50%; bottom: 0; width: 180px;
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 16px 16px rgba(0,0,0,.26));
  --gap: 0px;   /* spazio trasparente sotto il timbro nella foto */
  --squash: 0px; /* di quanto si abbassa il fotogramma compresso */
}
.stamp-rig img { display: block; width: 100%; height: auto; }
.stamp-rig .frame-premuto { position: absolute; left: 0; top: 0; transform: translateY(var(--squash)); opacity: 0; }
.stamp-rig.premuto .frame-riposo { opacity: 0; }
.stamp-rig.premuto .frame-premuto { opacity: 1; }
.stamp-rig.run { animation: timbrata 1.45s cubic-bezier(.36,.72,.28,1) forwards; }
/* Niente dissolvenze: il timbro è sempre pieno, entra ed esce dal bordo del foglio
   (il documento ha overflow:hidden, quindi fuori dal foglio non si vede). */
@keyframes timbrata {
  0%   { opacity: 1; transform: translate(-50%, calc(-150% + var(--gap))) rotate(-5deg); }
  16%  { transform: translate(-50%, calc(-62% + var(--gap))) rotate(-3deg); }
  40%  { transform: translate(-50%, calc(-4% + var(--gap))) rotate(-2deg); }
  46%  { transform: translate(-50%, var(--gap)) rotate(-2deg); }
  58%  { transform: translate(-50%, var(--gap)) rotate(-2deg); }
  66%  { transform: translate(-50%, calc(-10% + var(--gap))) rotate(-2deg); }
  99%  { opacity: 1; transform: translate(-50%, calc(-150% + var(--gap))) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, calc(-150% + var(--gap))) rotate(-1deg); }
}
/* vista ravvicinata dell'impronta: il foglio si avvicina verso il punto timbrato */
.doc { transition: transform .75s cubic-bezier(.3,.8,.3,1); will-change: transform; }
.doc.zoom { transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(var(--zoom, 2.6)); cursor: zoom-out; }
/* su schermo grande l'ingrandimento si sposta 2 cm in basso e 2 cm a sinistra */
@media (min-width: 821px) { .doc { --zx: -2cm; --zy: 2cm; } }
.doc-wrap.zoomabile .doc { cursor: zoom-in; }
#sim-conta.pieno { color: #c0392b; font-weight: 700; }
.doc.shake { animation: scossa .22s ease-out; }
@keyframes scossa { 0%,100% { transform: none; } 35% { transform: translateY(2px) rotate(.25deg); } }
@media (prefers-reduced-motion: reduce) {
  .stamp-rig.run { animation: none; opacity: 0; }
  .doc.shake { animation: none; }
  .impronta { transition: none; }
}
@media (max-width: 820px) { .sim { grid-template-columns: 1fr; } }