/* ===================================
   VIEW TRANSITIONS API - MPA (Multi-Page Application)
   Animations slide pour navigation entre documents
   =================================== */

/* === ACTIVATION DES TRANSITIONS === */
@view-transition {
    navigation: auto;
}

/* === ANIMATIONS DE BASE === */

/* Slide vers la gauche (sortie) */
@keyframes slide-out-to-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Slide depuis la droite (entrée) */
@keyframes slide-in-from-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Slide vers la droite (sortie) */
@keyframes slide-out-to-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Slide depuis la gauche (entrée) */
@keyframes slide-in-from-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* === APPLICATION DES ANIMATIONS SELON LE TYPE === */

/* Navigation FORWARD (index → contribution) */
html:active-view-transition-type(forward) {
    &::view-transition-old(root) {
        animation: slide-out-to-left 1s ease-in-out;
    }
    &::view-transition-new(root) {
        animation: slide-in-from-right 1s ease-in-out;
    }
}

/* Navigation BACKWARD (contribution → index) */
html:active-view-transition-type(backward) {
    &::view-transition-old(root) {
        animation: slide-out-to-right 1s ease-in-out;
    }
    &::view-transition-new(root) {
        animation: slide-in-from-left 1s ease-in-out;
    }
}

/* === OPTIMISATIONS === */

/* S'assurer que le groupe capture tout l'écran */
::view-transition-group(root) {
    animation-duration: 1s;
}

/* Empêcher le blend mode par défaut */
::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}