/* ---- LA VIEW TRANSITION ENTRE DOCUMENTS (accueil <-> graphen) ----

   Le saut de page etait une saccade : derniere image de la goutte, puis le
   degrade nu pendant la compilation des shaders, puis la goutte de l'autre
   page. Ici, le navigateur FIGE la derniere image de la page quittee et la
   TIENT par-dessus la nouvelle tant que son eau n'est pas rendue — puis la
   nouvelle parait en fondu (610 ms). html.vt-pret est pose par vt-pret.js
   quand le moteur de la page a peint sa premiere image d'eau ; a defaut, la
   nouvelle parait quand meme a 4 s (steps(1, end) : le secours du secours).

   Seules les pages qui CHARGENT cette feuille participent (l'aller-retour
   accueil <-> graphen) : les autres navigations gardent le voile habituel de
   transition.js — la view transition inter-documents exige l'opt-in des DEUX
   cotes. Navigateurs sans view transitions : tout ceci est ignore. */

@view-transition { navigation: auto; }

/* ---- L'EN-TETE ET LA BARRE NE PASSENT PAS SOUS LE VOILE ----
   /graphen/ ne charge pas ciel.css : sans nom ici, ses onglets, son logo et
   sa barre de chat seraient pris dans `root` — tenus sous l'image de
   l'ancienne page jusqu'a vt-pret, puis fondus avec le reste. Or ils sont
   identiques d'une page a l'autre : ils doivent etre la des la premiere
   image (demande de Quentin). Memes noms et memes regles que ciel.css — les
   pseudo-elements sont stylees par la page d'ARRIVEE, chaque cote doit donc
   porter les siennes. */
.entete { view-transition-name: entete; }
.barre  { view-transition-name: barre; }

::view-transition-old(entete) { animation: none; opacity: 0; }
::view-transition-new(entete) { animation: none; opacity: 1; }
::view-transition-group(entete) { animation-duration: 380ms; }
::view-transition-old(barre) { animation: none; opacity: 0; }
::view-transition-new(barre) { animation: none; opacity: 1; }
::view-transition-group(barre) { animation-duration: 380ms; }

/* l'ancienne image reste pleine, au-dessus, sans animation propre */
::view-transition-old(root) { animation: none; }

/* la nouvelle page attend, invisible, sous l'ancienne image */
::view-transition-new(root) {
  animation: vt-cache 4000ms steps(1, end) both;
}

/* l'eau de la nouvelle page est la : elle parait en fondu */
html.vt-pret::view-transition-new(root) {
  animation: vt-parait 610ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vt-cache { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-parait { from { opacity: 0; } to { opacity: 1; } }