/**
 * Animations avancées pour le menu mobile
 * Ce fichier ajoute des animations plus sophistiquées au menu mobile
 */

/* Nouvelles animations pour le menu mobile */
@media (max-width: 767px) {
    /* Animation d'entrée plus élaborée pour chaque élément du menu */
    .mobile-menu a {
        opacity: 0;
        transform: translateX(-30px);
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet de rebond */
    }
    
    /* Animation séquentielle pour chaque élément - ils apparaissent un par un */
    .mobile-menu.animate-fade-in a:nth-child(1) {
        animation: slideInRight 0.5s 0.1s forwards;
    }
    
    .mobile-menu.animate-fade-in a:nth-child(2) {
        animation: slideInRight 0.5s 0.2s forwards;
    }
    
    .mobile-menu.animate-fade-in a:nth-child(3) {
        animation: slideInRight 0.5s 0.3s forwards;
    }
    
    .mobile-menu.animate-fade-in a:nth-child(4) {
        animation: slideInRight 0.5s 0.4s forwards;
    }
    
    .mobile-menu.animate-fade-in a:nth-child(5) {
        animation: slideInRight 0.5s 0.5s forwards;
    }
    
    /* Animation de sortie séquentielle */
    .mobile-menu.animate-fade-out a:nth-child(1) {
        animation: slideOutLeft 0.4s 0s forwards;
    }
    
    .mobile-menu.animate-fade-out a:nth-child(2) {
        animation: slideOutLeft 0.4s 0.05s forwards;
    }
    
    .mobile-menu.animate-fade-out a:nth-child(3) {
        animation: slideOutLeft 0.4s 0.1s forwards;
    }
    
    .mobile-menu.animate-fade-out a:nth-child(4) {
        animation: slideOutLeft 0.4s 0.15s forwards;
    }
    
    .mobile-menu.animate-fade-out a:nth-child(5) {
        animation: slideOutLeft 0.4s 0.2s forwards;
    }
    
    /* Animation pour l'icône à l'intérieur des liens du menu */
    .mobile-menu a i {
        transition: all 0.3s ease;
        transform: scale(1);
    }
    
    .mobile-menu a:hover i {
        transform: scale(1.2) rotate(5deg);
        color: white;
    }
    
    /* Animations pour le hover des liens */
    .mobile-menu a {
        position: relative;
        overflow: hidden;
    }
    
    /* Effet de vague au survol */
    .mobile-menu a::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: center;
    }
    
    .mobile-menu a:hover::after {
        animation: ripple 0.6s ease-out;
    }
    
    /* Animation du bouton hamburger */
    .mobile-menu-button {
        position: relative;
        overflow: hidden;
    }
    
    .mobile-menu-button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.6);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1) translate(-50%, -50%);
        transform-origin: center;
    }
    
    .mobile-menu-button:active::after {
        animation: ripple 0.6s ease-out;
    }
    
    /* Animation pour les barres du hamburger */
    .hamburger-icon span {
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }
    
    /* Renforcement de l'animation active pour le hamburger */
    .hamburger-icon.active span:nth-child(1) {
        transform: rotate(45deg) translateY(8px);
    }
    
    .hamburger-icon.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .hamburger-icon.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-8px);
    }
    
    /* Keyframes pour les nouvelles animations */
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideOutLeft {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 0;
            transform: translateX(-30px);
        }
    }
    
    @keyframes ripple {
        0% {
            opacity: 1;
            transform: scale(0) translate(-50%, -50%);
        }
        80% {
            opacity: 0.5;
        }
        100% {
            opacity: 0;
            transform: scale(30) translate(-50%, -50%);
        }
    }
    
    /* Animation pour le menu complet (fond) */
    .mobile-menu.animate-fade-in {
        animation: menuFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
    }
    
    .mobile-menu.animate-fade-out {
        animation: menuFadeOut 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards !important;
    }
    
    @keyframes menuFadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.98);
            backdrop-filter: blur(0px);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            backdrop-filter: blur(10px);
        }
    }
    
    @keyframes menuFadeOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
            backdrop-filter: blur(10px);
        }
        to {
            opacity: 0;
            transform: translateY(-20px) scale(0.98);
            backdrop-filter: blur(0px);
        }
    }
    
    /* Effet de flottement pour l'élément actif du menu */
    .mobile-menu a.active {
        animation: float 4s ease-in-out infinite;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
        100% {
            transform: translateY(0);
        }
    }
}