/* BAB — splash screen en calque.
   Une seule variante — le lockup, où les mots s'animent au-dessus du logo — qui se joue par-dessus le site
   puis s'effacent en fondu : « et le site apparaît » sans rechargement de page.
   Le markup est construit par shared/splash.js, il n'y a rien à maintenir en HTML.

   Couleurs : --sp-bg et --sp-ink sont posées par splash.js, reprises du thème que le
   site a réellement tiré (--half-l / --note-l). --sp-text ne concerne QUE les mots
   ajoutés par le splash, jamais le logo ni les aplats.

   Les valeurs chiffrées (tailles, écarts, durées) sont injectées en variables par
   splash.js. */

/* ---- Calque ----
   z-index 9000 : au-dessus de tout le site (qui plafonne à 40). */
.bab-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  cursor: pointer; /* un clic n'importe où passe le splash */
}
.bab-splash.is-out { pointer-events: none; }

/* ---- Sortie, en deux temps ----

   Le splash montre un aplat unique : la couleur de la moitié GAUCHE. Le site dessous
   est un split gauche|droite. La moitié droite est donc la seule chose qui manque —
   c'est « la couleur qu'on ne voit pas » — et elle monte du bas vers le haut DANS SA
   MOITIÉ, pas sur tout l'écran.

   Couvrir tout l'écran d'une seule couleur, c'était le défaut de la version précédente :
   la moitié gauche changeait de couleur pour rien, puis l'écran plein retombait d'un
   coup sur un split. D'où l'impression de mauvaise couleur et le clignotement final.

   Temps 1 (.is-out) : la moitié droite monte, le contenu s'efface.
   Temps 2 (.is-done) : le calque est alors EXACTEMENT le fond du site — même couleur à
   gauche, même à droite. Son fondu ne révèle donc que le texte du site, aucun aplat ne
   bouge. C'est ce qui rend la bascule invisible. */
.bab-splash__wipe {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: 50%;                    /* la couture, au même endroit que celle du site */
  z-index: 3;
  background: var(--sp-bg2);
  transform: translateY(100%);
  will-change: transform;
}
/* Téléphone : un seul aplat, il ne manque aucune couleur — pas de balayage, le
   splash s'efface simplement. En variante deux couleurs (?m=split, haut / bas), la
   couleur qui manque est celle du bas : elle monte dans la moitié basse. */
@media (max-width: 640px) {
  .bab-splash__wipe { display: none; }
  .m-split .bab-splash__wipe { display: block; left: 0; top: 50%; }
}
.bab-splash.is-out .bab-splash__wipe {
  transform: translateY(0);
  /* Montée plus lente et plus naturelle (demande de Joseph) : au moins 0,9 s, départ
     doux et léger ralentissement à l'arrivée, au lieu d'un ease-in qui finissait sec. */
  transition: transform max(0.9s, calc(var(--sp-fade, 0.9s) * 4 / 3)) cubic-bezier(0.45, 0, 0.2, 1);
}

/* On efface le CONTENU, pas la scène : son fond doit rester en place jusqu'au bout,
   sinon le site transparaît pendant que le balayage monte encore. */
.bab-splash.is-out .bab-splash__scene > * {
  opacity: 0;
  transition: opacity calc(var(--sp-fade, 0.9s) * 0.5) var(--ease-out);
}

.bab-splash.is-done {
  opacity: 0;
  transition: opacity 0.4s linear;
}

.bab-splash__scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sp-bg);
}

/* ============================================================
   V3 — Lockup : reproduction de reference splashscreen3.png,
   jouée mot à mot. Cinq groupes animés séparément par splash.js.
   ============================================================ */
.bab-splash--lockup {
  align-items: center;
  justify-content: center;
  padding: var(--sp-margin, 3%);
}

.bab-splash__lockup {
  width: 100%;
  max-height: 100%;
  color: var(--sp-ink);
}
.bab-splash__lockup svg { width: 100%; height: auto; display: block; }

.bab-splash__lockup [data-grp] {
  opacity: 0;
  transition: opacity var(--sp-step, 0.55s) var(--ease-out);
}
.bab-splash__lockup [data-grp].is-in { opacity: 1; }

/* Les mots de remplacement prennent la couleur du logotype : ils doivent se lire comme
   « Creative » / « House » dont ils prennent la place, pas comme un texte rapporté.
   Pas de letter-spacing : la largeur est calibrée au runtime par splash.js, un tracking
   en plus fausserait la mesure. */
.bab-splash__swap {
  font-family: var(--font-display);
  font-weight: 700;
  fill: var(--sp-ink);
}

/* Les deux mots apparaissent deux fois plus vite que le reste de la séquence. */
.bab-splash__lockup [data-grp="w1"],
.bab-splash__lockup [data-grp="w2"] {
  transition-duration: var(--sp-step-word, 0.28s);
}