/* /assets/css/transitions.css */
/* Animations de transition type "tourner une page" */

/* Overlay de transition */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0EA5E9 0%, #8B5CF6 100%);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform-origin: left center;
    transition: none;
}

/* Animation de sortie - la page actuelle "tourne" vers la gauche */
.page-transition-overlay.transitioning-out {
    pointer-events: all;
    animation: pageFlipOut 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

/* Animation d'entrée - la nouvelle page "tourne" depuis la droite */
.page-transition-overlay.transitioning-in {
    pointer-events: all;
    animation: pageFlipIn 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

/* Keyframes pour l'animation de sortie */
@keyframes pageFlipOut {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateY(0deg);
    }
    50% {
        opacity: 1;
        transform: perspective(1200px) rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(-90deg);
    }
}

/* Keyframes pour l'animation d'entrée */
@keyframes pageFlipIn {
    0% {
        opacity: 1;
        transform: perspective(1200px) rotateY(90deg);
    }
    50% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg);
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) rotateY(0deg);
    }
}

/* Animation du contenu de la page */
.page-content {
    animation: fadeInContent 0.4s ease-out 0.3s both;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Empêcher le scroll pendant la transition */
body.transitioning {
    overflow: hidden;
}

/* Style alternatif - effet de page qui se retourne comme un livre */
.page-transition-overlay.book-flip-out {
    animation: bookFlipOut 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.page-transition-overlay.book-flip-in {
    animation: bookFlipIn 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

@keyframes bookFlipOut {
    0% {
        opacity: 0;
        transform: perspective(1400px) rotateY(0deg) scale(1);
        transform-origin: left center;
    }
    50% {
        opacity: 1;
        transform: perspective(1400px) rotateY(-180deg) scale(0.8);
        transform-origin: left center;
    }
    100% {
        opacity: 1;
        transform: perspective(1400px) rotateY(-180deg) scale(0.8);
        transform-origin: left center;
    }
}

@keyframes bookFlipIn {
    0% {
        opacity: 1;
        transform: perspective(1400px) rotateY(180deg) scale(0.8);
        transform-origin: right center;
    }
    50% {
        opacity: 1;
        transform: perspective(1400px) rotateY(0deg) scale(1);
        transform-origin: right center;
    }
    100% {
        opacity: 0;
        transform: perspective(1400px) rotateY(0deg) scale(1);
        transform-origin: right center;
    }
}

/* Animation de chargement pendant la transition */
.page-transition-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    opacity: 0;
}

.page-transition-overlay.transitioning-out::after,
.page-transition-overlay.transitioning-in::after {
    opacity: 1;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    @keyframes pageFlipOut {
        0% {
            opacity: 0;
            transform: perspective(800px) rotateY(0deg);
        }
        50% {
            opacity: 1;
            transform: perspective(800px) rotateY(-90deg);
        }
        100% {
            opacity: 1;
            transform: perspective(800px) rotateY(-90deg);
        }
    }
    
    @keyframes pageFlipIn {
        0% {
            opacity: 1;
            transform: perspective(800px) rotateY(90deg);
        }
        50% {
            opacity: 1;
            transform: perspective(800px) rotateY(0deg);
        }
        100% {
            opacity: 0;
            transform: perspective(800px) rotateY(0deg);
        }
    }
}

/* Préchargement pour éviter les saccades */
.page-link {
    position: relative;
}

.page-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-link:hover::before {
    opacity: 0.1;
    background: linear-gradient(135deg, #0EA5E9 0%, #8B5CF6 100%);
}