.marquee-fade-wrap {
    position: relative;
}

.marquee-fade-wrap::before,
.marquee-fade-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(3rem, 12vw, 10rem);
    z-index: var(--z-marquee-fade);
    pointer-events: none;
}

.marquee-fade-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg), transparent);
}

.marquee-fade-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg), transparent);
}

.marquee-row {
    overflow: visible;
    width: 100%;
    transform: translateZ(0);
}

.marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    contain: layout style paint;
}

.marquee-left .marquee-track {
    transform: translateX(var(--marquee-x-1, 0));
}

.marquee-right .marquee-track {
    transform: translateX(var(--marquee-x-2, 0));
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        transform: none !important;
    }
}

/* Performance optimization: GPU acceleration */
.marquee-row {
    will-change: transform;
}