/* --- MARQUEE ANIMATION LOGIC --- */
.locker-ticker-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.locker-ticker-wrapper {
    display: inline-block;
    animation: marquee linear infinite;
    /* Consumes the CSS variable injected by PHP */
    animation-duration: var(--ticker-duration, 15s); 
}

/* Seamless specific keyframes */
.locker-ticker-wrapper.seamless {
    animation-name: marquee-seamless;
}

.locker-ticker-item {
    display: inline-block;
    padding: 0 20px;
    text-decoration: none;
    transition: 0.3s;
}

.locker-ticker-container:hover .locker-ticker-wrapper {
    animation-play-state: paused;
}

/* Original scroll */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Seamless scroll (Two sets of data) */
@keyframes marquee-seamless {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}