/*
 * Ticker scroll-direction — Osmo advanced marquee (ticker.js mode scroll)
 *
 * [data-marquee-scroll-direction-target] or [data-marquee][data-marquee-mode="scroll"]
 *   > [data-marquee-scroll-target].c-ticker-scroll__scroll
 *     > [data-marquee-collection-target].c-ticker-scroll__collection
 *
 * data-marquee-direction — left | right
 * data-marquee-speed — loop duration (lower = faster)
 * data-marquee-duplicate — extra collection clones (2 = 3 total rows)
 * data-marquee-scroll-speed — vw scrub range on page scroll
 * data-marquee-status — normal | inverted (set by JS on scroll direction)
 *
 * Import after token.css. Enable modules.ticker + ScrollTrigger.
 */

.c-ticker-scroll,
[data-marquee][data-marquee-mode='scroll'],
[data-marquee-scroll-direction-target] {
    --ticker-scroll-item-size: clamp(6rem, 18vw, 12rem);
    --ticker-scroll-gap: var(--space-l);
    --ticker-scroll-font: max(var(--h-l), 8vw);

    border-radius: var(--radius-badge);
    inline-size: 100%;
    overflow: hidden;
    position: relative;
    white-space: normal;
}

.c-ticker-scroll__scroll,
[data-marquee][data-marquee-mode='scroll'] [data-marquee-scroll-target],
[data-marquee-scroll-direction-target] [data-marquee-scroll-target] {
    column-gap: var(--ticker-scroll-gap);
    display: flex;
    flex-wrap: nowrap;
    inline-size: 100%;
    position: relative;
    white-space: normal;
    will-change: transform;
}

.c-ticker-scroll__collection,
[data-marquee][data-marquee-mode='scroll'] [data-marquee-collection-target],
[data-marquee-scroll-direction-target] [data-marquee-collection-target] {
    display: flex;
    flex-wrap: nowrap;
    column-gap: var(--ticker-scroll-gap);
    position: relative;
    white-space: normal;
    will-change: transform;
}

.c-ticker-scroll__item {
    align-items: center;
    display: flex;
    font-size: var(--ticker-scroll-font);
    justify-content: flex-start;
}

.c-ticker-scroll__text {
    font-size: 1em;
    line-height: 1;
    margin: 0;
    margin-inline-end: 0.25em;
    white-space: nowrap;
}

.c-ticker-scroll__tile {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--mode-reverse);
    border-radius: var(--radius-m);
    color: var(--mode);
    display: flex;
    inline-size: var(--ticker-scroll-item-size);
    justify-content: center;
    margin: var(--ticker-scroll-gap);
}

/* Optional: flip decoration on scroll-direction invert */
.c-ticker-scroll__arrow,
[data-marquee-direction='right'][data-marquee-status='inverted'] .c-ticker-scroll__arrow {
    transform: rotate(-180deg);
    transition: transform 0.5s var(--bezier-out);
}

[data-marquee-status='inverted'] .c-ticker-scroll__arrow,
[data-marquee-direction='right'][data-marquee-status='normal'] .c-ticker-scroll__arrow {
    transform: rotate(-359.999deg);
}