/* ==========================================================================
   PAGINA — scena iniziale (partecipazione + velina sul tavolo), apertura,
   gli altri due cartoncini. Richiede base.css, velina.css, foglietto.css.
   Le animazioni (main.js) usano solo transform e opacity.
   ========================================================================== */

/* ---------- misure ----------
   --card-w: la partecipazione aperta riempie lo schermo (proporzioni 982 x 1504).
   La pila è SEMPRE impaginata alla misura finale: all'inizio la "camera" la
   rimpicciolisce con una scala, così a fine zoom la carta è nitida. */
:root{
  --card-w: min(calc(100vw - var(--barra, 0px) - 24px), calc((100vh - 24px) * 982 / 1504), 560px);
  /* il foglietto ha la stessa misura della partecipazione; solo col telefono in
     orizzontale (carta piccolissima) si allarga quanto basta per leggerlo */
  --foglietto-w: max(var(--card-w), min(calc(100vw - var(--barra, 0px) - 24px), 320px));
  --gutter: 16px;
}
@supports (height: 100svh){
  :root{
    --card-w: min(calc(100vw - var(--barra, 0px) - 24px), calc((100svh - 24px) * 982 / 1504), 560px);
  }
}
:root{ --card-h: calc(var(--card-w) * 1504 / 982); }

html{ background: #b9b6a4; }
body{
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-x: clip;                   /* nessuno scroll orizzontale, a nessuna larghezza */
}

/* durante l'intro la pagina non scorre: è alta solo quanto la scena */
.js.is-intro,
.js.is-intro body{
  overflow: hidden;
  overscroll-behavior: none;
}
/* con le barre di scorrimento classiche (main.js mette .barre-classiche e --barra) lo spazio
   della barra resta riservato già durante l'intro: a fine apertura nulla scatta di lato.
   La pagina è comunque alta quanto lo schermo, quindi non scorre. */
.js.is-intro.barre-classiche{ overflow-y: scroll; }

.solo-lettori{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Sfondo ("tavolo"): Villa Lattuada fotografata e fuori fuoco dietro la
   partecipazione, luce morbida di giornata, vignettatura leggera.
   ========================================================================== */
.tavolo{
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;                     /* copre anche quando la barra del browser si ritira */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--tavolo);
}
.tavolo > div{ position: absolute; inset: 0; }

/* Villa Lattuada fuori fuoco: in verticale la foto intera, in orizzontale la villa al centro
   con il parco ancora più sfocato ai lati (immagini già sfocate: niente filter blur da calcolare) */
.tavolo__trama,
.tavolo__fuori{
  inset: -2% !important;
  background: #b9b6a4 url("../img/villa-sfondo-v.webp") 50% 40% / cover no-repeat;
  transform-origin: 50% 42%;
}
.tavolo__fuori{
  background-image: url("../img/villa-sfondo-v-fuori.webp");
  opacity: 0;                          /* compare durante lo zoom: il fuoco passa tutto sulla carta */
}
@media (min-aspect-ratio: 4/5){
  .tavolo__trama{ background-image: url("../img/villa-sfondo-o.webp"); background-position: 35% 45%; }
  .tavolo__fuori{ background-image: url("../img/villa-sfondo-o-fuori.webp"); background-position: 35% 45%; }
}
/* luce morbida di giornata: schiarisce appena lo sfondo perché la carta stacchi */
.tavolo__luce{
  opacity: .82;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(255, 252, 246, .30) 0%, rgba(255, 252, 246, .14) 45%, rgba(255, 252, 246, 0) 75%),
    linear-gradient(180deg, rgba(250, 246, 238, .10) 0%, rgba(40, 36, 28, .06) 100%);
}
.tavolo__vignetta{
  background: radial-gradient(ellipse 90% 80% at 50% 46%, rgba(30, 32, 24, 0) 50%, rgba(30, 32, 24, .14) 82%, rgba(30, 32, 24, .26) 100%);
}

