/* ===================================
   DIVIDERS.CSS - Декоративные разделители секций
   =================================== */

/* ===================================
   1. БАЗОВЫЙ РАЗДЕЛИТЕЛЬ
   =================================== */
.section-divider {
    position: relative;
    height: 1px;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.section-divider__line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 166, 232, 0.1) 10%,
            rgba(0, 166, 232, 0.6) 50%,
            rgba(0, 166, 232, 0.1) 90%,
            transparent 100%
    );
}

/* ===================================
   2. ВАРИАНТ С АНИМИРОВАННЫМ СВЕЧЕНИЕМ
   =================================== */
.section-divider--glow .section-divider__line {
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 166, 232, 0.15) 10%,
            rgba(0, 166, 232, 0.8) 50%,
            rgba(0, 166, 232, 0.15) 90%,
            transparent 100%
    );
    box-shadow:
            0 0 10px rgba(0, 166, 232, 0.4),
            0 0 20px rgba(0, 166, 232, 0.2);
}

/* ===================================
   3. ВАРИАНТ С ЦЕНТРАЛЬНОЙ ТОЧКОЙ
   =================================== */
.section-divider--dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--gradient-primary);
    border-radius: 50%;
    box-shadow:
            0 0 12px rgba(0, 166, 232, 0.6),
            0 0 24px rgba(0, 166, 232, 0.3);
    z-index: 1;
}

.section-divider--dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px solid rgba(0, 166, 232, 0.3);
    border-radius: 50%;
    z-index: 0;
}

/* ===================================
   4. ВАРИАНТ С ЗОЛОТЫМ АКЦЕНТОМ
   =================================== */
.section-divider--gold .section-divider__line {
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 166, 232, 0.1) 20%,
            rgba(255, 107, 0, 0.6) 50%,
            rgba(0, 166, 232, 0.1) 80%,
            transparent 100%
    );
}

.section-divider--gold::after {
    background: var(--gradient-gold);
}

/* ===================================
   5. ВАРИАНТ С ДВОЙНОЙ ЛИНИЕЙ
   =================================== */
.section-divider--double {
    height: 3px;
}

.section-divider--double .section-divider__line {
    top: 0;
}

.section-divider--double::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 166, 232, 0.05) 10%,
            rgba(0, 166, 232, 0.3) 50%,
            rgba(0, 166, 232, 0.05) 90%,
            transparent 100%
    );
}

/* ===================================
   6. ВАРИАНТ С ГРАДИЕНТОМ
   =================================== */
.section-divider--gradient .section-divider__line {
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 166, 232, 0.1) 15%,
            rgba(0, 166, 232, 0.6) 40%,
            rgba(255, 107, 0, 0.6) 60%,
            rgba(0, 166, 232, 0.1) 85%,
            transparent 100%
    );
}

/* ===================================
   7. АНИМАЦИИ (опционально)
   =================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Анимация пульсации */
    .section-divider--pulse .section-divider__line {
        animation: dividerPulse 3s ease-in-out infinite;
    }

    @keyframes dividerPulse {
        0%, 100% {
            opacity: 0.6;
        }
        50% {
            opacity: 1;
        }
    }

    /* Анимация движения света */
    .section-divider--shine .section-divider__line::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%
        );
        animation: dividerShine 3s ease-in-out infinite;
    }

    @keyframes dividerShine {
        0% {
            left: -100%;
        }
        100% {
            left: 200%;
        }
    }
}

/* ===================================
   8. АДАПТИВНОСТЬ
   =================================== */
@media (max-width: 768px) {
    .section-divider--dot::after {
        width: 6px;
        height: 6px;
    }

    .section-divider--dot::before {
        width: 12px;
        height: 12px;
    }
}

/* ===================================
   9. ACCESSIBILITY
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .section-divider--pulse .section-divider__line,
    .section-divider--shine .section-divider__line::before {
        animation: none !important;
    }
}

@media (prefers-contrast: more) {
    .section-divider__line {
        background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(0, 166, 232, 0.2) 10%,
                rgba(0, 166, 232, 1) 50%,
                rgba(0, 166, 232, 0.2) 90%,
                transparent 100%
        );
    }
}

/* ===================================
   10. PRINT
   =================================== */
@media print {
    .section-divider {
        height: 1px;
        background: #ddd;
    }

    .section-divider__line,
    .section-divider::before,
    .section-divider::after {
        display: none;
    }
}

/* ===================================
   КОНЕЦ DIVIDERS.CSS
   =================================== */