/* Variables d'animation */
:root {
    --anim-duration: 0.8s;
    --anim-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-delay-base: 100ms;
    --hover-scale: 1.03;
    --hover-duration: 0.3s;
}

/* Classes d'animation de base */
[class*="animate-"] {
    opacity: 1;
    transform: none;
    transition: opacity var(--anim-duration) var(--anim-timing),
                transform var(--anim-duration) var(--anim-timing),
                box-shadow 0.3s ease;
    will-change: opacity, transform;
}

[class*="animate-"]:not(.visible) {
    opacity: 0;
    pointer-events: none;
}

/* Fade In */
.animate-fade:not(.visible) {
    opacity: 0;
}

.animate-fade.visible {
    opacity: 1;
}

/* Slide animations */
.animate-slide-up:not(.visible) {
    transform: translateY(20px);
}

.animate-slide-down:not(.visible) {
    transform: translateY(-20px);
}

.animate-slide-left:not(.visible) {
    transform: translateX(-30px);
}

.animate-slide-right:not(.visible) {
    transform: translateX(30px);
}

.animate-slide-up.visible,
.animate-slide-down.visible,
.animate-slide-left.visible,
.animate-slide-right.visible {
    transform: none;
}

/* Scale animations */
.animate-scale-up:not(.visible) {
    transform: scale(0.98);
}

.animate-scale-down:not(.visible) {
    transform: scale(1.02);
}

.animate-scale-up.visible,
.animate-scale-down.visible {
    transform: none;
}

/* Rotate animations */
.animate-rotate-left:not(.visible) {
    transform: rotate(-10deg);
}

.animate-rotate-right:not(.visible) {
    transform: rotate(10deg);
}

.animate-rotate-left.visible,
.animate-rotate-right.visible {
    transform: none;
}

/* Combined animations */
.animate-slide-up-fade:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
}

.animate-slide-down-fade:not(.visible) {
    opacity: 0;
    transform: translateY(-20px);
}

.animate-slide-left-fade:not(.visible) {
    opacity: 0;
    transform: translateX(-30px);
}

.animate-slide-right-fade:not(.visible) {
    opacity: 0;
    transform: translateX(30px);
}

.animate-scale-fade:not(.visible) {
    opacity: 0;
    transform: scale(0.98);
}

.animate-slide-up-fade.visible,
.animate-slide-down-fade.visible,
.animate-slide-left-fade.visible,
.animate-slide-right-fade.visible,
.animate-scale-fade.visible {
    opacity: 1;
    transform: none;
}

/* Délais d'animation */
.delay-100 { transition-delay: calc(var(--anim-delay-base) * 0.67) !important; }
.delay-200 { transition-delay: calc(var(--anim-delay-base) * 1.33) !important; }
.delay-300 { transition-delay: calc(var(--anim-delay-base) * 2) !important; }
.delay-400 { transition-delay: calc(var(--anim-delay-base) * 2.67) !important; }
.delay-500 { transition-delay: calc(var(--anim-delay-base) * 3.33) !important; }

/* Animation par groupe */
.animate-group > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--anim-timing),
                transform 0.6s var(--anim-timing);
}

.animate-group.visible > * {
    opacity: 1;
    transform: none;
}

.animate-group.visible > *:nth-child(1) { transition-delay: 0s; }
.animate-group.visible > *:nth-child(2) { transition-delay: 0.1s; }
.animate-group.visible > *:nth-child(3) { transition-delay: 0.2s; }
.animate-group.visible > *:nth-child(4) { transition-delay: 0.3s; }
.animate-group.visible > *:nth-child(5) { transition-delay: 0.4s; }
.animate-group.visible > *:nth-child(6) { transition-delay: 0.5s; }

/* Hover animations */
.hover-zoom {
    transition: transform var(--hover-duration) var(--anim-timing),
                box-shadow var(--hover-duration) ease;
}

.hover-zoom:hover {
    transform: scale(var(--hover-scale));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-pulse {
    transition: all var(--hover-duration) ease;
    position: relative;
    overflow: hidden;
}

.btn-pulse:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-pulse:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    animation: pulse 0.3s ease-out;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Désactivation des animations sur mobile */
@media (max-width: 768px) {
    [class*="animate-"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
    }

    [class*="animate-"]:not(.visible) {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .animate-group > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .delay-100,
    .delay-200,
    .delay-300,
    .delay-400,
    .delay-500 {
        transition-delay: 0s !important;
    }
}