/* Colori, caratteri e tempi ripresi dalla bozza Emergent. Il resto dello stile è ancora provvisorio. */

:root {
  --carta: #FDFBF7;
  --carta-scura: #F4EFE6;
  --inchiostro: #2C2A29;
  --inchiostro-chiaro: #5C5A58;
  --ceralacca: #8A2E2A;
  --bordo: #E8E1D5;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --morbido: cubic-bezier(.22, 1, .36, 1);
}

[hidden] { display: none !important; }

body {
  margin: 0;
  font: 17px/1.5 var(--sans);
  color: var(--inchiostro);
  background:
    radial-gradient(at 10% 20%, rgba(138, 46, 42, .04) 0, transparent 50%),
    radial-gradient(at 90% 80%, rgba(138, 46, 42, .03) 0, transparent 50%),
    var(--carta);
  background-attachment: fixed;
}

h1, h2 { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* --- Apertura con la busta --------------------------------------------------- */

.apertura {
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  animation: compari 1.2s var(--morbido) both;
}

.sopratitolo {
  margin: 0 0 1rem;
  font-size: clamp(.65rem, 2.6vw, .8rem);
  letter-spacing: clamp(.25em, 1vw, .4em);
  text-transform: uppercase;
  color: var(--ceralacca);
}

.titolo-busta { margin: 0; font-size: clamp(1.9rem, 6vw, 3rem); }

.suggerimento {
  margin: 1rem 0 0;
  font-size: .9rem;
  color: var(--inchiostro-chiaro);
  letter-spacing: .03em;
  animation: compari 1s .6s both;
  transition: opacity .5s;
}
.busta-aperta .suggerimento { opacity: 0; }

/* Aperta, l'aletta sale di metà altezza sopra la busta: la busta scende per non coprire il titolo. */
.busta-prospettiva {
  --l: min(520px, 86vw);
  --h: min(340px, 56vw);
  perspective: 1400px;
  margin-top: 2.5rem;
  transition: margin-top .9s cubic-bezier(.7, 0, .3, 1);
}
.busta-aperta .busta-prospettiva { margin-top: calc(var(--h) / 2 + 1.5rem); }

.busta {
  position: relative;
  width: var(--l);
  height: var(--h);
  animation: entra-busta 1.2s .2s var(--morbido) both;
}

.busta > * { position: absolute; inset: 0; }

.busta-corpo {
  border-radius: 2px;
  background: linear-gradient(180deg, #EDE3D2 0%, #E2D5BD 100%);
  box-shadow:
    0 30px 60px -20px rgba(60, 40, 20, .35),
    0 8px 20px -8px rgba(60, 40, 20, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .4);
}

/* La lettera sta dentro la busta e sale quando si apre. */
.busta .busta-lettera {
  inset: 12% 8%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Testo in alto: è la parte che esce dalla busta, i lembi laterali coprono il resto. */
  justify-content: flex-start;
  padding: clamp(.8rem, 4vw, 1.5rem) 1rem 0;
  background: linear-gradient(180deg, #FDFBF7 0%, #F8F3E8 100%);
  box-shadow: 0 6px 20px -6px rgba(60, 40, 20, .25);
  opacity: 0;
  transform: translateY(10%);
  transition: transform 1s .5s var(--morbido), opacity .4s .5s;
}
.busta-aperta .busta-lettera { opacity: 1; transform: translateY(-66%); }

.lettera-etichetta {
  margin: 0;
  font-size: clamp(.6rem, 2vw, .75rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ceralacca);
}
.lettera-nomi {
  margin: .6rem 0 0;
  font: italic clamp(1.4rem, 5vw, 1.9rem)/1.1 var(--serif);
}
.lettera-riga { width: 3rem; height: 1px; margin-top: .6rem; background: rgba(138, 46, 42, .4); }
.lettera-data {
  margin: .6rem 0 0;
  font-size: clamp(.7rem, 2.4vw, .875rem);
  letter-spacing: .05em;
  color: var(--inchiostro-chiaro);
}

/* Tasca anteriore a V: copre la metà inferiore della lettera. */
.busta-tasca {
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, #E2D5BD 50%, #D6C5A8 100%);
  clip-path: polygon(0 50%, 50% 100%, 100% 50%, 100% 100%, 0 100%);
}

.busta-lato { z-index: 8; pointer-events: none; }
.busta-lato-sx {
  background: linear-gradient(135deg, #E8DCC4 0%, #D9C8AA 100%);
  clip-path: polygon(0 0, 0 100%, 50% 50%);
}
.busta-lato-dx {
  background: linear-gradient(225deg, #E8DCC4 0%, #D9C8AA 100%);
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}

/* Aletta superiore: ruota in 3D all'indietro. */
.busta .busta-aletta {
  bottom: 50%;
  z-index: 20;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.7, 0, .3, 1);
}
.busta-aperta .busta-aletta { transform: rotateX(-180deg); z-index: 2; }

.aletta-fuori, .aletta-dentro {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.aletta-fuori {
  background: linear-gradient(180deg, #EFE5D3 0%, #E0CFB1 100%);
  box-shadow: inset 0 -2px 4px rgba(60, 40, 20, .08);
}
.aletta-dentro {
  background: linear-gradient(180deg, #F5EDDD 0%, #EADFC5 100%);
  transform: rotateX(180deg);
}

/* Sigillo in ceralacca, sulla punta della V. */
.busta .sigillo {
  --d: min(110px, 22vw);
  inset: auto;
  left: calc(50% - var(--d) / 2);
  top: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  z-index: 30;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: entra-sigillo .8s 1s var(--morbido) both;
}
.sigillo:focus-visible { outline: 2px solid var(--ceralacca); outline-offset: 4px; }
.busta-aperta .sigillo { animation: esci-sigillo .3s forwards; pointer-events: none; }

.sigillo-cera {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 75%, transparent 55%, rgba(94, 29, 26, .35) 80%),
    radial-gradient(circle at 30% 30%, #A73A35 0%, #8A2E2A 45%, #5E1D1A 100%);
  box-shadow:
    0 8px 24px -4px rgba(94, 29, 26, .6),
    inset 0 -6px 12px rgba(0, 0, 0, .25),
    inset 0 4px 8px rgba(255, 180, 170, .25);
  font: italic clamp(1.5rem, 5vw, 1.9rem) var(--serif);
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  animation: respira 3s ease-in-out infinite;
}

.apertura .vai-rsvp {
  margin: 3rem 0 0;
  padding: 0 0 .25rem;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  border-radius: 0;
  background: none;
  color: var(--inchiostro-chiaro);
  font: .75rem var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .8s 1.4s, transform .8s 1.4s, visibility 0s 1.4s;
}
.busta-aperta .apertura .vai-rsvp { opacity: 1; visibility: visible; transform: none; }

@keyframes compari { from { opacity: 0; transform: translateY(12px); } }
@keyframes entra-busta { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes entra-sigillo { from { opacity: 0; transform: scale(0) rotate(-20deg); } }
@keyframes esci-sigillo { to { opacity: 0; transform: scale(0); } }
@keyframes respira { 50% { transform: scale(1.025); } }

/* Busta già aperta in passato, o utente che preferisce meno movimento: niente animazioni. */
.senza-animazione .apertura *,
.senza-animazione .apertura { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .apertura *, .apertura { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* --- Contenuto e modulo (provvisorio) ------------------------------------------ */

main {
  max-width: 32rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  animation: compari 1.2s .8s var(--morbido) both;
}

.senza-js { text-align: center; padding: 1rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 500; margin-bottom: .25rem; }

label { display: block; margin-bottom: 1rem; }
fieldset label, #campo-accompagnatore > label:first-child { margin-bottom: .5rem; }

input[type="text"], input[type="number"], textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: .25rem;
  padding: .6rem;
  font: inherit;
  border: 1px solid #b9b0a2;
  border-radius: 4px;
  background: #fff;
}

input[type="radio"], input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -.2rem;
  accent-color: var(--ceralacca);
}

button {
  font: inherit;
  padding: .75rem 1.25rem;
  margin-right: .5rem;
  border-radius: 4px;
  border: 1px solid var(--ceralacca);
  background: var(--ceralacca);
  color: #fff;
}
button[type="button"] { background: transparent; color: var(--ceralacca); }
button:disabled { opacity: .6; }

#errore { color: #b00020; }
#riepilogo-esito { font-weight: 500; }
code { word-break: break-all; }