/* ══════════════════════════════════════════════════════════════
   MARQUEE - Infinite Seamless Scroll
   ══════════════════════════════════════════════════════════════ */

.marquee {
    position: absolute;
    bottom: 0;
    left: -5%;
    right: -5%;
    width: 110%;
    z-index: 10;
    pointer-events: none;
}

.marquee__stack {
    display: flex;
    flex-direction: column;
    transform: rotate(-2deg);
    transform-origin: center center;
    margin-bottom: -25px;
}

/* ═══════════════════════════════════════════════════════════
   BAND
   ═══════════════════════════════════════════════════════════ */
.marquee__band {
    position: relative;
    display: flex;
    padding: 14px 0;
    pointer-events: auto;
}

.marquee__track {
    display: flex;
    flex-shrink: 0;
    animation: marquee-scroll 60s linear infinite;
}

.marquee__track--reverse {
    animation-direction: reverse;
    animation-duration: 50s;
}

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

/* ═══════════════════════════════════════════════════════════
   GLASS BAND
   ═══════════════════════════════════════════════════════════ */
.marquee__band--glass {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.marquee__band--glass .marquee__item {
    color: rgba(255, 255, 255, 0.5);
}

.marquee__band--glass .marquee__sep {
    color: var(--accent);
    opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════
   SOLID BAND
   ═══════════════════════════════════════════════════════════ */
.marquee__band--solid {
    background: var(--accent);
}

.marquee__band--solid .marquee__item {
    color: #000;
}

.marquee__band--solid .marquee__sep {
    color: rgba(0, 0, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   ITEMS
   ═══════════════════════════════════════════════════════════ */
.marquee__item {
    flex-shrink: 0;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0 24px;
    white-space: nowrap;
}

.marquee__sep {
    flex-shrink: 0;
    font-size: 6px;
    padding: 0 8px;
}

/* ═══════════════════════════════════════════════════════════
   HOVER
   ═══════════════════════════════════════════════════════════ */
.marquee__band:hover .marquee__track {
    animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .marquee {
        left: -10%;
        right: -10%;
        width: 120%;
    }

    .marquee__stack {
        transform: rotate(-2deg);
        margin-bottom: -20px;
    }

    .marquee__band {
        padding: 12px 0;
    }

    .marquee__item {
        font-size: 11px;
        padding: 0 18px;
        letter-spacing: 0.1em;
    }

    .marquee__sep {
        font-size: 5px;
        padding: 0 6px;
    }
}

@media (max-width: 480px) {
    .marquee {
        left: -15%;
        right: -15%;
        width: 130%;
    }

    .marquee__stack {
        margin-bottom: -18px;
    }

    .marquee__band {
        padding: 10px 0;
    }

    .marquee__item {
        font-size: 10px;
        padding: 0 14px;
    }

    .marquee__sep {
        font-size: 4px;
        padding: 0 5px;
    }
}