/**
 * ============================================================================
 * SCROLL ANIMATIONS STYLES
 * Description : Styles CSS pour les animations au scroll
 * ============================================================================
 */

/* État initial : éléments masqués avant animation */
[data-animate]:not(.scroll-animate) {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Forcer la visibilité pour tous les éléments animés */
[data-animate].scroll-animate,
[data-animate][class*="anim-"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================================================== */
/* FADE ANIMATIONS */
/* ========================================================================== */

/* Fade In - Version fluide */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.anim-fade-in {
    animation: fadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Up - Version ultra fluide et naturelle */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fade-in-up {
    animation: fadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;
}

/* Fade In Down - Version fluide */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fade-in-down {
    animation: fadeInDown 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Left - Version fluide */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-fade-in-left {
    animation: fadeInLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Right - Version fluide */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-fade-in-right {
    animation: fadeInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ========================================================================== */
/* SCALE ANIMATIONS */
/* ========================================================================== */

/* Scale In - Version fluide */
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.anim-scale-in {
    animation: scaleIn 1s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

/* Scale In Up - Version fluide */
@keyframes scaleInUp {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(30px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.anim-scale-in-up {
    animation: scaleInUp 1s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

/* ========================================================================== */
/* SLIDE ANIMATIONS */
/* ========================================================================== */

/* Slide In Up - Version fluide */
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-slide-in-up {
    animation: slideInUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide In Down */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-slide-in-down {
    animation: slideInDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide In Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slide-in-left {
    animation: slideInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-slide-in-right {
    animation: slideInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================================================== */
/* ROTATE ANIMATIONS */
/* ========================================================================== */

/* Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.anim-rotate-in {
    animation: rotateIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ========================================================================== */
/* BOUNCE ANIMATIONS */
/* ========================================================================== */

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.anim-bounce-in {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ========================================================================== */
/* UTILITY CLASSES */
/* ========================================================================== */

/* Animation delays */
.anim-delay-1 {
    animation-delay: 0.1s !important;
}

.anim-delay-2 {
    animation-delay: 0.2s !important;
}

.anim-delay-3 {
    animation-delay: 0.3s !important;
}

.anim-delay-4 {
    animation-delay: 0.4s !important;
}

.anim-delay-5 {
    animation-delay: 0.5s !important;
}

/* Animation speeds */
.anim-fast {
    animation-duration: 0.3s !important;
}

.anim-slow {
    animation-duration: 1s !important;
}

.anim-slower {
    animation-duration: 1.5s !important;
}

/* ========================================================================== */
/* ACCESSIBILITY */
/* ========================================================================== */

/* Désactiver les animations si l'utilisateur préfère un mouvement réduit */
@media (prefers-reduced-motion: reduce) {

    .scroll-animate,
    [data-animate] {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}