/* Framey Continuous Logo Carousel - Simplified Pure CSS */

.framey-continuous-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.framey-carousel-track {
    display: flex;
    animation: continuousScroll var(--animation-duration, 30s) linear infinite;
    will-change: transform;
}

/* Animation using exact calculated width */
@keyframes continuousScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly one set of logos (1/3 of total since we render 3 times) */
        transform: translateX(calc(var(--track-width) * -1));
    }
}

/* Pause on hover */
.framey-continuous-carousel.pause-on-hover:hover .framey-carousel-track {
    animation-play-state: paused;
}

/* Logo items with fixed widths */
.framey-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 180px; /* Default, overridden by control */
    margin: 0 20px; /* Default, overridden by control */
}

.framey-logo-image {
    display: block;
    max-height: 60px; /* Default, overridden by control */
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Performance optimizations */
.framey-carousel-track,
.framey-logo-item {
    transform: translateZ(0);
    backface-visibility: hidden;
}