/**
 * CSS for Ababil Animation Text Widget
 *
 * @package AbabilElementorWidget
 */

.ababil-animation-text-wrapper {
    display: block;
    position: relative;
}

.ababil-animation-text-wrapper.show-cursor .ababil-animated-text::after {
    content: var(--cursor-character, '|');
    display: inline-block;
    animation: ababil-blink-cursor 0.8s steps(1) infinite;
    margin-left: 5px;
}

.ababil-animation-text-wrapper.hide-cursor .ababil-animated-text::after {
    content: '';
    display: none;
}

@keyframes ababil-blink-cursor {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}

/* Animation Styles */
.ababil-before-text,
.ababil-animated-text,
.ababil-after-text {
    display: inline-block;
}

/* Fade Animation */
.ababil-fade-in {
    opacity: 0;
    animation: ababil-fade-in 0.5s ease-in forwards;
}

@keyframes ababil-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ababil-fade-out {
    opacity: 1;
    animation: ababil-fade-out 0.5s ease-out forwards;
}

@keyframes ababil-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Slide Animations */
.ababil-slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: ababil-slide-in-left 0.5s ease-out forwards;
}

@keyframes ababil-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ababil-slide-out-left {
    opacity: 1;
    transform: translateX(0);
    animation: ababil-slide-out-left 0.5s ease-in forwards;
}

@keyframes ababil-slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

.ababil-slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    animation: ababil-slide-in-right 0.5s ease-out forwards;
}

@keyframes ababil-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ababil-slide-out-right {
    opacity: 1;
    transform: translateX(0);
    animation: ababil-slide-out-right 0.5s ease-in forwards;
}

@keyframes ababil-slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

.ababil-slide-in-up {
    opacity: 0;
    transform: translateY(50px);
    animation: ababil-slide-in-up 0.5s ease-out forwards;
}

@keyframes ababil-slide-in-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ababil-slide-out-up {
    opacity: 1;
    transform: translateY(0);
    animation: ababil-slide-out-up 0.5s ease-in forwards;
}

@keyframes ababil-slide-out-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

.ababil-slide-in-down {
    opacity: 0;
    transform: translateY(-50px);
    animation: ababil-slide-in-down 0.5s ease-out forwards;
}

@keyframes ababil-slide-in-down {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ababil-slide-out-down {
    opacity: 1;
    transform: translateY(0);
    animation: ababil-slide-out-down 0.5s ease-in forwards;
}

@keyframes ababil-slide-out-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}