/* ==========================================================================
   Transitions entre pages (fichier partagé, chargé par toutes les pages)
   --------------------------------------------------------------------------
   Principe : le navigateur (API View Transitions) fait glisser le TW et les
   liens du menu depuis leur place sur l'ancienne page jusqu'à leur vraie
   place sur la nouvelle. Aucune coordonnée écrite à la main.
   Depuis l'accueil, les widgets s'écartent vers le bord le plus proche et
   "Accueil" + le lien cliqué se dissolvent en sable (js/page-transitions.js).

   - Chrome, Edge, Safari 18.2+ : version complète
   - Firefox et navigateurs plus anciens : version simplifiée (classe
     .tw-leaving posée par le JS avant de changer de page)
   - "Réduire les animations" activé : aucun mouvement
   ========================================================================== */

@view-transition {
  navigation: auto;
}

/* --- 1. Le monogramme TW : le même objet sur toutes les pages ------------ */
.brand-monogram,
.site-nav .nav-monogram {
  view-transition-name: tw-mark;
}

/* "/ TOMA WASSOUMBOU" n'existe que sur les pages secondaires :
   il sort du TW en glissant. */
.site-nav .nav-title-group .nav-divider { view-transition-name: tw-name; }
.site-nav .nav-title-group .nav-author  { view-transition-name: tw-author; }

/* --- 2. Chaque lien du menu porte un nom stable -------------------------- */
.nav-links-bar  a[href="index.html"],
.nav-pills-group a[href="index.html"]           { view-transition-name: nav-accueil; }
.nav-links-bar  a[href="projets.html"],
.nav-pills-group a[href="projets.html"]         { view-transition-name: nav-projets; }
.nav-links-bar  a[href="cinema.html"],
.nav-pills-group a[href="cinema.html"]          { view-transition-name: nav-cinema; }
.nav-links-bar  a[href="peintures.html"],
.nav-pills-group a[href="peintures.html"]       { view-transition-name: nav-galerie; }
.nav-links-bar  a[href="recommandations.html"],
.nav-pills-group a[href="recommandations.html"] { view-transition-name: nav-reco; }

/* --- 3. Réglages communs ------------------------------------------------- */
::view-transition-group(*) {
  animation-duration: 0.48s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(root) {
  animation: vt-fade-out 0.3s ease both;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.36s ease 0.06s both;
}

/* Le TW passe d'une icône carrée à un mot : on garde ses proportions
   pendant le trajet et on fond l'un dans l'autre. */
::view-transition-old(tw-mark),
::view-transition-new(tw-mark) {
  height: 100%;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}

::view-transition-new(tw-name),
::view-transition-new(tw-author) {
  animation: vt-name-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}
::view-transition-old(tw-name),
::view-transition-old(tw-author) {
  animation: vt-name-out 0.2s ease both;
}

/* Liens présents seulement d'un côté : fondu court */
::view-transition-old(nav-accueil),
::view-transition-old(nav-projets),
::view-transition-old(nav-cinema),
::view-transition-old(nav-galerie),
::view-transition-old(nav-reco) {
  animation: vt-fade-out 0.24s ease both;
}
::view-transition-new(nav-accueil),
::view-transition-new(nav-projets),
::view-transition-new(nav-cinema),
::view-transition-new(nav-galerie),
::view-transition-new(nav-reco) {
  animation: vt-fade-in 0.32s ease 0.14s both;
}

/* --- 4. Sortie de l'accueil : widgets et liens dissous -------------------- */
/* Les classes sont posées par le JS juste avant la capture de l'ancienne page */
::view-transition-old(*.w-left) {
  animation: vt-out-left 0.46s cubic-bezier(0.5, 0, 0.25, 1) both;
}
::view-transition-old(*.w-right) {
  animation: vt-out-right 0.46s cubic-bezier(0.5, 0, 0.25, 1) both;
}
::view-transition-old(*.w-zoom) {
  animation: vt-out-zoom 0.42s cubic-bezier(0.4, 0, 0.6, 1) both;
}

/* Le lien cliqué et "Accueil" : le sable prend le relais tout de suite */
::view-transition-old(*.sand) {
  animation: vt-fade-out 0.06s linear both;
}

/* Calque de particules : visible dès la première image de la nouvelle page */
.tw-sand-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2147483000;
  view-transition-name: tw-sand;
}
::view-transition-group(tw-sand) {
  animation: none;
}
::view-transition-new(tw-sand) {
  animation: none;
}

/* --- 5. Retour vers l'accueil : les widgets reviennent des bords ------------ */
::view-transition-new(*.w-in-left) {
  animation: vt-in-left 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(*.w-in-right) {
  animation: vt-in-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(*.w-in-zoom) {
  animation: vt-in-zoom 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- 6. Images clés ------------------------------------------------------- */
@keyframes vt-fade-in  { from { opacity: 0; } }
@keyframes vt-fade-out { to   { opacity: 0; } }

@keyframes vt-name-in {
  from { opacity: 0; transform: translateX(-14px); filter: blur(3px); }
}
@keyframes vt-name-out {
  to { opacity: 0; transform: translateX(-10px); }
}

@keyframes vt-out-left {
  60%  { opacity: 1; }
  to   { transform: translateX(-60vw) rotate(-4deg); opacity: 0; }
}
@keyframes vt-out-right {
  60%  { opacity: 1; }
  to   { transform: translateX(60vw) rotate(4deg); opacity: 0; }
}
@keyframes vt-out-zoom {
  to { transform: scale(1.15) translateY(-16px); filter: blur(8px); opacity: 0; }
}
@keyframes vt-in-left {
  from { transform: translateX(-40vw) rotate(-3deg); opacity: 0; }
}
@keyframes vt-in-right {
  from { transform: translateX(40vw) rotate(3deg); opacity: 0; }
}
@keyframes vt-in-zoom {
  from { transform: scale(0.94); filter: blur(6px); opacity: 0; }
}

/* --- 7. Navigateurs sans View Transitions (Firefox…) ----------------------- */
/* Sortie de l'accueil jouée sur la page elle-même avant de changer de page */
body.tw-leaving {
  overflow: hidden;
}
body.tw-leaving [data-tw-exit] {
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.5, 0, 0.25, 1),
              opacity 0.4s ease, filter 0.4s ease !important;
}
body.tw-leaving [data-tw-exit="left"]  { transform: translateX(-70vw) rotate(-4deg) !important; opacity: 0 !important; }
body.tw-leaving [data-tw-exit="right"] { transform: translateX(70vw) rotate(4deg) !important; opacity: 0 !important; }
body.tw-leaving [data-tw-exit="zoom"]  { transform: scale(1.15) translateY(-16px) !important; filter: blur(8px) !important; opacity: 0 !important; }
body.tw-leaving [data-tw-exit="sand"]  { opacity: 0 !important; transition: opacity 0.08s linear !important; }
body.tw-leaving [data-tw-exit="fade"]  { opacity: 0 !important; transition: opacity 0.3s ease !important; }

/* Entrée légère des pages dans ces navigateurs */
@keyframes page-fade-in {
  from { opacity: 0; }
}
html.no-vt body {
  animation: page-fade-in 0.32s ease both;
}

/* --- 8. Accessibilité : rien ne bouge si l'utilisateur l'a demandé --------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  html.no-vt body {
    animation: none;
  }
}