@layer components {

    /* ── Country ticker ─────────────────────────────────────────────
     Infinite-scroll horizontal marquee. Track is duplicated in markup
     and animated left by -50% for a seamless loop. */
    .c-ticker {
        padding-block: var(--space-7);
        overflow: hidden;
        border-top: 1px solid rgb(250 249 245 / .15);
    }

    .c-ticker__track {
        display: flex;
        gap: var(--space-7);
        white-space: nowrap;
        animation: c-ticker-scroll 120s linear infinite;
        width: max-content;
    }

    .c-ticker__item {
        font-family: var(--font-display);
        font-size: var(--fs-body);
        color: var(--color-accent-soft);
        opacity: 0.8;
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
    }

    .c-ticker__item::before {
        content: "\2022";
        color: rgb(250 249 245 / .4);
        font-size: var(--fs-caption);
    }

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

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