/* Styles d'animation pour Lyxou Développement */

/* Styles de base pour les éléments animés */
.animate__animated {
    transition: opacity 0.5s ease-out;
}

/* Classe pour masquer les éléments avant animation */
.invisible {
    opacity: 0;
}

/* Durées d'animation personnalisées */
.animate-duration-300 {
    --animate-duration: 300ms;
}

.animate-duration-500 {
    --animate-duration: 500ms;
}

.animate-duration-700 {
    --animate-duration: 700ms;
}

.animate-duration-1000 {
    --animate-duration: 1000ms;
}

/* Délais d'animation personnalisés */
.animate-delay-100 {
    --animate-delay: 100ms;
}

.animate-delay-200 {
    --animate-delay: 200ms;
}

.animate-delay-300 {
    --animate-delay: 300ms;
}

.animate-delay-500 {
    --animate-delay: 500ms;
}

/* Animations séquentielles pour les listes d'éléments */
.animate-sequence > *:nth-child(1) { animation-delay: 0.1s; }
.animate-sequence > *:nth-child(2) { animation-delay: 0.2s; }
.animate-sequence > *:nth-child(3) { animation-delay: 0.3s; }
.animate-sequence > *:nth-child(4) { animation-delay: 0.4s; }
.animate-sequence > *:nth-child(5) { animation-delay: 0.5s; }
.animate-sequence > *:nth-child(6) { animation-delay: 0.6s; }

/* Effet de fondu personnalisé */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}