/* ==========================================================================
   Les ornements : deux angles fleuris qui encadrent la lecture.

   Sa place dans la pile : au-dessus du fond photographique et du décor de
   l'enveloppe (3 > 1), sous le récit (5). C'est ce qui les fait passer
   DERRIÈRE la calligraphie : le voile de .chapitre-vue les estompe au centre
   de l'écran, et les laisse intacts dans les angles, qu'il n'atteint pas.

   Ils sont `fixed` : le lecteur défile, eux ne bougent pas — ils habillent
   l'écran, pas le document.
   ========================================================================== */

/* Les deux images sont des ANGLES : leur motif est un L, collé à deux bords
   du fichier et laissant l'autre moitié vide. Poser la boîte à ras du coin
   suffit donc à caler le dessin ; la moitié transparente déborde vers le
   centre de l'écran, sans rien y masquer.

   D'où le rapport 1240/1080, qui est celui du FICHIER et non du dessin : la
   boîte tient l'image entière, marge vide comprise. Le bras long du L, lui,
   occupe toute la hauteur, et c'est pourquoi --ornement-taille est une
   hauteur.

   L'opacité n'est pas confiée à GSAP, à l'inverse de tout ce qui bouge dans
   l'invitation : comme le bouton du son, l'ornement est de l'habillage et non
   de la chorégraphie. Il paraît quand `html.recit-ouvert` est posée — donc à
   la fin de l'ouverture, et jamais avant : l'enveloppe fermée est un objet de
   papier qui se suffit, et deux bouquets par-dessus la dentelle feraient deux
   décors à la fois. Le retour à l'état fermé (bouton « Rejouer ») les remet
   d'eux-mêmes en sommeil, puisque c'est la même classe qui s'en va. */
.ornement {
  position: fixed;
  z-index: 3;

  height: var(--ornement-taille);
  aspect-ratio: 1240 / 1080;

  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-doux);
}

html.recit-ouvert .ornement { opacity: var(--ornement-presence); }

.ornement--haut-gauche {
  top: 0;
  left: 0;
  background-image: var(--tex-ornement-haut);
}

.ornement--bas-droit {
  right: 0;
  bottom: 0;
  background-image: var(--tex-ornement-bas);
}