/* ===============================================================
   La transizione fra la home e la libreria, nei due sensi.

   ANDATA  — si scende in un cunicolo di roccia blu, in fondo cresce
             una luce ambra (il colore della libreria visto da lontano),
             poi TUTTO VA A NERO e dall'altra parte, sul nero, SI ACCENDE
             un monitor a tubo catodico: e' cio' che spiega l'interfaccia
             del 1998. Il blackout non e' un vezzo — e' la giunta: senza,
             fra la luce della clip e il nero dell'accensione si vede
             passare la pagina grigia.
   RITORNO — il monitor SI SPEGNE, si risale il cunicolo e la luce si
             richiude in un punto. A casa si arriva dal buio.

   Tutto cio' che riguarda l'ingresso sta su <html> e in <head>: un
   effetto d'ingresso non puo' dipendere da un file in fondo alla
   pagina, o arriva tardi. Lezione gia' pagata una volta.
   =============================================================== */

/* ---------- il cunicolo (canvas, a schermo intero) ---------- */
#fx{position:fixed;inset:0;z-index:9000;display:none;background:#02060C}
#fx.on{display:block}
#fx canvas,#fx video{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Due clip, entrambe gia' in memoria: `giu` scende e finisce nel bianco,
   `su` risale e finisce nel nero. La direzione la decide il link, non la
   pagina da cui si parte, cosi' il colore di chiusura combacia sempre con
   l'effetto d'arrivo. */
#fx video{object-fit:cover;display:none}
#fx.video.giu video[data-dir="giu"],
#fx.video.su  video[data-dir="su"]{display:block}
/* col video in scena il canvas si fa da parte; resta la riserva se il
   video non parte (autoplay negato, codec assente, file mancante) */
#fx.video canvas{display:none}

/* ---------- le due bande del tubo catodico ----------
   Il bagliore sulla loro cucitura E' la riga bianca del monitor:
   nessun terzo elemento. `forwards` e' una sicurezza — anche se la
   classe restasse appiccicata, l'animazione finisce dove deve. */
html.fx-arrivo::before, html.fx-arrivo::after,
html.fx-spegni::before, html.fx-spegni::after{
  content:'';position:fixed;left:0;right:0;z-index:9999;
  background:#000;pointer-events:none;
}
html.fx-arrivo::before, html.fx-spegni::before{top:0}
html.fx-arrivo::after,  html.fx-spegni::after {bottom:0}

/* L'ACCENSIONE AVVIENE SUL NERO. La clip finisce in un blackout, qui si
   arriva al buio, il buio tiene per un istante (il ritardo dell'animazione:
   durante l'attesa valgono gli stili di base, cioe' due bande nere) e solo
   allora la cucitura si accende e le bande si ritirano.
   Prima le bande partivano bianche e diventavano nere: fra il bianco della
   clip e il nero dell'accensione si vedeva passare il grigio della pagina,
   e il monitor sembrava accendersi in ritardo. */
html.fx-arrivo{background:#000}
html.fx-arrivo::before, html.fx-arrivo::after{
  height:50%;
  animation:ritira .52s cubic-bezier(.22,.72,.26,1) .16s forwards;
}
@keyframes ritira{
  0%  {height:50%; background:#000000; box-shadow:0 0 0 0 rgba(255,255,255,0)}
  11% {height:50%; box-shadow:0 0 36px 13px rgba(255,255,255,1)}
  34% {box-shadow:0 0 26px 7px rgba(255,255,255,.8)}
  100%{height:0;   background:#000000; box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* spegnimento: le bande si chiudono fino alla riga, poi resta il nero */
html.fx-spegni::before, html.fx-spegni::after{
  height:0;
  animation:chiudi .26s cubic-bezier(.5,0,.75,.2) forwards;
}
@keyframes chiudi{
  0%  {height:0;   box-shadow:0 0 0 0 rgba(255,255,255,0)}
  100%{height:50%; box-shadow:0 0 30px 10px rgba(255,255,255,.98)}
}

/* ---------- apertura del sito ----------
   Il velo deve esserci al primo fotogramma, altrimenti si vede la home
   un istante prima che parta il filmato. Sta sotto a #fx (z 9000) perche'
   il filmato gli vada sopra. Lo toglie fx.js; se fx.js non arrivasse, lo
   toglie comunque il timeout nello script in <head>. */
html.fx-intro{background:#02060C}
html.fx-intro::before{
  content:'';position:fixed;inset:0;z-index:8900;
  background:#02060C;pointer-events:none;
}
/* in chiusura il filmato finisce nel nero: si sfuma via da li' */
#fx.chiudi{background:#02060C;animation:apri-sito .45s ease-out forwards}
@keyframes apri-sito{ from{opacity:1} to{opacity:0} }

/* ---------- arrivo: si esce sempre dal buio ----------
   C'era anche un `fx-chiaro` per chi arrivava scendendo, quando la clip
   dell'andata finiva nel bianco. Ora tutte e due le clip finiscono nel
   nero, quindi il velo d'arrivo e' uno solo: meno pezzi, e il colore di
   chiusura combacia sempre. */
html.fx-buio::before{
  content:'';position:fixed;inset:0;z-index:9999;
  pointer-events:none;background:#02060C;
  animation:svanisci .46s ease-out .04s forwards;
}
@keyframes svanisci{ from{opacity:1} to{opacity:0} }

@media (prefers-reduced-motion:reduce){
  #fx{display:none !important}
  html.fx-arrivo::before, html.fx-arrivo::after,
  html.fx-spegni::before, html.fx-spegni::after,
  html.fx-buio::before,
  html.fx-intro::before{display:none}
}