/* Стили для бегущих строк на главной странице */

/* Контейнер для бегущих строк */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    margin: 0.5rem 0;
    /* Показываем контейнер после загрузки CSS */
    opacity: 1 !important;
    visibility: visible !important;
}

.marquee-wrapper {
    display: inline-flex;
    gap: 1rem;
}

/* Анимация слева направо */
.marquee-ltr .marquee-wrapper {
    animation: marquee-ltr linear infinite;
}

/* Анимация справа налево */
.marquee-rtl .marquee-wrapper {
    animation: marquee-rtl linear infinite;
}

@keyframes marquee-ltr {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-rtl {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Разные скорости (очень медленные, плавные) */
.marquee-slow .marquee-wrapper {
    animation-duration: 800s;
}

.marquee-medium .marquee-wrapper {
    animation-duration: 600s;
}

.marquee-fast .marquee-wrapper {
    animation-duration: 400s;
}

/* Волнообразное появление/исчезновение бейджей */
.marquee-badge {
    animation: fade-wave linear infinite;
}

/* Разные скорости для волны прозрачности */
.marquee-badge:nth-child(odd) {
    animation-duration: 4s;
}

.marquee-badge:nth-child(even) {
    animation-duration: 6s;
}

.marquee-badge:nth-child(3n) {
    animation-duration: 5s;
}

.marquee-badge:nth-child(4n) {
    animation-duration: 7s;
}

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