/* ==========================================================================
   View Transitions API — Animations de navigation TechTalk
   --------------------------------------------------------------------------
   Pilotées par data-slide-direction posé sur :root par
   ajax-nav-content-updater.js juste avant document.startViewTransition().
   Valeurs possibles : "left" (par défaut), "right", "up-to-list", "fade",
   "pagination".
   ========================================================================== */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

/* Direction par défaut : aller (drilling down, page suivante) */
::view-transition-old(root) { animation-name: tt-vt-slide-out-left; }
::view-transition-new(root) { animation-name: tt-vt-slide-in-from-right; }

/* Retour (page précédente) */
:root[data-slide-direction="right"] ::view-transition-old(root) { animation-name: tt-vt-slide-out-right; }
:root[data-slide-direction="right"] ::view-transition-new(root) { animation-name: tt-vt-slide-in-from-left; }

/* Remontée single → liste : cross-fade plus rapide */
:root[data-slide-direction="up-to-list"] ::view-transition-old(root) {
    animation-name: tt-vt-fade-out;
    animation-duration: 0.3s;
}
:root[data-slide-direction="up-to-list"] ::view-transition-new(root) {
    animation-name: tt-vt-fade-in;
    animation-duration: 0.4s;
}

/* Fade pur (single → single, autres cas neutres) */
:root[data-slide-direction="fade"] ::view-transition-old(root) { animation-name: tt-vt-fade-out; }
:root[data-slide-direction="fade"] ::view-transition-new(root) { animation-name: tt-vt-fade-in; }

/* Pagination intra-liste : cross-fade court */
:root[data-slide-direction="pagination"] ::view-transition-old(root),
:root[data-slide-direction="pagination"] ::view-transition-new(root) {
    animation-duration: 0.25s;
}
:root[data-slide-direction="pagination"] ::view-transition-old(root) { animation-name: tt-vt-fade-out; }
:root[data-slide-direction="pagination"] ::view-transition-new(root) { animation-name: tt-vt-fade-in; }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes tt-vt-slide-out-left {
    from { transform: translate3d(0, 0, 0);    opacity: 1; }
    to   { transform: translate3d(-100%, 0, 0); opacity: 0; }
}
@keyframes tt-vt-slide-in-from-right {
    from { transform: translate3d(100%, 0, 0); opacity: 0; }
    to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes tt-vt-slide-out-right {
    from { transform: translate3d(0, 0, 0);    opacity: 1; }
    to   { transform: translate3d(100%, 0, 0); opacity: 0; }
}
@keyframes tt-vt-slide-in-from-left {
    from { transform: translate3d(-100%, 0, 0); opacity: 0; }
    to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}
@keyframes tt-vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes tt-vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}