/* ============================================
   YASIR ANIMATIONS v2 — Elementor Safe
   Body prefix for specificity over Elementor
   ============================================ */

body .fade-in,
body .fade-up,
body .fade-down,
body .fade-left,
body .fade-right {
    opacity: 0 !important;
    will-change: opacity, transform;
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
    backface-visibility: hidden;
}

/* Starting positions */
body .fade-up    { transform: translateY(50px) !important; }
body .fade-down  { transform: translateY(-50px) !important; }
body .fade-left  { transform: translateX(50px) !important; }
body .fade-right { transform: translateX(-50px) !important; }
body .fade-in    { transform: translateY(0) !important; }

/* ============================================
   VISIBLE STATE — JS adds this class
   ============================================ */
body .fade-in.is-visible,
body .fade-up.is-visible,
body .fade-down.is-visible,
body .fade-left.is-visible,
body .fade-right.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* ============================================
   DELAY UTILITIES
   e.g. class="fade-up delay-200"
   ============================================ */
body .delay-100  { transition-delay: 0.1s !important; }
body .delay-200  { transition-delay: 0.2s !important; }
body .delay-300  { transition-delay: 0.3s !important; }
body .delay-400  { transition-delay: 0.4s !important; }
body .delay-500  { transition-delay: 0.5s !important; }
body .delay-600  { transition-delay: 0.6s !important; }
body .delay-700  { transition-delay: 0.7s !important; }
body .delay-800  { transition-delay: 0.8s !important; }

/* ============================================
   SPEED UTILITIES
   ============================================ */
body .duration-fast   { transition-duration: 0.4s !important; }
body .duration-normal { transition-duration: 0.75s !important; }
body .duration-slow   { transition-duration: 1.1s !important; }