/* ============================================================================
   LE TRANSIZIONI FRA PAGINE
   ----------------------------------------------------------------------------
   Questo sito e' WordPress: ogni collegamento e' un documento nuovo, il
   browser butta via la pagina e ne disegna un'altra. Da sempre quello
   stacco bianco e' il prezzo da pagare per non essere una applicazione a
   pagina singola.

   Non piu'. Con @view-transition il browser tiene un fotogramma della
   pagina che se ne va, uno di quella che arriva, e li fonde. Sono due
   righe, non c'e' nessuna libreria, nessun router, nessun JavaScript — e
   dove non e' supportato non succede assolutamente niente: la pagina
   cambia come prima.

   LA COSA CHE SI NOTA
   -------------------
   Non la dissolvenza: il MORPHING. Alla card di un prodotto e
   all'immagine grande della sua scheda si da' lo STESSO view-transition-name
   (lo scrive il PHP, con l'id del prodotto dentro). Il browser li
   riconosce come lo stesso oggetto nelle due pagine e lo fa volare da
   dove era a dove sara'. Tocchi il rotolo nella vetrina e quel rotolo
   diventa la scheda.

   Perche' il nome deve contenere l'id: due elementi con lo stesso
   view-transition-name nella STESSA pagina annullano tutta la
   transizione. Con sei card in vetrina, un nome unico e' sei card che si
   contendono lo stesso nome, e il risultato e' che non si anima niente.
   ========================================================================= */

@view-transition { navigation: auto; }

/* ── Il fondo: una dissolvenza corta e asimmetrica ──────────────────────
   La pagina che esce sparisce in fretta, quella che entra ci mette un
   filo di piu'. Simmetriche si vedono tutte e due insieme a meta' strada
   e per un istante la pagina e' sporca.                                 */

::view-transition-old(root) {
  animation: rt-vt-esce 110ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: rt-vt-entra 260ms cubic-bezier(0, 0, 0.2, 1) 40ms both;
}
@keyframes rt-vt-esce  { to   { opacity: 0; } }
@keyframes rt-vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* ── La testata non sfarfalla ───────────────────────────────────────────
   Testata e piede sono gli stessi in tutte le pagine. Senza un nome
   proprio finiscono dentro l'istantanea della radice e fanno la
   dissolvenza anche loro: il menu lampeggia a ogni clic, che e'
   esattamente il difetto che questa roba dovrebbe togliere.
   Con un nome proprio il browser li tratta come un oggetto solo che
   resta dov'e'.                                                         */

/* IL NOME STA SULLE DUE FASCE, NON SULLA TESTATA INTERA.
   view-transition-name fa dell'elemento una "radice di sfondo", e dentro
   una radice di sfondo backdrop-filter sfoca SOLO quello che sta dentro
   quell'elemento. Con il nome su .rt-header, il vetro della barra —
   scritto in layout.css dal primo giorno — non sfocava assolutamente
   niente: dietro la barra, dentro la testata, non c'e' nulla. Non si
   poteva vedere finche' la barra scorreva via con la pagina e non aveva
   mai niente sotto; si e' visto il giorno in cui e' diventata fissa.
   Due nomi invece di uno fanno lo stesso mestiere — le due fasce non
   sfarfallano cambiando pagina — e lasciano la barra fuori da qualunque
   radice di sfondo. */
.rt-servizio          { view-transition-name: rt-testata-servizio; }
.rt-header__appiccica { view-transition-name: rt-testata-barra; }
.rt-footer { view-transition-name: rt-piede; }
.rt-giu    { view-transition-name: rt-barra-giu; }

::view-transition-group(rt-testata-servizio),
::view-transition-group(rt-testata-barra),
::view-transition-group(rt-piede),
::view-transition-group(rt-barra-giu) { animation-duration: 0ms; }

/* ── Il morphing dell'immagine ──────────────────────────────────────────
   Il nome lo mette il PHP come variabile, perche' un custom property si
   puo' scrivere in uno style inline e un view-transition-name no — o
   meglio, si puo', ma cosi' il nome resta una cosa sola scritta in un
   posto solo.                                                           */

[style*="--rt-vt"] { view-transition-name: var(--rt-vt); }

::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Chi ha chiesto meno movimento ──────────────────────────────────────
   Niente transizione. Non una piu' corta: nessuna. Il browser cambia
   pagina come ha sempre fatto.                                          */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}