/* Ababil Global Animations CSS - Standardized Version */

/* Fade Animations */
@keyframes ababil-fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}
@keyframes ababil-fade-in-up { 
    0% { opacity: 0; transform: translateY(20px); } 
    100% { opacity: 1; transform: translateY(0); } 
}
@keyframes ababil-fade-in-down { 
    0% { opacity: 0; transform: translateY(-20px); } 
    100% { opacity: 1; transform: translateY(0); } 
}
@keyframes ababil-fade-in-left { 
    0% { opacity: 0; transform: translateX(-20px); } 
    100% { opacity: 1; transform: translateX(0); } 
}
@keyframes ababil-fade-in-right { 
    0% { opacity: 0; transform: translateX(20px); } 
    100% { opacity: 1; transform: translateX(0); } 
}

/* Bounce Animations */
@keyframes ababil-bounce-in { 
    0% { opacity: 0; transform: scale(0.3); } 
    50% { opacity: 1; transform: scale(1.05); } 
    70% { transform: scale(0.9); } 
    100% { transform: scale(1); } 
}
@keyframes ababil-bounce-in-down { 
    0% { opacity: 0; transform: translateY(-100px); } 
    60% { opacity: 1; transform: translateY(30px); } 
    80% { transform: translateY(-10px); } 
    100% { transform: translateY(0); } 
}
@keyframes ababil-bounce-in-left { 
    0% { opacity: 0; transform: translateX(-100px); } 
    60% { opacity: 1; transform: translateX(30px); } 
    80% { transform: translateX(-10px); } 
    100% { transform: translateX(0); } 
}
@keyframes ababil-bounce-in-right { 
    0% { opacity: 0; transform: translateX(100px); } 
    60% { opacity: 1; transform: translateX(-30px); } 
    80% { transform: translateX(10px); } 
    100% { transform: translateX(0); } 
}
@keyframes ababil-bounce-in-up { 
    0% { opacity: 0; transform: translateY(100px); } 
    60% { opacity: 1; transform: translateY(-30px); } 
    80% { transform: translateY(10px); } 
    100% { transform: translateY(0); } 
}

/* Slide Animations */
@keyframes ababil-slide-in-down { 
    0% { transform: translateY(-100%); } 
    100% { transform: translateY(0); } 
}
@keyframes ababil-slide-in-left { 
    0% { transform: translateX(-100%); } 
    100% { transform: translateX(0); } 
}
@keyframes ababil-slide-in-right { 
    0% { transform: translateX(100%); } 
    100% { transform: translateX(0); } 
}
@keyframes ababil-slide-in-up { 
    0% { transform: translateY(100%); } 
    100% { transform: translateY(0); } 
}

/* Zoom Animations */
@keyframes ababil-zoom-in { 
    0% { opacity: 0; transform: scale(0.3); } 
    100% { opacity: 1; transform: scale(1); } 
}
@keyframes ababil-zoom-in-down { 
    0% { opacity: 0; transform: scale(0.3) translateY(-100px); } 
    100% { opacity: 1; transform: scale(1) translateY(0); } 
}
@keyframes ababil-zoom-in-left { 
    0% { opacity: 0; transform: scale(0.3) translateX(-100px); } 
    100% { opacity: 1; transform: scale(1) translateX(0); } 
}
@keyframes ababil-zoom-in-right { 
    0% { opacity: 0; transform: scale(0.3) translateX(100px); } 
    100% { opacity: 1; transform: scale(1) translateX(0); } 
}
@keyframes ababil-zoom-in-up { 
    0% { opacity: 0; transform: scale(0.3) translateY(100px); } 
    100% { opacity: 1; transform: scale(1) translateY(0); } 
}

/* Rotate Animations */
@keyframes ababil-rotate-in { 
    0% { transform: rotate(-200deg); opacity: 0; } 
    100% { transform: rotate(0); opacity: 1; } 
}
@keyframes ababil-rotate-in-down-left { 
    0% { transform: rotate(-90deg) translateY(-50px); opacity: 0; } 
    100% { transform: rotate(0) translateY(0); opacity: 1; } 
}
@keyframes ababil-rotate-in-down-right { 
    0% { transform: rotate(90deg) translateY(-50px); opacity: 0; } 
    100% { transform: rotate(0) translateY(0); opacity: 1; } 
}
@keyframes ababil-rotate-in-up-left { 
    0% { transform: rotate(-90deg) translateY(50px); opacity: 0; } 
    100% { transform: rotate(0) translateY(0); opacity: 1; } 
}
@keyframes ababil-rotate-in-up-right { 
    0% { transform: rotate(90deg) translateY(50px); opacity: 0; } 
    100% { transform: rotate(0) translateY(0); opacity: 1; } 
}

