.marquee-container {
    --marquee-gap: 20px;
    --marquee-duration: 20s;
    overflow: hidden;
    width: 100%;
}

/* Track */
.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: var(--marquee-gap);
}

/* Content & clones animate together */
.marquee-content,
.marquee-clone {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    gap: var(--marquee-gap);
    animation: marquee-scroll var(--marquee-duration) linear infinite;
}

/* Direction reverse */
.marquee-container[data-direction="right"] .marquee-content,
.marquee-container[data-direction="right"] .marquee-clone {
    animation-direction: reverse;
}

/* Items shouldn't shrink */
.marquee-item {
    flex-shrink: 0;
}

/* Typography target - GEEN typography properties! */
.marquee-text {
    display: inline-block;
    white-space: nowrap;
    /* Bricks voegt hier alle typography CSS toe */
}

/* Links - inheritance belangrijk */
.marquee-item a {
    color: inherit;
    text-decoration: inherit;
}

/* Pause on hover */
.pause-on-hover .marquee-content,
.pause-on-hover .marquee-clone {
    animation-play-state: running;
}

.pause-on-hover:hover .marquee-content,
.pause-on-hover:hover .marquee-clone {
    animation-play-state: paused;
}

/* Keyframes */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .marquee-content,
    .marquee-clone {
        animation-duration: calc(var(--marquee-duration) * 2);
    }
}