/* =============================================================
   Parea Sons — homepage: apertura e tre mondi
   ============================================================= */

.contenuto { position: relative; z-index: 1; }

/* ------------------------------------------------------------ apertura */
.apertura {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: calc(var(--header-h) + var(--s-96)) var(--bordo-pagina) var(--s-96);
  max-width: var(--larghezza-max);
  margin-inline: auto;
  overflow: hidden;
}

/* Lo stemma inciso nel fondo. Non è decorazione: è il marchio che
   sta sotto a tutto il resto, appena percettibile. */
.apertura__stemma {
  position: absolute;
  top: 50%;
  right: -13%;
  translate: 0 -50%;
  width: min(62vw, 760px);
  /* Desaturato: a bassa opacità il rosso araldico virerebbe al rosa.
     Così resta un'incisione, e il rosso è libero di comparire altrove. */
  filter: grayscale(1) contrast(.55);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.apertura__testo {
  position: relative;
  display: grid;
  gap: var(--s-24);
  justify-items: start;
  max-width: 58%;               /* griglia asimmetrica 7/5 */
}

.apertura__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-48), 7.2vw, var(--t-96));
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* La seconda riga in corsivo: il contrasto tondo/corsivo del Cormorant
   basta a dare il tempo alla frase, senza aggiungere colore. */
.apertura__titolo em { font-style: italic; }

.apertura__sottotitolo {
  font-size: var(--t-20);
  line-height: 1.5;
  color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
  max-width: 34ch;
}

