.showcase {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
}

.scroll-left {
    animation: moveLeft 30s linear infinite;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.scroll-right {
    animation: moveRight 30s linear infinite;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 2rem;
}

@keyframes moveLeft {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes moveRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.item {
    flex-shrink: 0;
    cursor: default;
    pointer-events: none;
}

.item > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}
/* Performance optimizations */
.scroll-left,
.scroll-right {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Responsive design */
@media (max-width: 768px) {
    .item > div {
        padding: 0.75rem 1rem;
    }

    
    .scroll-left,
    .scroll-right {
        gap: 1rem;
    }
    
    .showcase {
        mask-image: linear-gradient(to right, transparent, white 5%, white 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, white 5%, white 95%, transparent);
    }
}

@media (max-width: 480px) {
    .item > div {
        padding: 0.5rem 0.75rem;
    }
    
}