/* ==========================================================================
   Le fond photographique : la photo découverte quand l'enveloppe s'ouvre,
   qui se floute et s'éclaircit pendant que le lecteur descend vers le
   premier chapitre.

   Sa place dans la pile : au-dessus de .scene (le décor de l'enveloppe,
   qu'il recouvre entièrement) et sous .recit (les chapitres, qui défilent
   par-dessus). Le voile de chaque chapitre-vue vient s'y ajouter au centre
   de l'écran, là où se pose le texte.

   Le flou et le voile appartiennent à une timeline GSAP jouée par le
   DÉFILEMENT, pas par le temps — voir assets/invitation/js/backdrop.js et
   l'« approche » dans assets/invitation/js/story.js. Le CSS ne pose ici que
   l'état de départ.
   ========================================================================== */

/* La photo est là DÈS LE CHARGEMENT, et c'est tout le principe : elle n'entre
   pas en scène, elle est DÉCOUVERTE. L'enveloppe la couvre entièrement tant
   qu'elle est fermée ; le rabat qui se lève et la poche qui coulisse la
   dégagent, comme une photo qu'on sort de son pli.

   Elle n'a donc aucune opacité animée. La faire paraître par un fondu une
   fois l'enveloppe ouverte donnait deux temps là où il n'en faut qu'un : on
   voyait l'enveloppe s'ouvrir sur un fond neutre, puis la photo arriver
   après coup. */
.fond {
  position: fixed;
  inset: 0;
  z-index: 0;            /* sous .scene (1), donc sous l'enveloppe */

  overflow: hidden;      /* le débord de .fond-image est coupé ici */
  pointer-events: none;
}

/* La photo elle-même, seule à porter le flou.

   Elle déborde volontairement de son cadre : `filter: blur()` estompe aussi
   les BORDS de l'élément, qui laisseraient paraître une frange transparente
   sur tout le pourtour de l'écran. Le débord repousse cette frange hors
   champ, et le `overflow: hidden` du parent la coupe.

   Il doit rester supérieur à TROIS FOIS le flou maximal réglé par `FOND.flou`
   (assets/invitation/js/config.js) : `blur(28px)` est un écart-type, et une
   gaussienne s'étale sur trois écarts-types avant de s'éteindre. Un débord
   de 80 px sous un flou de 28 laissait la frange affleurer le bord. */
.fond-image {
  position: absolute;
  inset: -120px;
  background: var(--tex-fond) center / cover no-repeat;
}

/* Voile d'ivoire posé par-dessus la photo : c'est lui qui l'éclaircit et la
   ramène vers la couleur du papier, pour que le texte des chapitres se lise
   sans effort. Il s'ajoute au voile radial de .chapitre-vue, plus dense, qui
   traite le centre de l'écran.

   Séparé de .fond-image, et pas fondu dans son filtre : une couleur plate
   n'a aucune raison d'être floutée à chaque image. */
.fond-voile {
  position: absolute;
  inset: 0;
  background: var(--fond-voile);
  opacity: 0;            /* GSAP l'amène au fil du défilement */
}