/**
 * ----------------------------------------
 * animation slide-out-blurred-top
 * ----------------------------------------
 */
.slide-out-blurred-top {
    -webkit-animation: slide-out-blurred-top 0.3s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
    animation: slide-out-blurred-top 0.3s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
@-webkit-keyframes slide-out-blurred-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
        height: 40px;
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 0;
        height: 0;
    }
}
@keyframes slide-out-blurred-top {
    0% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
        height: 40px;
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 0;
        height: 0;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-blurred-top
 * ----------------------------------------
 */
.slide-in-blurred-top {
    -webkit-animation: slide-in-blurred-top 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation: slide-in-blurred-top 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
@-webkit-keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 0;
        height: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        opacity: 1;
        height: 40px;
    }
}
@keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 0;
        height: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        opacity: 1;
        height: 40px;
    }
}

/**
 * ----------------------------------------
 * animation hand-wave (coucou naturel)
 * ----------------------------------------
 */
.btn-orange:hover .hand-wave,
.btn:hover .hand-wave {
    -webkit-animation: hand-wave 0.9s ease-in-out;
    animation: hand-wave 0.9s ease-in-out;
}

@-webkit-keyframes hand-wave {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10% {
        -webkit-transform: rotate(14deg);
        transform: rotate(14deg);
    }
    20% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    30% {
        -webkit-transform: rotate(14deg);
        transform: rotate(14deg);
    }
    40% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes hand-wave {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10% {
        -webkit-transform: rotate(14deg);
        transform: rotate(14deg);
    }
    20% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    30% {
        -webkit-transform: rotate(14deg);
        transform: rotate(14deg);
    }
    40% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/**
 * ----------------------------------------
 * Hero Images Gallery - Fan Layout & Scroll Animation
 * ----------------------------------------
 */
.hero-images-gallery {
    perspective: 1000px;
}

.hero-images-container {
    transform-style: preserve-3d;
}

.hero-image-card {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Initial fan rotation based on position */
.hero-image-card[data-hero-position="-2"] {
    transform: rotate(-8deg);
}

.hero-image-card[data-hero-position="-1"] {
    transform: rotate(-4deg);
}

.hero-image-card[data-hero-position="0"] {
    transform: rotate(0deg);
}

.hero-image-card[data-hero-position="1"] {
    transform: rotate(4deg);
}

.hero-image-card[data-hero-position="2"] {
    transform: rotate(8deg);
}

/* Mobile: only 3 images visible, adjust positions */
@media (max-width: 1024px) {
    .hero-image-card[data-hero-index="1"] {
        transform: rotate(-4deg);
    }
    .hero-image-card[data-hero-index="2"] {
        transform: rotate(0deg) translateY(-8px);
    }
    .hero-image-card[data-hero-index="3"] {
        transform: rotate(4deg);
    }
}

/* ======== ANIMATED TEXT GRADIENT ======== */
/* Animation de texte optimisée pour SEO, accessibilité et performances */
.animated-text-gradient {
    --gradient-progress: 0%;
    --gradient-angle: 90deg; /* Angle par défaut (horizontal gauche-droite) */
    background: linear-gradient(
            var(--gradient-angle),
            currentColor 0%,
            currentColor var(--gradient-progress),
            #D1D1D1 var(--gradient-progress),
            #D1D1D1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Force GPU acceleration pour de meilleures performances sur mobile */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
}

/* Réinitialiser les propriétés du gradient pour les boutons enfants */
.animated-text-gradient a,
.animated-text-gradient a *,
.animated-text-gradient button,
.animated-text-gradient button * {
    -webkit-text-fill-color: inherit;
    text-fill-color: inherit;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background: none;
}

/* Version avec bords arrondis (effet de vague) */
.animated-text-gradient-rounded {
    --gradient-progress: 0%;
    background: radial-gradient(
            ellipse 100% 100% at var(--gradient-progress) 50%,
            currentColor 0%,
            currentColor 30%,
            #8A8A8A 50%,
            #ADADAD 70%,
            #D1D1D1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
}

/* Version avec effet de vague plus prononcé */
.animated-text-gradient-wave {
    --gradient-progress: 0%;
    background: radial-gradient(
            circle at var(--gradient-progress) 50%,
            currentColor 0%,
            currentColor 20%,
            #7A7A7A 40%,
            #ADADAD 60%,
            #D1D1D1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
}

/* Version avec transition douce et bordure floue */
.animated-text-gradient-soft {
    --gradient-progress: 0%;
    background: linear-gradient(
            90deg,
            currentColor 0%,
            currentColor calc(var(--gradient-progress) - 10%),
            #8A8A8A calc(var(--gradient-progress) - 5%),
            #ADADAD var(--gradient-progress),
            #D1D1D1 calc(var(--gradient-progress) + 5%),
            #D1D1D1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Force GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
}