/* scritte sopra la foto: chiare con un alone morbido, leggibili su verde e su rosa */
.invito, .scorri__testo, .salta, .chiusura__testo{
  color: rgba(255, 253, 249, .95) !important;
  text-shadow: 0 0 1px rgba(40, 34, 26, .35), 0 1px 12px rgba(40, 34, 26, .45), 0 0 26px rgba(40, 34, 26, .25);
}
.salta:hover{ color: #fff !important; }

/* ==========================================================================
   Scena
   ========================================================================== */
.pagina{ position: relative; z-index: 1; }

.scena{
  position: relative;
  z-index: 2;                          /* il foglietto, salendo, passa SOTTO la partecipazione */
  height: 100vh;
  height: 100svh;
  overflow: hidden;                    /* le ante aperte escono ai lati: niente scroll orizzontale */
  display: grid;
  place-items: center;
  -webkit-user-select: none;
  user-select: none;
}
.is-intro .scena{
  touch-action: pinch-zoom;            /* un dito: lo gestisce main.js (l'anta segue il dito);
                                          due dita: ingrandimento normale del browser */
  cursor: pointer;
}
.is-intro.is-ingrandita .scena{ touch-action: manipulation; }   /* pagina ingrandita: il dito sposta la vista */
.is-intro.is-trascina .scena{ cursor: grabbing; }

.posa,
.palco{ grid-area: 1 / 1; }
.posa{ display: grid; place-items: center; }

/* vista d'insieme iniziale: la camera è più lontana e un po' storta
   (solo durante l'intro: a fine apertura main.js toglie la trasformazione) */
.js.is-intro .palco{ transform: scale(.8) rotate(-1.5deg); }
.js.is-intro.movimento-ridotto .palco{ transform: none; }

.pila{
  position: relative;
  width: var(--card-w);
  aspect-ratio: 982 / 1504;
  container-type: inline-size;         /* velina.css lavora in cqw */
  isolation: isolate;                  /* carta, velina, (fiocco) e luce restano impilati qui dentro */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pila[role="button"]{ cursor: pointer; }
.pila[role="button"]:focus-visible{
  outline: 1.5px solid rgba(156, 123, 141, .7);
  outline-offset: calc(var(--card-w) * .024);   /* non in cqw: la pila è lei stessa il contenitore */
}

/* la partecipazione: ombra di contatto che segue il bordo strappato (statica) */
.pila > .partecipazione{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
  filter:
    drop-shadow(.08cqw .16cqw .16cqw rgba(66, 50, 34, .30))
    drop-shadow(.35cqw .7cqw 1cqw rgba(66, 50, 34, .13))
    drop-shadow(1cqw 2.2cqw 3.8cqw rgba(66, 50, 34, .10));
}
.is-intro .pila > .partecipazione{ -webkit-touch-callout: none; }

/* ombra più larga e morbida di quando la carta è ancora sollevata: svanisce mentre si posa */
.pila__sospesa{
  position: absolute;
  left: 3%; right: 3%; top: 2.5%; bottom: 2%;
  z-index: 0;
  opacity: 0;
  box-shadow: 1.6cqw 4.4cqw 9cqw rgba(66, 50, 34, .30);
  pointer-events: none;
}

/* la stessa luce del tavolo, sulla carta (ritagliata sul bordo strappato) */
.pila__luce{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 250, 240, .13) 0%, rgba(255, 250, 240, 0) 42%, rgba(84, 62, 42, .045) 100%);
  -webkit-mask: url("../img/partecipazione.webp") 0 0 / 100% 100% no-repeat;
          mask: url("../img/partecipazione.webp") 0 0 / 100% 100% no-repeat;
}

/* ---------- invito "Tocca per aprire" ----------
   Al centro dello spazio sotto la carta rimpicciolita (scala .8):
   top = 75% + 0.2 · altezza carta, ma mai sopra il bordo della carta
   (50% + 0.4 · altezza carta). Se sotto non c'è posto, main.js mette
   .invito-lato e l'invito va accanto alla carta. */
