/* ===========================================================================
   Titolo che diventa "<HOME" al passaggio del mouse — il MECCANISMO condiviso da ogni
   pagina a schermo intero (gallery, portfolio), classi prefissate `tsw-` per non
   incrociare i CSS di pagina. Qui c'è SOLO lo scambio di lettere: posizione, corpo di
   partenza e font di ogni titolo restano nel CSS della singola pagina (`.rg-title` in
   gallery.css, `.pf-title` in portfolio.css) — quello che cambierebbe da pagina a pagina.
   Il JS che pilota queste classi è static/js/title-swap.js.
   =========================================================================== */

.tsw-title a { color: inherit; text-decoration: none; }

/* Lettere del titolo: ognuna è una finestrella alta una riga con dentro DUE glifi
   impilati — quello del titolo e quello di `data-alt` ("<HOME"). Sopra il contenuto la
   colonnina scorre in su di 1em e ogni lettera è sostituita da quella che arriva dal
   basso; la finestrella intanto passa dalla larghezza di un glifo a quella dell'altro
   (--wa -> --wb, misurate dal JS in em), così le lettere non si accavallano né vengono
   tagliate — e le parole più corte crescono da zero, le più lunghe si richiudono.
   Lo stagger è `--i`, l'indice della lettera: la sostituzione corre da sinistra a destra. */
.tsw-tw { white-space: nowrap; }   /* una parola non si spezza mai a metà */
.tsw-tl {
  display: inline-block; vertical-align: top;
  height: 1em; overflow: hidden;
  width: var(--wa, auto);
}
.tsw-tl-in { display: block; }
.tsw-tl i { display: block; height: 1em; line-height: 1; font-style: normal; }
.tsw-tl, .tsw-tl-in {
  transition: width 460ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 32ms),
              transform 460ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 32ms);
}
.tsw-title.is-back .tsw-tl { width: var(--wb, 0); }
.tsw-title.is-back .tsw-tl-in { transform: translateY(-1em); }
/* Il simbolo di testa ("<") non sostituisce nessuna lettera: la sua finestrella parte
   chiusa e lui arriva da SINISTRA mentre si apre. Ha un glifo solo, quindi la regola
   verticale qui sopra non deve toccarlo. */
.tsw-tl.is-lead .tsw-tl-in { transform: translateX(-100%); }
.tsw-title.is-back .tsw-tl.is-lead .tsw-tl-in { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .tsw-tl, .tsw-tl-in { transition: none !important; }
}