/* Анимация светящихся полосок для сайта Студии "Карусель" */

/* Контейнер для светящихся полосок */
.glowing-strips-container {
    position: absolute; /* Изменено с fixed на absolute для лучшей совместимости */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Изменено с -1 на 0 для правильного наложения */
    overflow: visible; /* Изменено с hidden на visible для предотвращения блокировки */
    overflow-x: hidden !important; /* Предотвращение горизонтального скроллинга */
}

/* Общие стили для полосок */
.glowing-strip {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--strip-color), transparent);
    filter: blur(10px);
    opacity: 0.3;
    border-radius: 10px;
    animation: strip-flow linear infinite;
    max-width: 100vw !important; /* Ограничение ширины */
    overflow-x: hidden !important; /* Предотвращение горизонтального скроллинга */
    transform-origin: center center; /* Центр вращения для предотвращения выхода за границы */
}

/* Анимация движения полосок */
@keyframes strip-flow {
    0% {
        transform: translateY(-100%) rotate(var(--strip-rotation));
    }
    100% {
        transform: translateY(100vh) rotate(var(--strip-rotation));
    }
}

/* Анимация пульсации свечения */
@keyframes strip-pulse {
    0%, 100% {
        opacity: 0.2;
        filter: blur(10px) brightness(1);
    }
    50% {
        opacity: 0.5;
        filter: blur(15px) brightness(1.5);
    }
}

/* Анимация изменения цвета */
@keyframes strip-color-change {
    0% {
        --strip-color: var(--primary-color);
    }
    25% {
        --strip-color: var(--secondary-color);
    }
    50% {
        --strip-color: var(--accent-color);
    }
    75% {
        --strip-color: var(--light-color);
    }
    100% {
        --strip-color: var(--primary-color);
    }
}

/* Специфичные стили для разных типов полосок */
.strip-type-1 {
    --strip-color: var(--primary-color);
    --strip-rotation: 5deg; /* Уменьшено с 15deg до 5deg для предотвращения горизонтального скроллинга */
    animation-duration: 20s;
    animation-name: strip-flow, strip-pulse;
    animation-duration: 20s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

.strip-type-2 {
    --strip-color: var(--secondary-color);
    --strip-rotation: -3deg; /* Уменьшено с -10deg до -3deg для предотвращения горизонтального скроллинга */
    animation-duration: 25s;
    animation-name: strip-flow, strip-pulse;
    animation-duration: 25s, 4s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

.strip-type-3 {
    --strip-color: var(--accent-color);
    --strip-rotation: 2deg; /* Уменьшено с 5deg до 2deg для предотвращения горизонтального скроллинга */
    animation-duration: 30s;
    animation-name: strip-flow, strip-pulse;
    animation-duration: 30s, 5s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

.strip-type-4 {
    --strip-color: var(--light-color);
    --strip-rotation: -4deg; /* Уменьшено с -15deg до -4deg для предотвращения горизонтального скроллинга */
    animation-duration: 35s;
    animation-name: strip-flow, strip-pulse;
    animation-duration: 35s, 6s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

.strip-type-5 {
    --strip-color: #FF1493; /* Глубокий розовый */
    --strip-rotation: 3deg; /* Уменьшено с 8deg до 3deg для предотвращения горизонтального скроллинга */
    animation-duration: 40s;
    animation-name: strip-flow, strip-pulse, strip-color-change;
    animation-duration: 40s, 7s, 10s;
    animation-timing-function: linear, ease-in-out, linear;
    animation-iteration-count: infinite, infinite, infinite;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .glowing-strip {
        filter: blur(5px);
        opacity: 0.2;
    }
    
    .strip-type-1 { 
        --strip-rotation: 2deg; /* Еще больше уменьшено для мобильных */
        animation-duration: 30s, 4s; 
    }
    .strip-type-2 { 
        --strip-rotation: -1deg; /* Еще больше уменьшено для мобильных */
        animation-duration: 35s, 5s; 
    }
    .strip-type-3 { 
        --strip-rotation: 1deg; /* Еще больше уменьшено для мобильных */
        animation-duration: 40s, 6s; 
    }
    .strip-type-4 { 
        --strip-rotation: -2deg; /* Еще больше уменьшено для мобильных */
        animation-duration: 45s, 7s; 
    }
    .strip-type-5 { 
        --strip-rotation: 1deg; /* Еще больше уменьшено для мобильных */
        animation-duration: 50s, 8s, 15s; 
    }
}

/* Отключение анимации для пользователей, предпочитающих уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
    .glowing-strip {
        animation: none !important;
        opacity: 0.1;
    }
}

/* Временные стили для отладки скроллинга - можно удалить после тестирования */
.debug-scroll * {
    outline: 1px solid rgba(255, 0, 0, 0.1) !important;
}

.debug-scroll body {
    overflow: visible !important;
    position: relative !important;
}