/**
 * CSS for Ababil Post Animation Widget
 *
 * @package AbabilElementorWidget
 * @version 1.0.0
 */

.ababil-post-animation-wrapper {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.ababil-animated-post,
a.ababil-animated-post {
    display: inline-block;
    opacity: 1;
    box-sizing: border-box;
}

/* No posts message */
.ababil-no-posts {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
    box-sizing: border-box;
}

/* Animation container */
.ababil-post-animation-wrapper .ababil-animated-post,
.ababil-post-animation-wrapper a.ababil-animated-post {
    animation-fill-mode: both;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

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

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

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

/* Fade animations */
.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);
    }
}

/* Responsive behavior */
@media (max-width: 768px) {
    .ababil-post-animation-wrapper {
        padding: 10px 0;
    }
    
    .ababil-animated-post,
    a.ababil-animated-post {
        font-size: 1.2em;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .ababil-animated-post,
    a.ababil-animated-post {
        font-weight: bold;
    }
    
    .ababil-no-posts {
        border: 1px solid currentColor;
        border-radius: 4px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ababil-post-animation-wrapper .ababil-animated-post,
    .ababil-post-animation-wrapper a.ababil-animated-post,
    .ababil-post-animation-wrapper.show-cursor .ababil-animated-post::after,
    .ababil-post-animation-wrapper.show-cursor a.ababil-animated-post::after {
        animation: none !important;
        transition: none !important;
    }
}