/* =============================================================
   Parea Sons — la cortina fra le pagine

   Fino a ieri ogni clic era un lampo bianco del browser: l'unico
   momento in cui il sito smetteva di essere una maison. Qui il
   passaggio diventa un gesto solo — l'header non si muove affatto,
   la pagina si dissolve, e la fotografia del capo SI DISTENDE dalla
   lastra della griglia alla galleria della scheda.

   Tutto in CSS, come il film dei mondi e la cucitura di Maison: le
   transizioni fra documenti sono `@view-transition`, e non c'è una
   riga di libreria. js/cortina.js non anima niente — dice una cosa
   sola, quale delle otto lastre di un listino è quella che sta
   partendo, perché il nome dev'essere unico nel documento.

   Dove il browser non le ha, non succede niente: il clic torna a
   essere un clic. Non c'è ripiego da scrivere, e questo foglio non
   toglie niente a nessuno.

   Vale solo fra pagine della stessa origine: aperto da disco
   (file://) il sito non transisce, e va bene così.
   ============================================================= */

@view-transition { navigation: auto; }


/* --- La pagina: solo opacità, e non è pigrizia ----------------
   La tentazione era far entrare la pagina nuova allargata dell'1%
   che si assesta, come fanno le fotografie in tutto il resto del
   sito. È stata scartata: qui a muoversi devono essere le
   fotografie del capo, e se si muove anche la pagina sotto non si
   capisce più che cosa si sta guardando. Una maison si riconosce da
   quello che NON fa. Il solo movimento del passaggio è la lastra.

   Le due opacità sono complementari — stessa durata, stessa curva
   lineare — perché il browser compone i due fotogrammi in
   `plus-lighter`: sommano esattamente a 1 e in mezzo non c'è né un
   lampo né un buio. Cambiare una sola delle due durate riapre quel
   buco. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--t-lento);
  animation-timing-function: linear;
}


/* --- L'header non parte ---------------------------------------
   Alzato dalla dissolvenza della pagina, resta al suo posto: la
   cornice sta ferma e dentro cambia il contenuto, che è il gesto
   che distingue una maison da un sito. Se i due stati sono diversi
   — «ridotto» scorrendo, «cima» in arrivo — quello che si vede è la
   fascia bianca che si scioglie, e va bene: è la stessa cosa che
   l'header fa già da sé allo scorrimento, con lo stesso tempo. */
.site-header { view-transition-name: intestazione; }

::view-transition-group(intestazione) { animation-duration: var(--t-lento); }
::view-transition-old(intestazione),
::view-transition-new(intestazione) {
  animation-duration: var(--t-lento);
  animation-timing-function: linear;
}


/* --- La lastra che viaggia ------------------------------------
   Le tre lastre del sito sono la stessa forma, e questo è quello
   che rende il gesto pulito: la griglia di uomo.html e donna.html
   (.articolo__lastra), la vetrina della home (.pezzo__posto) e la
   prima vista della scheda (.palco__vista) hanno tutte
   `aspect-ratio: 3/4`, lo stesso fondo avorio e lo stesso filetto.
   Da 3:4 a 3:4 il morfismo è pura geometria: `cover` non ritaglia
   niente e in nessun fotogramma il capo si deforma. Il giorno che
   una delle tre cambia proporzione, questo passaggio si stira — è
   la riga da ricordare.

   Il nome lo mette js/cortina.js su una lastra sola per documento.

   I DUE TEMPI SONO DIVERSI, ED È LA REGOLA CHE TIENE IN PIEDI
   TUTTO. Le due fotografie si scambiano in 360ms, la scatola
   viaggia in 620: le immagini si risolvono presto e poi la lastra
   atterra, così l'ultima cosa che si ferma è il capo.
   Ma soprattutto: 360 è MENO dei 420 della pagina. Quando una
   lastra parte e dall'altra parte non trova la gemella — si esce da
   una scheda verso una pagina che quel capo non lo mostra — il
   browser la fa solo sfumare, e siccome sfuma prima della pagina
   non resta mai un fotogramma appeso sopra la pagina nuova. È il
   motivo per cui js/cortina.js può alzare la lastra senza chiedersi
   se di là c'è qualcuno: qualunque coppia mancata è invisibile.
   Se un giorno quei 360 superano --t-lento, ricompare il fantasma. */
::view-transition-group(capo) {
  animation-duration: 620ms;
  animation-timing-function: var(--ease);
}

::view-transition-old(capo),
::view-transition-new(capo) {
  animation-duration: 360ms;
  animation-timing-function: linear;
  /* Il browser darebbe alle due fotografie l'altezza naturale del
     loro scatto: mentre la scatola cambia misura resterebbero della
     misura di partenza, e per mezzo secondo si vedrebbe il fondo.
     Riempiendo la scatola a ogni fotogramma il capo sta dentro la
     lastra per tutto il viaggio — ed è esatto proprio perché le due
     proporzioni sono la stessa. */
  height: 100%;
  object-fit: cover;
}


/* --- Movimento ridotto ----------------------------------------
   Non si spegne `navigation: auto`, si spengono le animazioni: la
   transizione c'è ancora ma finisce nello stesso fotogramma in cui
   comincia, cioè la pagina cambia e basta. `!important` qui è lo
   strumento giusto e non una scorciatoia: deve battere le durate
   scritte qui sopra sui nomi, che sono più specifiche di `*`. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}