/* =====================================================
   Faes & Faes – Infinite Image Carousel
   ===================================================== */

.faes-carousel-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Arc-modus: items mogen buiten de hoogte treden, maar niet horizontaal */
.faes-carousel-wrapper.has-arc {
    overflow: visible;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0px, black 2px,
        black calc(100% - 2px), transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0px, black 2px,
        black calc(100% - 2px), transparent 100%);
}

/* Fade-maskers aan de zijkanten */
.faes-carousel-wrapper.has-fade::before,
.faes-carousel-wrapper.has-fade::after {
    content: '';
    position: absolute;
    top: -200px; /* ruim genoeg voor arc-hoogte */
    bottom: -200px;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.faes-carousel-wrapper.has-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--faes-fade-color, #ffffff), transparent);
}
.faes-carousel-wrapper.has-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--faes-fade-color, #ffffff), transparent);
}

/* De scrollende track */
.faes-carousel-track {
    display: flex;
    width: max-content;
    align-items: center;
    will-change: transform;
}

/* CSS-animatie (alleen gebruikt als arc UITGESCHAKELD is) */
.faes-carousel-track.direction-left {
    animation: faes-scroll-left var(--faes-duration, 20s) linear infinite;
}
.faes-carousel-track.direction-right {
    animation: faes-scroll-right var(--faes-duration, 20s) linear infinite;
}

/* Pauzeer bij hover */
.faes-carousel-wrapper.pause-on-hover:hover .faes-carousel-track {
    animation-play-state: paused;
}

/* Individuele items */
.faes-carousel-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* overflow: hidden alleen wanneer border-radius ingesteld is (via Elementor selector) */
}

.faes-carousel-item img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

/* Keyframes (flat modus zonder arc) */
@keyframes faes-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes faes-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Elementor editor */
.elementor-editor-active .faes-carousel-track {
    animation-play-state: running !important;
}