/* ============================================
   ПЛАВНЫЕ ЗАТУХАЮЩИЕ ПЕРЕХОДЫ МЕЖДУ СЕКЦИЯМИ
   Естественные переходы без резких границ
   ============================================ */

/* Основные стили для секций с переходами */
.section-with-gradient {
    position: relative;
    z-index: 1;
}

/* Плавный переход снизу секции (затухание) */
.section-with-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.6) 70%,
        rgba(255, 255, 255, 1) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Плавный переход сверху секции (появление) */
.section-with-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.6) 70%,
        rgba(255, 255, 255, 1) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* ============================================
   СПЕЦИАЛЬНЫЕ ПЕРЕХОДЫ ДЛЯ РАЗНЫХ СЕКЦИЙ
   ============================================ */

/* Секция About/Services - мягкий переход от hero */
.rts-about-area-seven.section-with-gradient::before {
    background: linear-gradient(to top,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.2) 30%,
        rgba(248, 249, 250, 0.5) 60%,
        rgba(248, 249, 250, 0.8) 85%,
        rgba(248, 249, 250, 1) 100%
    );
}

.rts-about-area-seven.section-with-gradient::after {
    background: linear-gradient(to bottom,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.3) 40%,
        rgba(255, 255, 255, 0.7) 80%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Секция Services - переход к белому */
.rts-service-area.section-with-gradient::before {
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.6) 70%,
        rgba(255, 255, 255, 1) 100%
    );
}

.rts-service-area.section-with-gradient::after {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(248, 249, 250, 0.8) 90%,
        rgba(248, 249, 250, 1) 100%
    );
}

/* Секция Pricing - мягкие переходы */
.pricing-section.section-with-gradient::before {
    background: linear-gradient(to top,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.3) 40%,
        rgba(248, 249, 250, 0.7) 80%,
        rgba(248, 249, 250, 1) 100%
    );
}

.pricing-section.section-with-gradient::after {
    background: linear-gradient(to bottom,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.4) 50%,
        rgba(255, 255, 255, 0.8) 85%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Секция FAQ - градиент на контейнере */
.rts-faq-area.section-with-gradient {
    position: relative;
    z-index: 1;
}

/* Убираем градиенты с псевдоэлементов секции */
.rts-faq-area.section-with-gradient::before,
.rts-faq-area.section-with-gradient::after {
    display: none;
}

/* Градиент применяем к самому контейнеру FAQ */
.faq-style-two {
    position: relative;
    z-index: 10;
    background: linear-gradient(to left,
        rgba(139, 92, 246, 0.8) 0%,
        rgba(124, 58, 237, 0.9) 15%,
        rgba(103, 58, 183, 1) 20%,
        rgb(153, 76, 186) 100%
    );
    border-radius: 35px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2), 0 5px 15px rgba(124, 58, 237, 0.1);
}

/* Контент FAQ всегда поверх градиента */
.faq-style-two .left-accordion-faq,
.faq-style-two .right-image {
    position: relative;
    z-index: 15;
}

/* Секция Counter - минимальные переходы */
.rts-counterup-area-start.section-with-gradient::before,
.rts-counterup-area-start.section-with-gradient::after {
    height: 80px;
}

.rts-counterup-area-start.section-with-gradient::before {
    background: linear-gradient(to top,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.4) 50%,
        rgba(248, 249, 250, 1) 100%
    );
}

.rts-counterup-area-start.section-with-gradient::after {
    background: linear-gradient(to bottom,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.4) 50%,
        rgba(248, 249, 250, 1) 100%
    );
}

/* Секция After-Before (Преподаватели) */
.rts-after-before-area.section-with-gradient::before {
    background: linear-gradient(to top,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.3) 40%,
        rgba(248, 249, 250, 0.7) 80%,
        rgba(248, 249, 250, 1) 100%
    );
}

.rts-after-before-area.section-with-gradient::after {
    background: linear-gradient(to bottom,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.3) 40%,
        rgba(248, 249, 250, 0.7) 80%,
        rgba(248, 249, 250, 1) 100%
    );
}

/* Секция Blog - последняя перед footer */
.rts-blog-area.section-with-gradient::before {
    background: linear-gradient(to top,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.3) 40%,
        rgba(248, 249, 250, 0.7) 80%,
        rgba(248, 249, 250, 1) 100%
    );
}

/* У blog секции НЕТ нижнего перехода, так как footer должен иметь четкую границу */
.rts-blog-area.section-with-gradient::after {
    display: none;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 1024px) {
    .section-with-gradient::before,
    .section-with-gradient::after {
        height: 100px;
    }
    
    .rts-counterup-area-start.section-with-gradient::before,
    .rts-counterup-area-start.section-with-gradient::after {
        height: 60px;
    }
}

@media (max-width: 768px) {
    .section-with-gradient::before,
    .section-with-gradient::after {
        height: 80px;
    }
    
    .rts-counterup-area-start.section-with-gradient::before,
    .rts-counterup-area-start.section-with-gradient::after {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .section-with-gradient::before,
    .section-with-gradient::after {
        height: 60px;
    }
    
    .rts-counterup-area-start.section-with-gradient::before,
    .rts-counterup-area-start.section-with-gradient::after {
        height: 40px;
    }
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ
   ============================================ */

/* Плавная анимация появления переходов */
.section-with-gradient::before,
.section-with-gradient::after {
    opacity: 0;
    animation: fadeInGradient 1.5s ease-out forwards;
}

@keyframes fadeInGradient {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Улучшенная производительность */
.section-with-gradient::before,
.section-with-gradient::after {
    will-change: opacity;
    backface-visibility: hidden;
}

/* Отключение переходов для печати */
@media print {
    .section-with-gradient::before,
    .section-with-gradient::after {
        display: none;
    }
}