/**
 * Continuous Conveyor Belt Image Slider
 * Pure CSS animation for infinite seamless scrolling
 */

/* Wrapper */
.image-linear-conveyor-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;

    /* Force GPU layer */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Container clips overflow */
.conveyor-container {
    overflow: hidden;
    width: 100%;
    position: relative;

    /* Contain layout calculations */
    contain: layout style paint;
}

/* The moving track */
.conveyor-track {
    display: flex;
    width: max-content;
    animation-name: conveyor-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-duration is set inline via PHP (default 20s) */
    /* animation-direction is set inline via PHP (normal or reverse) */

    /* GPU Acceleration - Forces hardware acceleration */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Individual image items */
.conveyor-item {
    flex-shrink: 0;
    display: inline-block;

    /* Prevent layout shifts */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.conveyor-item img {
    display: block;
    height: 300px;
    width: auto;
    object-fit: cover;

    /* Smooth rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* Prevent image flickering */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.conveyor-item a {
    display: block;
    text-decoration: none;
}

/* Keyframe animation - moves by 50% (one set of images) */
@keyframes conveyor-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Pause on hover functionality */
.image-linear-conveyor-wrapper.pause-on-hover:hover .conveyor-track {
    animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .conveyor-item img {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .conveyor-item img {
        height: 150px;
    }
}