/**
 * Block: Logo Marquee Styles
 */

.kf-logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Default spacing variables */
    --scale: 1;
    --marquee-speed: 40s;
    --logo-container-w: calc(208px * var(--scale));
    --logo-container-h: calc(114px * var(--scale));
    --logo-gap: 0px; /* Included in container width, but can be adjusted here if needed */

    opacity: .8;
}

.kf-logo-marquee__track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    /* Determine animation name based on direction modifier present on parent */
    animation: marquee-scroll-ltr var(--marquee-speed) linear infinite;
}

/* Modifier: Right to Left */
.kf-logo-marquee--rtl .kf-logo-marquee__track {
    animation-name: marquee-scroll-rtl;
}

/* Pause on Hover */
.kf-logo-marquee:hover .kf-logo-marquee__track {
    animation-play-state: paused;
}

/* Individual Logo Container */
.kf-logo-marquee__item {
    flex: 0 0 var(--logo-container-w);
    width: var(--logo-container-w);
    height: var(--logo-container-h);
    display: flex;
    align-items: center; /* Vertical Center */
    justify-content: center; /* Horizontal Center */
    padding: 0 15px; /* Optional internal padding to prevent logos touching edges */
    box-sizing: border-box;
}

/* Logo Image */
.kf-logo-marquee__item img {
    /* The specific width is passed via inline style --logo-width on the parent div */
    width: calc(var(--logo-width, 130px) * var(--scale));
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/**
 * Animations
 * 
 * Logic: We have 2 identical sets of logos. 
 * -50% translation moves exactly one full set length, resetting instantly to 0.
 */

/* Left to Right (Default requested) */
@keyframes marquee-scroll-ltr {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Right to Left (Optional variable) */
@keyframes marquee-scroll-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


@media (max-width: 767px) {
    .kf-logo-marquee {
        --scale: 0.8;
    }
}