/* Animations de défilement */
.scroll-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation de défilement vers la gauche */
.scroll-animation-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animation de défilement vers la droite */
.scroll-animation-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animation de zoom */
.scroll-animation-zoom {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation-zoom.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Animation de rotation */
.scroll-animation-rotate {
    opacity: 0;
    transform: rotate(-10deg) scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation-rotate.is-visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Animation de rebond */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.scroll-animation-bounce {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation-bounce.is-visible {
    opacity: 1;
    animation: bounce 1s ease-in-out;
}

/* Animation de fondu */
.scroll-animation-fade {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    will-change: opacity;
}

.scroll-animation-fade.is-visible {
    opacity: 1;
}

/* Animation de glissement */
.scroll-animation-slide {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.scroll-animation-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation de vagues */
@keyframes wave {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.scroll-animation-wave {
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.scroll-animation-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
}

.scroll-animation-wave.is-visible::after {
    animation: wave 1.5s ease-in-out;
}

/* Styles pour le menu header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    background-color: var(--kubio-color-5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-header.hide {
    transform: translateY(-100%);
}

.site-header.show {
    transform: translateY(0);
}

/* Ajustement du contenu principal pour le header fixe */
body {
    padding-top: 80px; /* Ajustez cette valeur selon la hauteur de votre header */
}