/* Cronos Logo Marquee Component */
.cronos-logo-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
    background: transparent;
}

.cronos-logo-marquee-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1rem;
}

.cronos-logo-marquee-row:last-child {
    margin-bottom: 0;
}

.cronos-logo-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* Animation Speeds */
.cronos-logo-marquee-track[data-speed="slow"] {
    animation-duration: 60s;
}

.cronos-logo-marquee-track[data-speed="normal"] {
    animation-duration: 30s;
}

.cronos-logo-marquee-track[data-speed="fast"] {
    animation-duration: 15s;
}

/* Animation Directions */
.cronos-logo-marquee-track[data-direction="left"] {
    animation-name: marquee-left;
}

.cronos-logo-marquee-track[data-direction="right"] {
    animation-name: marquee-right;
}

/* Keyframe Animations for continuous scrolling */
@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);
    }
}

@keyframes marquee-right {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Logo Items */
.cronos-logo-marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cronos-logo-marquee-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Logo Sizes */
.cronos-logo-marquee-item.size-small {
    height: 60px;
    width: 120px;
}

.cronos-logo-marquee-item.size-medium {
    height: 80px;
    width: 160px;
}

.cronos-logo-marquee-item.size-large {
    height: 165px;
    width: 275px;
}

/* Logo Spacing */
.cronos-logo-marquee-item.spacing-tight {
    margin-right: 1rem;
}

.cronos-logo-marquee-item.spacing-normal {
    margin-right: 2rem;
}

.cronos-logo-marquee-item.spacing-loose {
    margin-right: 3rem;
}

/* Fade overlays for edges */
.cronos-logo-marquee-fade-left,
.cronos-logo-marquee-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none;
    z-index: 2;
}

/* Fade Animation Type */
.cronos-logo-marquee[data-animation-type="fade"] .cronos-logo-marquee-track {
    animation: none;
}

.cronos-logo-marquee[data-animation-type="fade"] .cronos-logo-marquee-item {
    animation: fade-in-out 4s ease-in-out infinite;
}

.cronos-logo-marquee[data-animation-type="fade"] .cronos-logo-marquee-item:nth-child(even) {
    animation-delay: 2s;
}

@keyframes fade-in-out {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .cronos-logo-marquee-item.size-small {
        height: 30px;
        width: 60px;
    }

    .cronos-logo-marquee-item.size-medium {
        height: 40px;
        width: 80px;
    }

    .cronos-logo-marquee-item.size-large {
        height: 50px;
        width: 100px;
    }

    .cronos-logo-marquee-item.spacing-tight {
        margin-right: 0.5rem;
    }

    .cronos-logo-marquee-item.spacing-normal {
        margin-right: 1rem;
    }

    .cronos-logo-marquee-item.spacing-loose {
        margin-right: 1.5rem;
    }

    .cronos-logo-marquee-fade-left,
    .cronos-logo-marquee-fade-right {
        width: 50px;
    }
}

/* Pause animation on hover */
.cronos-logo-marquee:hover .cronos-logo-marquee-track {
    animation-play-state: paused;
}

/* Ensure smooth performance */
.cronos-logo-marquee-track {
    backface-visibility: hidden;
    perspective: 1000px;
}