/* Explain: Styles for the animated ticker band displaying offers and phrases. */
.ticker-band {
    position: relative;
    z-index: 10;
    overflow: visible;
    width: calc(100% + 8rem);
    margin-left: -4rem;
    margin-block: 2.75rem;
    padding-block: 1.25rem;
}

.ticker-row {
    display: flex;
    overflow: hidden;
}

.ticker-row--deals {
    background: #070707;
    border-top: 1px solid rgba(57, 255, 20, 0.25);
    border-bottom: 1px solid rgba(57, 255, 20, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    transform: rotate(-2deg);
}

.ticker-row--phrases {
    position: relative;
    z-index: 2;
    margin-top: -1.7rem;
    background: var(--neon-color);
    color: #050505;
    border-top: 1px solid rgba(5, 5, 5, 0.35);
    border-bottom: 1px solid rgba(5, 5, 5, 0.35);
    box-shadow: 0 -16px 30px rgba(0, 0, 0, 0.6);
    transform: rotate(2deg);
}

.ticker-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2.75rem;
    min-width: max-content;
    padding-block: 0.85rem;
    animation: ticker-scroll 34s linear infinite;
}

.ticker-row--deals .ticker-track {
    animation-duration: 85s;
}

.ticker-track--reverse {
    animation-direction: reverse;
    animation-duration: 34s;
}

.ticker-band:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.ticker-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: var(--espresso-color);
}

.ticker-off {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--neon-color);
}

.ticker-sep {
    color: var(--neon-color);
    font-size: 0.8rem;
    opacity: 0.85;
}

.ticker-word {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.ticker-row--phrases .ticker-sep {
    color: #050505;
    opacity: 0.7;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 640px) {
    .ticker-band {
        width: calc(100% + 4rem);
        margin-left: -2rem;
    }

    .ticker-row--deals {
        transform: rotate(-1.6deg);
    }

    .ticker-row--phrases {
        transform: rotate(1.6deg);
        margin-top: -1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
    }
}