/* ================================================================
   BASCULE — transition pro ↔ perso (« passer de l'autre côté »)
   ================================================================
   Deux moments :
   1. SORTIE (page quittée) : un cercle de la couleur du monde cible
      s'étend depuis le point de clic et avale l'écran, avec le nom
      de la destination en Fraunces au centre. Géré par js/bascule.js.
   2. ARRIVÉE (page chargée) : un voile de la couleur locale couvre
      la page dès le premier rendu (posé par le script inline du
      <head> via la classe .bascule-arrivee sur <html>), puis se
      dissout pendant que le hero s'anime. Raccord invisible : le
      voile d'arrivée a la même couleur que le cercle de sortie.
   ================================================================ */


/* ---- 1. Overlay de sortie ---- */

.bascule {
  position: fixed;
  inset: 0;
  z-index: 4000;                 /* au-dessus de tout (nav, overlays, lightbox) */
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  /* couleur + clip-path initial posés en JS (dépendent du point de clic) */
}

.bascule--anime {
  transition: clip-path 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Le nom de la destination, au centre de l'écran */
.bascule__mot {
  font-family: var(--typo-titre);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1, 'wght' 500;
  font-size: clamp(36px, 5vw, 84px);
  letter-spacing: -0.02em;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.bascule__mot--visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---- 2. Voile d'arrivée ---- */

/* Posé par le script inline du <head> AVANT le premier paint :
   couvre la page dans la couleur locale (--bascule-voile, définie
   inline par le même script), le temps que bascule.js prenne le
   relai et lance le fondu. */
html.bascule-arrivee::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4000;
  background-color: var(--bascule-voile, #0B0A09);
}

/* Le div de fondu créé par bascule.js à l'arrivée */
.bascule-voile-sortant {
  position: fixed;
  inset: 0;
  z-index: 4000;
  pointer-events: none;
  background-color: var(--bascule-voile, #0B0A09);
  opacity: 1;
  transition: opacity 0.55s ease-out;
}

.bascule-voile-sortant--fondu {
  opacity: 0;
}