/* ============ Préchargement : rideau « oiseau blanc » (parité site 2021) ============
 * Couvre tout l'écran tant que les images ne sont pas chargées (voir flip.js).
 * Disparaît avec un clip-path qui se referme en cercle — l'animation sert aussi
 * d'intro. Le rideau reste affiché 2 s minimum, même si tout est déjà en cache.
 *
 * Mise à l'échelle : le CONTENU vit dans un CARRÉ centré dont le côté suit la
 * plus petite dimension de l'écran (min(100vw,100vh) = 100vmin). Ce carré est le
 * conteneur CSS → tout est dimensionné en cqw (% du côté du carré). Résultat :
 * l'oiseau et le texte gardent EXACTEMENT la même proportion à toute résolution
 * ET tout format d'écran (le carré ne déborde jamais). */

.loader-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #101010;
  clip-path: circle(200%);
  /* La visibilité bascule APRÈS la fermeture du cercle (délai 1s), sinon elle
     masque le rideau d'un coup et l'animation du cercle ne se voit jamais. */
  transition: clip-path 1s ease-out, visibility 0s linear 1s;
}

/* Le carré de référence : côté = plus petite dimension de l'écran. */
.loader {
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-out;
}

.load-anim {
  width: 30cqw;
  margin: 5cqw;
}

.load-txt {
  margin-top: 0cqw;
  color: #fff;
  font-size: 5.4cqw;
  font-weight: 200;
  letter-spacing: 0.25cqw;
  text-align: center;
}

.load-txt-2 {
  margin-top: 1.5cqw;
  margin-bottom: 15cqw;
  color: #fff;
  font-size: 2cqw;
  font-weight: 200;
  letter-spacing: 0.2cqw;
  opacity: 0.7;
  text-align: center;
}

/* État révélé : le rideau se referme en cercle puis disparaît (posé par flip.js). */
.is-loaded .loader-wrapper {
  clip-path: circle(0%);
  visibility: hidden;
}

.is-loaded .loader {
  opacity: 0;
}