/* ==========================================================================
   L'écran de chargement.

   Il couvre la page le temps que les textures soient téléchargées ET
   décodées : sans lui, l'enveloppe se construisait sous les yeux du lecteur —
   le papier arrivait, puis la dentelle, puis le sceau, chacun d'un coup et
   dans le désordre.

   Il est peint par le CSS, donc dès la première image, avant même que le
   module ne s'exécute. C'est la raison d'être de son état visible par défaut :
   ce qu'il masque, ce sont précisément les instants qui précèdent le JS.
   `assets/invitation/js/loader.js` l'efface quand tout est prêt.
   ========================================================================== */

.chargement {
  position: fixed;
  inset: 0;
  z-index: 60;      /* au-dessus de tout, boutons flottants compris */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;

  /* Le même ivoire que la scène : quand l'écran s'efface, le fond ne bouge
     pas, seul le contenu paraît. */
  background: var(--ivoire);
  color: var(--encre);

  /* Une police du système, et surtout PAS `--calligraphie` ni la Cormorant :
     cet écran attend justement que les polices arrivent. S'habiller de ce
     qu'on attend, c'est se faire réécrire sous les yeux du lecteur à la
     seconde où le chargement s'achève. */
  font-family: Georgia, "Times New Roman", serif;
}

.chargement-mot {
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .7;
}

/* La jauge reprend le dessin des filets qui encadrent les chapitres : un
   cheveu d'or, sur un lit à peine teinté qui en montre la longueur totale. */
.chargement-jauge {
  position: relative;
  width: min(52vw, 240px);
  height: 1px;
  background: rgba(169, 138, 92, .2);
}

.chargement-encre {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--or));

  /* GSAP l'amène : le CSS ne pose que le départ, comme partout ailleurs. */
  transform: scaleX(0);
  transform-origin: left center;
}

/* Le compteur et le choix se relaient dans la même case, pour que le fondu
   croisé ne déplace rien. `place-items: center` les recentre tous les deux :
   ils n'ont pas la même hauteur, et la case prend celle du plus grand. */
.chargement-relais {
  display: grid;
  place-items: center;
}
.chargement-relais > * {
  grid-area: 1 / 1;
}

.chargement-part {
  font-size: 26px;
  letter-spacing: .12em;
  color: var(--or);

  /* Les chiffres ne dansent pas pendant qu'ils défilent : sans cela, la
     largeur du nombre change à chaque unité et le compteur tressaute. */
  font-variant-numeric: tabular-nums;
}

/* ---- Le choix du plein écran ------------------------------------------
   Il paraît à la place du compteur, une fois tout chargé. Même police du
   système que le reste de l'écran, et pour la même raison : les polices de
   l'invitation viennent peut-être d'arriver, mais l'écran de chargement a
   trois sorties et deux d'entre elles ne les attendent pas. Le dessin ne
   tient donc qu'à la lettre espacée et au filet d'or, qui sont lisibles
   dans n'importe quel serif.

   Le conteneur est en `hidden` dans le gabarit : loader.js ne le lève que
   si le navigateur sait passer en plein écran. */
.chargement-choix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  /* GSAP l'amène, le CSS ne pose que le départ — comme partout ailleurs. */
  opacity: 0;
}

/* `hidden` sur un élément de grille ne suffit pas : la règle du navigateur
   est moins spécifique que le `display: flex` ci-dessus, qui la gagnerait. */
.chargement-choix[hidden] { display: none; }

.chargement-boutons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Les deux notes sont des PHRASES, pas des libellés : ni capitales ni large
   interlettrage, qui sont ici la marque du titre. Le contraste de casse suffit
   à les mettre au second plan, sans les rendre illisibles pour autant. */
.chargement-note,
.chargement-sortie {
  max-width: min(46ch, 86vw);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: rgba(107, 58, 75, .58);
}

.chargement-sortie {
  font-size: 11px;
  color: rgba(107, 58, 75, .44);
}

.chargement-bouton {
  padding: 11px 22px;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);

  font-family: inherit;
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background .25s, color .25s, transform .1s;
}
.chargement-bouton:hover  { background: var(--or); color: var(--ivoire); }
.chargement-bouton:active { transform: scale(.96); }

/* Le premier bouton reçoit le focus dès qu'il paraît, pour que le clavier
   n'ait pas à traverser la page : l'anneau du navigateur, noir et carré,
   serait le seul trait dur de tout l'écran. */
.chargement-bouton:focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 3px;
}

/* Le second choix n'est pas un refus, c'est le déroulé ordinaire : il se
   tient en retrait plutôt que de faire face au premier. */
.chargement-bouton--discret {
  border-color: transparent;
  color: rgba(107, 58, 75, .62);
}
.chargement-bouton--discret:hover {
  background: transparent;
  color: var(--encre);
}