/**
 * Marquee Banner Component
 *
 * Migrated from: timelapse-banner-infinito-marquee-scroller code snippet.
 * Infinite scrolling text with neon green background.
 *
 * @package Timelapse
 * @since 1.0.0
 */

/* ── Wrapper ── */
.tl-marquee {
    position: relative;
    width: 100%;
    background: var(--tl-neon);
    padding: 10px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 10;

    /* Fade masks on edges */
    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}

/* ── Track ── */
.tl-marquee__track {
    display: flex;
    white-space: nowrap;
    gap: 0;
    animation: tl-marquee-scroll 80s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

/* Pause on hover */
.tl-marquee:hover .tl-marquee__track {
    animation-play-state: paused;
}

/* ── Group (doubled for seamless loop) ── */
.tl-marquee__group {
    display: flex;
    flex-shrink: 0;
}

/* ── Text Items ── */
.tl-marquee__item {
    font-family: var(--tl-font-primary);
    color: var(--tl-black);
    font-size: 0.85rem;
    font-weight: var(--tl-weight-regular);
    text-transform: uppercase;
    line-height: 1;
    padding-right: var(--tl-space-md);
    padding-left: var(--tl-space-md);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
}

/* ── Separator Dot ── */
.tl-marquee__sep {
    color: var(--tl-black);
    font-weight: var(--tl-weight-black);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Keyframes ── */
@keyframes tl-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .tl-marquee__track {
        animation-duration: 50s;
    }

    .tl-marquee__item {
        font-size: 0.75rem;
        padding-right: var(--tl-space-sm);
        padding-left: var(--tl-space-sm);
    }
}