/* assets/css/style.css */
.smooth-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.smooth-marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: smooth-marquee-animation 15s linear infinite;
}

.smooth-marquee-content:after {
    content: attr(data-content);
    display: inline-block;
    margin-left: 50px; /* Отступ между повторами текста */
}

.smooth-marquee[data-direction="right"] .smooth-marquee-content {
    animation-name: smooth-marquee-animation-reverse;
}

@keyframes smooth-marquee-animation {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50%, 0); /* Изменено с -100% на -50% для более плавного перехода */
    }
}

@keyframes smooth-marquee-animation-reverse {
    0% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Snake style анимация */
.snake-style .smooth-marquee-content {
    opacity: 1; /* Изменено с 0 на 1 */
}

.snake-style[data-direction="right"] .smooth-marquee-content {
    animation-name: snake-animation-reverse;
}

.smooth-marquee a {
    text-decoration: none;
}


.smooth-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.smooth-marquee-inner {
    display: flex;
    position: relative;
    animation: marquee-scroll var(--duration) linear infinite;
    width: max-content;
}

.smooth-marquee-item {
    flex-shrink: 0;
    padding-right: 50px; /* Отступ между копиями текста */
}

/* Анимация слева направо */
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Анимация справа налево */
.smooth-marquee[data-direction="right"] .smooth-marquee-inner {
    animation-name: marquee-scroll-reverse;
}

@keyframes marquee-scroll-reverse {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}



.smooth-marquee a {
    text-decoration: none;
    color: inherit;
}

.smooth-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    touch-action: none; /* Предотвращаем конфликты с тач-устройствами */
}

.smooth-marquee-inner {
    display: flex;
    position: relative;
    animation: marquee-scroll var(--duration) linear infinite;
    width: max-content;
    align-items: center;
}

.marquee-image {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.smooth-marquee-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: var(--spacing, 50px);
}

/* Стили для режима скролла */
.smooth-marquee.scroll-control {
    cursor: ew-resize;
}

.smooth-marquee.scroll-control .smooth-marquee-inner {
    animation: none;
    transform: translateX(var(--scroll-position, 0));
    transition: transform 0.1s ease-out;
}