/* ==========================================================
   ebmnt1-animations.css
   أنيميشن الدخول (نفس حركات الديمو: fadeIn من الجنب / من تحت / من فوق)
   الاتجاه "start" و "end" معمولين للـ RTL:
   start = بيدخل من اليمين  |  end = بيدخل من اليسار
   ========================================================== */

:root {
    --ebmnt1-animations-duration-regular: 1.25s;
    --ebmnt1-animations-duration-fast: 0.75s;
    --ebmnt1-animations-timing: ease;
}

@keyframes ebmnt1-fade-in-start {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ebmnt1-fade-in-end {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ebmnt1-fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ebmnt1-fade-in-down {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* الحالة الأولية (بتتفعل بس لو الـ JS شغال) */
.ebmnt1-js [data-ebmnt1-animate] {
    opacity: 0;
}

.ebmnt1-js [data-ebmnt1-animate].ebmnt1-is-visible {
    animation-duration: var(--ebmnt1-animations-duration-regular);
    animation-timing-function: var(--ebmnt1-animations-timing);
    animation-fill-mode: both;
}

.ebmnt1-js [data-ebmnt1-animate="fast"].ebmnt1-is-visible,
.ebmnt1-js [data-ebmnt1-animate-speed="fast"].ebmnt1-is-visible {
    animation-duration: var(--ebmnt1-animations-duration-fast);
}

.ebmnt1-js [data-ebmnt1-animate="start"].ebmnt1-is-visible {
    animation-name: ebmnt1-fade-in-start;
}

.ebmnt1-js [data-ebmnt1-animate="end"].ebmnt1-is-visible {
    animation-name: ebmnt1-fade-in-end;
}

.ebmnt1-js [data-ebmnt1-animate="up"].ebmnt1-is-visible {
    animation-name: ebmnt1-fade-in-up;
}

.ebmnt1-js [data-ebmnt1-animate="down"].ebmnt1-is-visible {
    animation-name: ebmnt1-fade-in-down;
}

@media (prefers-reduced-motion: reduce) {
    .ebmnt1-js [data-ebmnt1-animate] {
        opacity: 1;
    }

    .ebmnt1-js [data-ebmnt1-animate].ebmnt1-is-visible {
        animation: none;
    }
}