.apertura__scorri {
  position: absolute;
  left: var(--bordo-pagina);
  bottom: var(--s-48);
  display: inline-flex;
  align-items: center;
  gap: var(--s-16);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--greige);
}
.apertura__scorri i {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--beige);
  transform-origin: left;
  animation: filo-scorri 2.8s var(--ease) infinite;
}
@keyframes filo-scorri {
  0%, 100% { transform: scaleX(.35); opacity: .5; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* --- Sequenza di apertura: una sola, orchestrata ---------------
   Prima l'apertura saliva tutta insieme di 14px, quattro pezzi a
   120ms l'uno: una dissolvenza, non un gesto. Adesso parla la
   lingua che il sito ha già — l'occhiello arriva, le due righe del
   titolo SALGONO DA SOTTO LA RIGA dentro una maschera come i titoli
   di categoria del listino (§4 di SISTEMA.md), il filetto SI APRE
   DAL CENTRO che è il gesto unico, e il sottotitolo si appoggia.
   Niente di nuovo nel vocabolario: le stesse tre mosse, messe in
   fila all'ingresso invece che allo scorrimento.

   Le durate sono lunghe — da 700 a 1100ms — e in questo sito è la
   regola: un gesto che risponde a un dito dev'essere rapido, un
   gesto che accoglie no. È lo stesso conto del listino.

   Tutto in CSS, senza `data-anima`: qui non serve l'osservatore,
   quindi non c'è il caso «lo script non parte e la pagina resta
   invisibile» — un'animazione CSS parte anche senza JavaScript. */

/* Chi arriva salendo di poco: l'occhiello e il sottotitolo. */
.apertura__sale {
  opacity: 0;
  transform: translateY(12px);
  animation: apertura-sale 900ms var(--ease) both;
}
.apertura__sale--1 { animation-delay:  80ms; }
.apertura__sale--2 { animation-delay: 740ms; }
@keyframes apertura-sale {
  to { opacity: 1; transform: none; }
}

/* Le due righe del titolo, dentro la loro maschera.

   Il padding con il margine negativo uguale è la stessa riga del
   listino, ma qui è **margine e non riparazione**, e va detto
   com'è: misurato a 96px, l'inchiostro di queste due frasi si ferma
   9,7px sotto il bordo alto del riquadro di riga e 17,1 sopra
   quello basso, quindi oggi `overflow: hidden` non taglia niente.
   Resta perché il titolo è testo che cambia — una discendente in una
   frase nuova, o il ripiego a Times se il Cormorant non arriva, e il
   taglio a questo corpo si vedrebbe da lontano. Costa zero: i
   margini negativi restituiscono esattamente il padding, e la
   distanza fra le due righe resta quella di prima al centesimo.

   Da lì viene anche il 120%: la maschera è più alta della riga di
   0,20em, e ne servono almeno 113,7 perché la riga sparisca sotto —
   un 106% lascerebbe fuori la testa delle lettere.

   **E il titolo è una GRIGLIA, se no il conto non torna.** Misurato:
   con due maschere in flusso normale le righe finivano 5,76px più
   lontane e il titolo cresceva di altrettanto. I margini negativi
   adiacenti non si sommano, si FONDONO — fra le due maschere −13,44
   e −5,76 diventano −13,44, non −19,2 — e quelli dei due bordi
   scappano fuori dall'`h1` fondendosi coi suoi. In una griglia i
   margini non si fondono mai: ogni maschera restituisce esattamente
   quello che ha preso. */
.apertura__titolo { display: grid; }

.apertura__riga {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.14em;
  margin-block: -0.06em -0.14em;
}
.apertura__riga > span {
  display: block;
  transform: translateY(120%);
  animation: apertura-riga 1000ms var(--ease) both;
}
.apertura__riga:nth-of-type(1) > span { animation-delay: 220ms; }
.apertura__riga:nth-of-type(2) > span { animation-delay: 340ms; }
@keyframes apertura-riga {
  to { transform: none; }
}

/* Il filetto si apre dal centro: il gesto unico del sito. */
.apertura__filo {
  transform: scaleX(0);
  animation: apertura-filo 1100ms var(--ease) 560ms both;
}
@keyframes apertura-filo {
  to { transform: scaleX(1); }
}

/* «Scorri» arriva per ultimo, quando c'è già qualcosa da scorrere. */
.apertura__scorri {
  opacity: 0;
  animation: apertura-scorri 700ms var(--ease) 1000ms both;
}
@keyframes apertura-scorri {
  to { opacity: 1; }
}

/* --- Lo stemma deriva, e il testo si congeda ------------------
   Due movimenti legati alla mano e non a un orologio, come il
   respiro delle fotografie: `animation-timeline: view()`, senza un
   solo ascoltatore di `scroll`. È la sola licenza che questo sito
   dà al parallasse, ed è quella scritta in §4 di SISTEMA.md.

   Lo stemma è un'incisione nel fondo: scorrendo si muove un poco
   meno della pagina, e diventa una filigrana sulla carta invece di
   un adesivo. Scende del 6% della propria altezza — misurata 702px
   a 1440×900, quindi 42px — lungo i primi 100svh di scorrimento,
   che è esattamente l'altezza dell'apertura: un differenziale del
   4,7%, che si sente e non si nota. La sezione ha
   `overflow: hidden`, quindi dai bordi non esce niente.

   La corsa è `scroll()` e non `view()`, ed è una scelta: con
   `view()` il punto di partenza dipende da dove capita lo stemma
   dentro la finestra — a 1440×900 la corsa `cover` risulta già al
   28%, cioè al caricamento l'incisione siede 11px sopra il suo
   posto, e su un'altra finestra sarebbe un'altra cifra. Con
   `scroll()` e una fascia che parte da 0, a scorrimento zero
   l'avanzamento è zero **per costruzione, su qualunque schermo**:
   lo stemma sta dove l'ha messo il foglio, e si muove solo quando
   la pagina si muove.

   Il testo se ne va salendo mentre esce dallo schermo: la fascia
   `exit` va da quando il blocco tocca il bordo alto a quando l'ha
   passato del tutto, cioè esattamente il tempo in cui sta uscendo.
   Sta sul CONTENITORE e non sui pezzi, e non è un dettaglio: i
   pezzi hanno già la loro animazione d'ingresso sulle stesse due
   proprietà, e sullo stesso elemento un'animazione ne annullerebbe
   un'altra. Uno entra, l'altro congeda. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .apertura__stemma {
      animation: stemma-deriva linear both;
      animation-timeline: scroll();
      animation-range: 0 100svh;
    }
    .apertura__testo {
      animation: apertura-congeda linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
  }
}
@keyframes stemma-deriva {
  from { transform: none; }
  to   { transform: translateY(6%); }
}
@keyframes apertura-congeda {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-40px); }
}

/* --- Movimento ridotto ----------------------------------------
   Tutto al suo posto, subito, fermo. I due movimenti allo
   scorrimento non nascono nemmeno: stanno dentro un
   `prefers-reduced-motion: no-preference`. */
@media (prefers-reduced-motion: reduce) {
  .apertura__sale,
  .apertura__riga > span,
  .apertura__filo,
  .apertura__scorri { animation: none; opacity: 1; transform: none; }
  .apertura__scorri i { animation: none; transform: scaleX(1); }
}

/* I mondi hanno una sezione tutta loro: css/mondi.css. */

@media (max-width: 768px) {
  .apertura__testo { max-width: 100%; }
  .apertura__stemma { right: -22%; width: 90vw; opacity: .04; }
  .apertura__scorri { display: none; }
}

/* ------------------------------------------------- pagine in preparazione */
.pagina-vuota {
  display: grid;
  gap: var(--s-24);
  justify-items: start;
  align-content: center;
  min-height: 78vh;
  padding: calc(var(--header-h) + var(--s-64)) var(--bordo-pagina) var(--s-96);
  max-width: var(--larghezza-max);
  margin-inline: auto;
}
.pagina-vuota__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-48), 6vw, var(--t-96));
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.pagina-vuota__testo {
  font-size: var(--t-20);
  line-height: 1.5;
  color: color-mix(in srgb, var(--inchiostro) 74%, transparent);
  max-width: 42ch;
}
.pagina-vuota__ritorno {
  display: inline-flex;
  align-items: center;
  gap: var(--s-16);
  margin-top: var(--s-24);
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
}
.pagina-vuota__ritorno i {
  display: block; width: 24px; height: 1px; background: currentColor;
  transition: width var(--t-medio) var(--ease);
}
.pagina-vuota__ritorno:hover i { width: 40px; }