/* Стили для фонов секций */
.section-background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .section-background {
        background-attachment: scroll;
        min-height: auto;
    }
}

/* Стили для видео фонов */
.section-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Видео/градиент секции — всегда под контентом */
section.relative.overflow-hidden > .section-video-background {
    z-index: 0;
}

section.relative.overflow-hidden > .section-content {
    position: relative;
    z-index: 20;
}

/* Стили для наложения */
.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Стили для контента поверх фона */
.section-content {
    position: relative;
    z-index: 20;
}

/* Дополнительные эффекты для фонов */
.section-background-fade {
    transition: opacity 0.3s ease-in-out;
}

.section-background-hover:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease-in-out;
}

/* Стили для градиентных фонов */
.section-gradient {
    background: linear-gradient(var(--gradient-direction, to-br), var(--gradient-start, #3b82f6), var(--gradient-end, #8b5cf6));
}

/* Анимация для фонов */
@keyframes backgroundFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.section-background-animate {
    animation: backgroundFadeIn 0.5s ease-in-out;
}