/* ─────────────────────────────────────────────────────────────────────────
   Le stampe sul tavolo — lo slideshow della serata (sala d'attesa e ultima
   slide). Ogni quindici secondi una fotografia dell'archivio cade sopra le
   altre, un po' storta, come quando si rovescia sul tavolo una scatola di
   foto di famiglia. Sotto, a matita, titolo e numero della scheda.
   Le misure le decide il contenitore (.stampe): le stampe ne prendono le
   proporzioni.
   ───────────────────────────────────────────────────────────────────────── */
.stampe{position:relative;}

.stampe .st{
  position:absolute;left:50%;top:50%;
  width:var(--w);
  padding:2.4% 2.4% 0;
  background:linear-gradient(160deg,#fbf6ea 0%,#f1e8d4 100%);
  border-radius:3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -12px rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.32);
  transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));
  transition:filter 1.6s var(--ease),box-shadow 1.6s var(--ease);
  will-change:transform;
}
.stampe .st.v{--w:var(--w-v,46%);padding:3.2% 3.2% 0;}
.stampe .st.o{--w:var(--w-o,82%);}

/* le stampe che restano sotto si spengono un poco: l'occhio va all'ultima */
.stampe .st.sotto{filter:brightness(.72) saturate(.9);box-shadow:0 14px 28px rgba(0,0,0,.4);}
.stampe .st.sotto-2{filter:brightness(.55);}

.stampe .st-foto{position:relative;overflow:hidden;background:#1a1612;aspect-ratio:3/2;}
.stampe .st.v .st-foto{aspect-ratio:2/3;}
.stampe .st-foto img{
  width:100%;height:100%;object-fit:cover;
  filter:sepia(.18) contrast(1.04);
}
/* lento avvicinamento durante i quindici secondi in cima alla pila */
.stampe .st.cima .st-foto img{animation:st-avvicina var(--durata,15s) linear both;}
@keyframes st-avvicina{
  from{transform:scale(1.001) translate(0,0);}
  to{transform:scale(1.07) translate(var(--px,-1.2%),var(--py,-.8%));}
}

/* il bordo bianco in basso, scritto a matita */
.stampe .st-retro{
  display:flex;flex-direction:column;gap:.35em;
  padding:.55em .25em .75em;
  color:#3f3a33;
}
/* sulla stampa verticale il bordo è stretto: matita più fine */
.stampe .st.v .st-titolo{font-size:calc(var(--fs-titolo,30px) * .82);-webkit-line-clamp:3;}
.stampe .st-titolo{
  font-family:var(--font-hand);font-weight:600;
  font-size:var(--fs-titolo,30px);line-height:1.02;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-wrap:balance;
  transform:rotate(-1deg);
}
.stampe .st-num{
  flex:0 0 auto;
  font-family:var(--font-body);font-weight:700;
  font-size:var(--fs-num,13px);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(63,58,51,.62);font-variant-numeric:tabular-nums;
}

/* l'arrivo: dall'alto, più grande e più storta, poi si posa */
.stampe .st.arriva{animation:st-cade 1.5s var(--ease-back) both;}
@keyframes st-cade{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) translate(calc(var(--x,0px) + var(--dx,60px)),calc(var(--y,0px) - 120px)) rotate(calc(var(--r,0deg) + var(--dr,9deg))) scale(1.12);
    box-shadow:0 80px 120px -20px rgba(0,0,0,.4);
  }
  35%{opacity:1;}
  100%{
    opacity:1;
    transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(1);
  }
}
/* la più vecchia esce di scena senza farsi notare */
.stampe .st.via{transition:opacity 1.2s var(--ease);opacity:0;}

@media (prefers-reduced-motion:reduce){
  .stampe .st.arriva{animation:st-appare .8s ease both;}
  .stampe .st.cima .st-foto img{animation:none;}
  @keyframes st-appare{from{opacity:0;}to{opacity:1;}}
}

/* ── la didascalia della serata, sotto la pila ── */
.serata-dida{text-align:center;}
.serata-dida .serata-titolo{
  display:block;
  font-family:var(--font-hand);font-weight:600;line-height:1;
  color:var(--gold-light);
  text-shadow:0 0 30px rgba(233,200,123,.25);
}
.serata-dida .serata-quando{
  display:block;margin-top:.55em;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,239,231,.72);
}
.serata-dida .serata-dove{
  display:block;margin-top:.5em;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,239,231,.5);
}