.invito{
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  top: max(calc(50% + var(--card-h) * .4 + 8px + .5em),
           min(calc(75% + var(--card-h) * .2), calc(100% - 30px - env(safe-area-inset-bottom))));
  margin: -.5em 0 0;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + .34em);
  text-align: center;
  font: 500 clamp(12px, 9px + .55vw, 14.5px)/1 var(--serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--inchiostro-chiaro);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.invito__testo{
  display: inline-block;
  animation: invito-respiro 3.4s ease-in-out infinite;
}
@keyframes invito-respiro{
  0%, 100%{ opacity: .52; }
  50%{ opacity: 1; }
}
/* niente spazio sotto la carta rimpicciolita (telefono in orizzontale): accanto, in basso a destra */
.invito-lato .invito{
  left: calc(50% + var(--card-w) * .4 + clamp(20px, 3.2vw, 48px));
  right: auto; top: auto;
  bottom: max(calc(30px + env(safe-area-inset-bottom)), calc(50% - var(--card-h) * .4 + 24px));
  margin: 0; padding: 0;
  text-align: left;
  line-height: 1.6;
  white-space: normal;
  max-width: min(11em, calc(50vw - var(--card-w) * .4 - 56px - env(safe-area-inset-right)));
}
/* movimento ridotto: la carta parte già a tutta misura, l'invito va dove andrà "Scorri" */
.movimento-ridotto .invito{ top: min(calc(75% + var(--card-h) * .25), calc(100% - 30px - env(safe-area-inset-bottom))); }
.movimento-ridotto.posto-lato .invito{
  left: calc(50% + var(--card-w) / 2 + clamp(20px, 3.2vw, 48px));
  right: auto; top: auto;
  bottom: max(30px, calc(50% - var(--card-h) / 2 + 30px));
  margin: 0; padding: 0;
  text-align: left;
  line-height: 1.6;
  white-space: normal;
  max-width: min(11em, calc(50vw - var(--card-w) / 2 - 56px));
}

/* ---------- durante lo zoom la velina aperta scivola via in alto, sotto la carta ----------
   main.js porta la .velina sotto la partecipazione e anima --ante-fuori; "translate" si somma
   alla rotazione che velina.js scrive in "transform", senza toccarla. Ombre, nastri e
   ceralacca vanno con le loro ante. */
.velina__anta,
.velina__piano,
.velina__proiezione,
.velina__ombra-contatto,
.velina-dorso{ translate: 0 calc(var(--ante-fuori, 0px) * -1); }

/* ---------- "Scorri": compare a partecipazione aperta ---------- */
.scorri{
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(75% + var(--card-h) / 4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* niente spazio sotto la carta (schermi bassi e larghi): va accanto, in basso a destra */
.posto-lato .scorri{
  left: calc(50% + var(--card-w) / 2 + clamp(20px, 3.2vw, 48px));
  top: auto;
  bottom: max(30px, calc(50% - var(--card-h) / 2 + 30px));
  transform: none;
}
/* né sotto né accanto: solo la parola, sul margine bianco in fondo alla carta */
.posto-stretto .scorri{
  top: auto;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 10px);
  transform: translateX(-50%);
}
.posto-stretto .scorri__linea{ display: none; }
.movimento-ridotto.posto-stretto .invito{ top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 10px); margin: 0; }
.scorri__dentro{
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
.scorri__testo{
  padding-left: .34em;
  font: 500 clamp(11.5px, 9px + .45vw, 13.5px)/1 var(--serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--inchiostro-chiaro);
}
.scorri__linea{
  position: relative;
  display: block;
  width: 1px;
  height: clamp(26px, 5.5svh, 44px);
  margin-top: 11px;
  overflow: hidden;
  background: rgba(87, 80, 67, .16);
}
.scorri__linea::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(87, 80, 67, 0), rgba(87, 80, 67, .75) 70%, rgba(87, 80, 67, .9));
  transform: translateY(-100%);
  animation: scorri-goccia 2.6s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes scorri-goccia{
  0%{ transform: translateY(-100%); }
  58%{ transform: translateY(0); }
  100%{ transform: translateY(101%); }
}