/* Flip Animations */
@keyframes ababil-flip-in-x { 
    0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 
    100% { transform: perspective(400px) rotateX(0); opacity: 1; } 
}
@keyframes ababil-flip-in-y { 
    0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 
    100% { transform: perspective(400px) rotateY(0); opacity: 1; } 
}

/* Light Speed Animations */
@keyframes ababil-light-speed-in-left { 
    0% { transform: translateX(-100%) skewX(30deg); opacity: 0; } 
    60% { transform: skewX(-20deg); opacity: 1; } 
    80% { transform: skewX(5deg); } 
    100% { transform: translateX(0); } 
}
@keyframes ababil-light-speed-in-right { 
    0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 
    60% { transform: skewX(20deg); opacity: 1; } 
    80% { transform: skewX(-5deg); } 
    100% { transform: translateX(0); } 
}

/* Pulse Animation */
@keyframes ababil-pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
}

/* Rubber Band Animation */
@keyframes ababil-rubber-band { 
    0% { transform: scale(1); } 
    30% { transform: scaleX(1.25) scaleY(0.75); } 
    40% { transform: scaleX(0.75) scaleY(1.25); } 
    60% { transform: scaleX(1.15) scaleY(0.85); } 
    100% { transform: scale(1); } 
}

/* Shake Animation */
@keyframes ababil-shake { 
    0%, 100% { transform: translateX(0); } 
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 
    20%, 40%, 60%, 80% { transform: translateX(10px); } 
}

/* Swing Animation */
@keyframes ababil-swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); } 
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
}

/* Tada Animation */
@keyframes ababil-tada { 
    0% { transform: scale(1); } 
    10%, 20% { transform: scale(0.9) rotate(-3deg); } 
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 
    100% { transform: scale(1) rotate(0); } 
}

/* Wobble Animation */
@keyframes ababil-wobble { 
    0% { transform: translateX(0%); } 
    15% { transform: translateX(-25%) rotate(-5deg); } 
    30% { transform: translateX(20%) rotate(3deg); } 
    45% { transform: translateX(-15%) rotate(-3deg); } 
    60% { transform: translateX(10%) rotate(2deg); } 
    75% { transform: translateX(-5%) rotate(-1deg); } 
    100% { transform: translateX(0%); } 
}

/* Jello Animation */
@keyframes ababil-jello { 
    11.1% { transform: skewX(0deg) skewY(0deg); } 
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 
    100% { transform: skewX(0deg) skewY(0deg); } 
}

/* Heart Beat Animation */
@keyframes ababil-heart-beat { 
    0% { transform: scale(1); } 
    14% { transform: scale(1.3); } 
    28% { transform: scale(1); } 
    42% { transform: scale(1.3); } 
    70% { transform: scale(1); } 
}

/* NEW: Additional Animations */

/* Roll In */
@keyframes ababil-roll-in { 
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; transform: translateX(0) rotate(0); } 
}

/* Bounce */
@keyframes ababil-bounce { 
    0%, 20%, 53%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0,0,0); } 
    40%, 43% { transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0); } 
    70% { transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); } 
    90% { transform: translate3d(0,-4px,0); } 
}

/* Flash */
@keyframes ababil-flash { 
    0%, 50%, 100% { opacity: 1; } 
    25%, 75% { opacity: 0; } 
}

/* Hinge */
@keyframes ababil-hinge { 
    0% { transform-origin: top left; animation-timing-function: ease-in-out; } 
    20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
    40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } 
    100% { transform: translate3d(0, 700px, 0); opacity: 0; } 
}

/* Jack In The Box */
@keyframes ababil-jack-in-the-box { 
    0% { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 
    50% { transform: rotate(-10deg); } 
    70% { transform: rotate(3deg); } 
    100% { opacity: 1; transform: scale(1); } 
}

/* Roll Out */
@keyframes ababil-roll-out { 
    0% { opacity: 1; } 
    100% { opacity: 0; transform: translateX(100%) rotate(120deg); } 
}

/* Base animation class */
.ababil-animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: running;
}

