/* ==========================================================================
   CTA BANNER
   Scrolling marquee with motivational phrases on pink background.
   ========================================================================== */

/* Banner container: pink background, hides overflow */
.cta-banner {
    background-color: var(--color-pink-accent);
    padding: var(--space-sm) 0;
    overflow: hidden;
}

/* Track: holds all text items in a row */
.cta-banner__track {
    display: flex;
    gap: 30px;
    white-space: nowrap;
}

/* Individual text phrases */
.cta-banner__text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-body);
    color: var(--color-primary-dark);
}

/* Separator between phrases */
.cta-banner__separator {
    color: var(--color-primary-dark);
}

/* Scrolling animation: moves track left by 50% (first copy length) */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Apply animation to track */
.cta-banner__track {
    display: flex;
    gap: 30px;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
}