/* animations.css - Animations et transitions */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(80px, -40px) scale(1.05);
    }
    66% {
        transform: translate(-40px, 80px) scale(0.95);
    }
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        transform: translateY(-100px) translateX(80px);
        opacity: 0;
    }
}

/* Classes d'animation */
.bubble:nth-child(1) { animation: fadeInUp 0.8s ease 0.1s backwards; }
.bubble:nth-child(2) { animation: fadeInUp 0.8s ease 0.2s backwards; }
.bubble:nth-child(3) { animation: fadeInUp 0.8s ease 0.3s backwards; }
.bubble:nth-child(4) { animation: fadeInUp 0.8s ease 0.4s backwards; }
.bubble:nth-child(5) { animation: fadeInUp 0.8s ease 0.5s backwards; }
.bubble:nth-child(6) { animation: fadeInUp 0.8s ease 0.6s backwards; }

.header {
    animation: fadeInDown 1s ease;
}

.footer {
    animation: fadeInUp 1s ease 0.6s backwards;
}