/* ============================================================
   TRANSITIONS ENTRE PAGES — style galerie moderne
   Fondu + décalage directionnel, sobre et fluide
   ============================================================ */

/* ---- Entrée depuis la droite (navigation "avant") ---- */
@keyframes pageInFromRight {
  from {
    opacity: 0;
    transform: translateX(48px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
}

/* ---- Sortie vers la gauche (navigation "avant") ---- */
@keyframes pageOutToLeft {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: translateX(-48px) scale(0.97);
    filter: blur(3px);
  }
}

/* ---- Entrée depuis la gauche (retour "arrière") ---- */
@keyframes pageInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-48px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
}

/* ---- Sortie vers la droite (retour "arrière") ---- */
@keyframes pageOutToRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: translateX(48px) scale(0.97);
    filter: blur(3px);
  }
}

/* ---- Application par défaut ---- */
body {
  animation: pageInFromRight 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Aller "avant" (index→menu→jeu) */
body.page-leaving {
  animation: pageOutToLeft 0.38s cubic-bezier(0.55, 0, 0.8, 0.45) both;
  pointer-events: none;
}

/* Retour "arrière" (← bouton retour) */
body.page-leaving-back {
  animation: pageOutToRight 0.38s cubic-bezier(0.55, 0, 0.8, 0.45) both;
  pointer-events: none;
}

body.page-enter-back {
  animation: pageInFromLeft 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}