/* infinite_slider.css */

.slider-container {
    width: 100%;
    overflow: hidden;
    padding: 80px 0; /* Increased from 64px to 80px */
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-surface-container);
    border-bottom: 1px solid var(--color-surface-container);
}

.slider-mask {
    overflow: visible; /* Changed from hidden to allow hover scale visibility */
    /* Create the faded edges effect */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.infinite-slider {
    display: flex;
    width: max-content;
    align-items: center;
    min-height: 120px; /* Ensure a minimum height for scaling */
    /* Remove gap from here to prevent mathematical jumps at loop point */
    animation: none; 
    will-change: transform;
}

.slider-set {
    display: flex;
    align-items: center;
    gap: 128px; /* Standard gap between logos */
    padding-right: 128px; /* Essential: This is the 'bridge' gap between sets */
}

/* Optional: Hover effects for logos */
.slider-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.2); /* Slightly larger scale */
}

.slider-logo {
    height: 56px; /* Increased from 48px to 56px */
    width: auto;
    object-fit: contain;
    /* Styling from reference */
    filter: grayscale(100%);
    opacity: 0.5;
    mix-blend-mode: multiply;
    transition: all 0.5s ease;
    cursor: pointer;
}

.slider-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}