/* ---------- "Salta" ---------- */
.salta{
  position: fixed;
  z-index: 6;
  top: calc(env(safe-area-inset-top) + 8px);
  right: calc(env(safe-area-inset-right) + 8px);
  min-height: 44px;
  margin: 0;
  padding: 14px 14px 14px calc(14px + .3em);
  border: 0;
  background: none;
  color: var(--inchiostro-chiaro);
  font: 500 12px/1 var(--serif);
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color .3s ease;
}
.salta:hover{ color: var(--inchiostro); }
.salta:focus-visible{ outline: 1px solid var(--mauve); outline-offset: -4px; }
.no-js .salta,
html:not(.js) .salta{ display: none; }

/* ---------- velo d'ingresso ---------- */
.velo-avorio{
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--avorio);
  pointer-events: none;
}
html:not(.js) .velo-avorio{ display: none; }

/* ==========================================================================
   Sotto: gli altri due cartoncini (conferma, il nostro viaggio) e la chiusura
   ========================================================================== */
/* Il secondo cartoncino sta a --stacco sotto il bordo della partecipazione,
   il terzo a --stacco sotto il secondo, come carte vicine sul tavolo: la
   sezione risale nello spazio vuoto sotto la partecipazione (margine
   negativo). A pagina appena aperta i cartoncini sono comunque fuori
   schermo: main.js li fa partire più in basso e li fa salire scorrendo. */
.seguito{
  --stacco: clamp(28px, 2vw + 16px, 44px);   /* 28px sul telefono, ~40px sul computer */
  position: relative;
  z-index: 1;                          /* passa SOTTO la partecipazione (.scena z-index 2) */
  margin-top: calc(var(--card-h) / 2 - 50vh + var(--stacco));
  padding: 0 12px calc(clamp(40px, 8svh, 80px) + env(safe-area-inset-bottom));
  /* mentre sale storto, l'angolo in basso di un cartoncino esce di lato dallo
     schermo: lo si taglia qui (solo in orizzontale, senza creare uno scroll
     interno), così la pagina non scorre mai di lato, nemmeno di pochi px */
  overflow-x: clip;
}
@supports (height: 100svh){
  .seguito{ margin-top: calc(var(--card-h) / 2 - 50svh + var(--stacco)); }
}
.movimento-ridotto .seguito{ margin-top: 0; padding-top: var(--stacco); }
.seguito .foglietti{
  --card-w: var(--foglietto-w);        /* stessa misura della partecipazione, ma mai minuscoli (telefono in orizzontale) */
  --foglietti-stacco: var(--stacco);
}
/* aperta la partecipazione, la scena (trasparente) non deve coprire i tocchi sui cartoncini */
.is-aperta .scena{ pointer-events: none; }
.is-aperta .pila{ pointer-events: auto; }
/* ruotano attorno al centro del bordo alto mentre salgono (main.js) */
.seguito .foglietto{ transform-origin: 50% 0%; }

.chiusura{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(44px, 9svh, 96px);
  color: var(--inchiostro-chiaro);
}
.chiusura__filo{
  display: block;
  width: 36px;
  height: 1px;
  margin-bottom: 18px;
  background: rgba(87, 80, 67, .35);
}
.chiusura__testo{
  margin: 0;
  padding-left: .3em;
  font: 500 clamp(11.5px, 9px + .4vw, 13px)/1.6 var(--serif);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  font-variant-numeric: lining-nums;   /* cifre "maiuscole", come sulla partecipazione */
}

/* ==========================================================================
   Movimento ridotto
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .invito__testo,
  .scorri__linea::after{ animation: none; }
  .scorri__linea::after{ transform: none; }
}
.movimento-ridotto .invito__testo,
.movimento-ridotto .scorri__linea::after{ animation: none; }
.movimento-ridotto .scorri__linea::after{ transform: none; }

/* la chiusura in fondo sta sopra la foto della villa: filo chiaro come le altre scritte */
.chiusura__filo{ background: rgba(255, 253, 249, .6) !important; }