/**
 * TickerTrack CSS - Flexible & Reusable Version
 * Version: 17.0
 * Description: This code is now tied to the custom class '.talb-ticker-scroll'
 *              to allow creating multiple, reusable tickers anywhere.
 */

/*========================================
    1) WRAPPER (الحاوية التي تحمل الكلاس المخصص)
========================================*/
/* هذا يستهدف الحاوية الخارجية التي أعطيتها الكلاس */
.gb-element-talb-ticker-wrap {
    overflow: hidden !important;
    position: relative;
}

/*========================================
    2) TRACK (المسار المتحرك)
========================================*/
/* هذا يستهدف العنصر الداخلي الذي يحمل نفس الكلاس */
.talb-ticker-scroll {
    width: max-content !important;
    animation: scroll-left 12s linear infinite;
    transition: animation-play-state 0.5s ease;
}

/*========================================
    3) ANIMATION (التحريكة الأساسية)
========================================*/
@keyframes scroll-left {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/*========================================
    4) AESTHETIC EFFECTS (التأثيرات الجمالية)
========================================*/
/* تأثير التلاشي الجانبي */
.gb-element-talb-ticker-wrap::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, var(--contrast) 5%, transparent 15%, transparent 85%, var(--contrast) 95%);
    pointer-events: none;
    z-index: 2;
}

/* تأثير الوميض الأزرق */
.gb-element-talb-ticker-wrap::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0, 171, 251, 0.55) 0%, transparent 55%);
    animation: talbMovingPulse 7s ease-in-out infinite;
    z-index: 1;
}

@keyframes talbMovingPulse {
    0% { transform: translateX(-100%) scale(0.9); opacity: 0; }
    25% { transform: translateX(0%) scale(1.2); opacity: 0.9; }
    75% { transform: translateX(100%) scale(0.9); opacity: 0.9; }
    100% { transform: translateX(100%) scale(0.9); opacity: 0; }
}

/*========================================
    5) INTERACTIVITY (التفاعلية)
========================================*/
@media (hover: hover) and (pointer: fine) {
    .gb-element-talb-ticker-wrap:hover .talb-ticker-scroll {
        animation-play-state: paused;
    }
}

/*========================================
    6) RESPONSIVE (تجاوب الجوال)
========================================*/
@media (max-width: 767px) {
    .talb-ticker-scroll {
        animation-duration: 9s;
    }
}