/**
 * Logo Marquee Widget Styles
 * Pure CSS animations for smooth, continuous marquee effect
 */

/* Container Styles */
.logo-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center rows horizontally */
}

/* Row Styles */
.logo-marquee-row {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0; /* Extra padding for shadow visibility */
    margin: 0 auto; /* Center the row */
}

/* Visible items control - limits the width of the row */
.logo-marquee-row[data-visible-items] {
    /* Width will be set inline based on logo width + spacing */
    /* But ensures full width on large screens */
}

/* Track - contains all logos */
.logo-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}

/* Individual Logo Item */
.logo-marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0; /* Add vertical padding for box shadow space */
}

.logo-marquee-item img {
    display: block;
    max-width: 100%;
}

/* Animation for Left to Right */
.logo-marquee-row[data-direction="left"] .logo-marquee-track {
    animation: marquee-left linear infinite;
}

/* Animation for Right to Left */
.logo-marquee-row[data-direction="right"] .logo-marquee-track {
    animation: marquee-right linear infinite;
}

/* Keyframes - Left to Right (moves from -100% to 0) */
@keyframes marquee-left {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Keyframes - Right to Left (moves from 0 to -100%) */
@keyframes marquee-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on Hover */
.logo-marquee-container[data-pause-hover="1"]:hover .logo-marquee-track {
    animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .logo-marquee-item img {
        width: auto;
        max-width: 150px;
    }
}

@media (max-width: 768px) {
    .logo-marquee-item img {
        width: auto;
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .logo-marquee-item img {
        width: auto;
        max-width: 100px;
    }
}

/* Elementor Editor Specific */
.elementor-editor-active .logo-marquee-track {
    animation-play-state: running !important;
}

/* Performance optimization */
.logo-marquee-track {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}