/* Ensure proper reset of animations */
.ababil-slide:not(.active) [data-ababil-animation] {
    animation: none !important;
    opacity: inherit !important;
    visibility: inherit !important;
}

/* Duration classes */
.ababil-animated-fast {
    animation-duration: 0.5s !important;
}

.ababil-animated-normal {
    animation-duration: 1s !important;
}

.ababil-animated-slow {
    animation-duration: 2s !important;
}

/* Individual animation classes */
.ababil-fade-in { animation-name: ababil-fadeIn; }
.ababil-fade-in-up { animation-name: ababil-fade-in-up; }
.ababil-fade-in-down { animation-name: ababil-fade-in-down; }
.ababil-fade-in-left { animation-name: ababil-fade-in-left; }
.ababil-fade-in-right { animation-name: ababil-fade-in-right; }
.ababil-bounce-in { animation-name: ababil-bounce-in; }
.ababil-bounce-in-down { animation-name: ababil-bounce-in-down; }
.ababil-bounce-in-left { animation-name: ababil-bounce-in-left; }
.ababil-bounce-in-right { animation-name: ababil-bounce-in-right; }
.ababil-bounce-in-up { animation-name: ababil-bounce-in-up; }
.ababil-slide-in-down { animation-name: ababil-slide-in-down; }
.ababil-slide-in-left { animation-name: ababil-slide-in-left; }
.ababil-slide-in-right { animation-name: ababil-slide-in-right; }
.ababil-slide-in-up { animation-name: ababil-slide-in-up; }
.ababil-zoom-in { animation-name: ababil-zoom-in; }
.ababil-zoom-in-down { animation-name: ababil-zoom-in-down; }
.ababil-zoom-in-left { animation-name: ababil-zoom-in-left; }
.ababil-zoom-in-right { animation-name: ababil-zoom-in-right; }
.ababil-zoom-in-up { animation-name: ababil-zoom-in-up; }
.ababil-rotate-in { animation-name: ababil-rotate-in; }
.ababil-rotate-in-down-left { animation-name: ababil-rotate-in-down-left; }
.ababil-rotate-in-down-right { animation-name: ababil-rotate-in-down-right; }
.ababil-rotate-in-up-left { animation-name: ababil-rotate-in-up-left; }
.ababil-rotate-in-up-right { animation-name: ababil-rotate-in-up-right; }

/* NEW: Additional animation classes */
.ababil-flip-in-x { animation-name: ababil-flip-in-x; backface-visibility: visible !important; }
.ababil-flip-in-y { animation-name: ababil-flip-in-y; backface-visibility: visible !important; }
.ababil-light-speed-in-left { animation-name: ababil-light-speed-in-left; animation-timing-function: ease-out; }
.ababil-light-speed-in-right { animation-name: ababil-light-speed-in-right; animation-timing-function: ease-out; }
.ababil-pulse { animation-name: ababil-pulse; }
.ababil-rubber-band { animation-name: ababil-rubber-band; }
.ababil-shake { animation-name: ababil-shake; }
.ababil-swing { animation-name: ababil-swing; transform-origin: top center; }
.ababil-tada { animation-name: ababil-tada; }
.ababil-wobble { animation-name: ababil-wobble; }
.ababil-jello { animation-name: ababil-jello; transform-origin: center; }
.ababil-heart-beat { animation-name: ababil-heart-beat; animation-timing-function: ease-in-out; }

/* NEW: Additional animation classes */
.ababil-roll-in { animation-name: ababil-roll-in; }
.ababil-bounce { animation-name: ababil-bounce; }
.ababil-flash { animation-name: ababil-flash; }
.ababil-hinge { animation-name: ababil-hinge; }
.ababil-jack-in-the-box { animation-name: ababil-jack-in-the-box; }
.ababil-roll-out { animation-name: ababil-roll-out; }

/* Fix for Elementor editor */
.elementor-editor-active .ababil-animated {
    animation-fill-mode: both !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure animation-specific properties in editor */
.elementor-editor-active .ababil-text-segment.ababil-flip-in-x,
.elementor-editor-active .ababil-text-segment.ababil-flip-in-y {
    backface-visibility: visible !important;
}

.elementor-editor-active .ababil-text-segment.ababil-swing {
    transform-origin: top center !important;
}

.elementor-editor-active .ababil-text-segment.ababil-jello {
    transform-origin: center !important;
}