/*
 * KAFECOM Gutenberg Animations
 * Classes :
 * fade-up, fade-down, fade-left, fade-right, zoom-in, zoom-out
 * delay-100 à delay-800
 * duration-400, duration-600, duration-800, duration-1000, duration-1200
 */

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.fade-up {
    transform: translateY(40px);
}

.fade-down {
    transform: translateY(-40px);
}

.fade-left {
    transform: translateX(-50px);
}

.fade-right {
    transform: translateX(50px);
}

.zoom-in {
    transform: scale(0.9);
}

.zoom-out {
    transform: scale(1.08);
}

.fade-up.is-visible,
.fade-down.is-visible,
.fade-left.is-visible,
.fade-right.is-visible,
.zoom-in.is-visible,
.zoom-out.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Durées */
.duration-400 { transition-duration: 0.4s; }
.duration-600 { transition-duration: 0.6s; }
.duration-800 { transition-duration: 0.8s; }
.duration-1000 { transition-duration: 1s; }
.duration-1200 { transition-duration: 1.2s; }

/* Délais */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right,
    .zoom-in,
    .zoom-out {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}