/* Busta animata · Chiara & Cristian (demo)
   CSS del sito, fuori da ogni @layer: vince sul kit senza !important.
   Tutte le misure del palco sono in unità di disegno (u): il palco è largo 520u e alto 760u,
   1u = 1/520 della larghezza, così la scena scala intera dal telefono al monitor. */

:root {
  --sw-c1: #e2a28c;   /* verde salvia della busta */
  --sw-c2: #e8a1a0;   /* rosa cipria della ceralacca */
  --sw-c3: #f7f2ea;   /* carta */
  --sw-c4: #3d4a42;   /* inchiostro */
  --sw-c5: #1f2823;   /* notte */
  --busta-verde: #e2a28c;
}

html, body { background: var(--sw-c3); }
.b-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- La sezione ---------- */
.busta {
  position: relative;
  min-height: calc(100vh - var(--sposi-testata, 0px));
  min-height: calc(100svh - var(--sposi-testata, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vh, 1.25rem);
  padding: clamp(.75rem, 3vh, 2rem) clamp(.5rem, 3vw, 2rem);
  overflow: hidden;
}

.busta-scena {
  width: min(94vw, calc((100svh - var(--sposi-testata, 0px) - 10.25rem) * 520 / 760));
  aspect-ratio: 520 / 760;
  container-type: inline-size;
}
@supports not (height: 100svh) {
  .busta-scena { width: min(94vw, calc((100vh - var(--sposi-testata, 0px) - 10.25rem) * 520 / 760)); }
}

.busta-palco {
  --u: calc(100cqi / 520);
  position: relative;
  width: 100%;
  height: 100%;
}
.busta-palco.is-pronta { animation: busta-entra 1.3s cubic-bezier(.2, .75, .25, 1) both; }
.busta-palco:not(.is-pronta) { opacity: 0; }

@keyframes busta-entra {
  from { opacity: 0; transform: translateY(38%) rotate(-7deg) scale(.92); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* ---------- Strati della busta ---------- */
.b-env {
  position: absolute;
  transition: transform .9s cubic-bezier(.22, .8, .24, 1), opacity .7s ease;
}

/* sposta tutta la busta: chiusa sta al centro, aperta scende, poi esce di scena */
.busta-palco[data-stato="chiusa"] .b-env  { transform: translateY(calc(var(--u) * -172)); }
.busta-palco[data-stato="fronte"] .b-env,
.busta-palco[data-stato="retro"] .b-env   { transform: translateY(calc(var(--u) * 330)); opacity: 0; transition-duration: 1.1s, .9s; }

.b-ombra {
  left: calc(var(--u) * 40);
  top: calc(var(--u) * 690);
  width: calc(var(--u) * 440);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 50, 40, .30), rgba(90, 50, 40, 0));
  filter: blur(calc(var(--u) * 4));
  z-index: 0;
}

.b-fondo,
.b-patella {
  left: calc(var(--u) * 29.9);
  top: calc(var(--u) * 154.769);
  width: calc(var(--u) * 460.213);
  height: calc(var(--u) * 559.12);
}
.b-fondo { z-index: 1; overflow: visible; }

.b-tasca {
  left: calc(var(--u) * 29.362);
  top: calc(var(--u) * 391.976);
  width: calc(var(--u) * 461.288);
  height: calc(var(--u) * 321.913);
  z-index: 4;
  filter: drop-shadow(0 calc(var(--u) * -1) calc(var(--u) * 2) rgba(90, 45, 35, .16));
}

/* La patella: il contenitore trasla con la busta, l'interno ruota lungo la piega (y = 235.231 su 559.12) */
.b-patella { z-index: 5; pointer-events: none; }
.busta-palco.is-patella-dietro .b-patella { z-index: 2; }

.b-patella__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: 50% 42.0716%;
  transform: perspective(calc(var(--u) * 1400)) rotateX(180deg);
  transition: transform 1s cubic-bezier(.45, .05, .25, 1);
}
.busta-palco:not([data-stato="chiusa"]) .b-patella__giro {
  transform: perspective(calc(var(--u) * 1400)) rotateX(0deg);
  transition-delay: .45s;
}

.b-faccia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.b-faccia--fuori {
  transform-origin: 50% 42.0716%;
  transform: rotateX(180deg);
  filter: drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 2.5) rgba(90, 45, 35, .22));
}

/* ---------- L'invito ---------- */
.b-slot {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* nascosto sotto il bordo basso della busta (y = 713.389) finché è dentro */
  clip-path: inset(-50% -50% calc(var(--u) * 46.611) -50%);
  transition: clip-path .9s cubic-bezier(.22, .8, .24, 1);
}
/* a busta chiusa l'invito sta dentro, alzato insieme alla busta */
.busta-palco[data-stato="chiusa"] .b-slot { clip-path: inset(-50% -50% calc(var(--u) * 218.611) -50%); }
.busta-palco[data-stato="chiusa"] .b-carta { transform: translateY(calc(var(--u) * -172)); }
.busta-palco.is-carta-davanti .b-slot { z-index: 6; clip-path: none; transition: none; }

.b-carta {
  position: absolute;
  left: calc(var(--u) * 115.433);
  top: calc(var(--u) * 404);
  width: calc(var(--u) * 289.134);
  height: calc(var(--u) * 430.866);
  perspective: calc(var(--u) * 1800);
  transition: transform .9s cubic-bezier(.22, .8, .24, 1);
}
.busta-palco[data-stato="estratta"] .b-carta {
  transform: translateY(calc(var(--u) * -382));
  transition: transform 1.15s cubic-bezier(.3, .7, .2, 1);
}
.busta-palco[data-stato="fronte"] .b-carta,
.busta-palco[data-stato="retro"] .b-carta {
  transform: translateY(calc(var(--u) * -239.4)) scale(1.6);
  transition: transform 1.1s cubic-bezier(.3, .7, .2, 1);
}

.b-carta__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.45, .05, .25, 1);
}
.busta-palco[data-stato="retro"] .b-carta__giro { transform: rotateY(180deg); }

.b-carta__faccia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: calc(var(--u) * 1.5);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(40, 50, 45, .16), 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(40, 50, 45, .12);
}
.b-carta__faccia--retro { transform: rotateY(180deg); }

/* ---------- Il pulsante che copre la scena ---------- */
.b-azione {
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.b-azione:focus-visible {
  outline: 2px solid var(--sw-c2);
  outline-offset: 4px;
  border-radius: 12px;
}
.b-azione[disabled] { cursor: default; }

.busta-guida {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vh, 1.35rem);
  letter-spacing: .02em;
  color: var(--sw-c4);
  opacity: .8;
  transition: opacity .4s ease;
  min-height: 1.6em;
  text-align: center;
}
.busta-guida.is-muta { opacity: 0; }
.busta-piede { min-height: 5.6rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.busta-avanti[hidden] { display: none; }
.busta-avanti { animation: busta-dissolvi .8s ease both; }

/* ---------- Movimento ridotto: stessi stati, senza viaggio ---------- */
@media (prefers-reduced-motion: reduce) {
  .busta-palco.is-pronta { animation: busta-dissolvi .6s ease both; }
  .busta .busta-palco[data-stato] .b-env,
  .busta .busta-palco[data-stato] .b-patella__giro,
  .busta .busta-palco[data-stato] .b-carta,
  .busta .busta-palco[data-stato] .b-carta__giro,
  .busta .busta-palco[data-stato] .b-slot { transition-duration: .01s; transition-delay: 0s; }
}
@keyframes busta-dissolvi { from { opacity: 0; } to { opacity: 1; } }