/* FlexCast: automatisch doorlopende klantenlogo's. */
.page--logos {
    position: relative;
    overflow: hidden;
}

.customer-logos {
    --logo-width: 20vh;
    --logo-height: 20vh;
    --logo-gap: 15vh;

    position: absolute;
    z-index: 3;
    isolation: isolate;

    left: 0;
    right: 0;
    top: 0;

    overflow: hidden;
    padding-block: 10vh;

    background: transparent;

    -webkit-mask-image: none;
    mask-image: none;
	opacity: 0.8;
}

.customer-logos::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    /* Zwarte achtergrond die naar onderen vervaagt. */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.25) 55%,
        transparent 100%
    );

    /* Alleen de achtergrond vervaagt links en rechts. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );
}



.customer-logos__track {
    display: flex;
    width: max-content;
}

.customer-logos.is-ready .customer-logos__track {
    animation: customer-logos-scroll var(--logo-duration, 30s) linear infinite;
    will-change: transform;
	height:100%;
}

.customer-logos__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    gap: var(--logo-gap);
    padding-right: var(--logo-gap);
}

.customer-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--logo-width);
    width: var(--logo-width);
    height: var(--logo-height);
}

.page--logos .customer-logos__item img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes customer-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
    .customer-logos {
        --logo-width: 25vh;
        --logo-height: 25vh;
        --logo-gap: 10vh;
        bottom: 50vh;
		opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-logos { overflow-x: auto; }
    .customer-logos.is-ready .customer-logos__track {
        animation: none;
        will-change: auto;
    }
    .customer-logos [data-logo-copy] { display: none; }
}