/* ============================================
   Curved Section Dividers
   Zencia.AI Theme - Elegant section transitions
   ============================================ */

/* ===== BASE DIVIDER STYLES ===== */
.section-divider {
    position: relative;
    height: 100px;
    overflow: hidden;
}

/* ===== WAVE DIVIDER (Top) ===== */
.wave-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.wave-divider-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 70%);
}

/* ===== CURVE DIVIDER (Smooth arc) ===== */
.curve-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

.curve-divider svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ===== TILT DIVIDER (Diagonal) ===== */
.tilt-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: currentColor;
    transform: skewY(-2deg);
    transform-origin: top left;
}

/* ===== SECTION-SPECIFIC DIVIDERS ===== */

/* Hero to Languages transition */
.hero-to-languages {
    background: linear-gradient(135deg, #000000 0%, #0a1a1a 100%);
    color: #0f1419;
}

/* Languages to Action Demo transition */
.languages-to-action {
    background: linear-gradient(135deg, #0f1419 0%, #082928 100%);
    color: #000000;
}

/* Action Demo to Dashboard Demo transition */
.action-to-dashboard {
    background: linear-gradient(135deg, #000000 0%, #0a1a1a 100%);
    color: #0a1a1a;
}

/* Dashboard Demo to Industry Demo transition */
.dashboard-to-industry {
    background: linear-gradient(135deg, #0a1a1a 0%, #000000 100%);
    color: #1a1a1a;
}

/* Industry Demo to Applications transition */
.industry-to-applications {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f1419 100%);
    color: #0f1419;
}

/* Applications to Integrations transition */
.applications-to-integrations {
    background: linear-gradient(135deg, #0f1419 0%, #082928 100%);
    color: #0f1419;
}

/* Integrations to Footer transition */
.integrations-to-footer {
    background: linear-gradient(135deg, #082928 0%, #000000 100%);
    color: #000000;
}

/* ===== ANIMATED DIVIDERS ===== */
.animated-divider {
    animation: dividerFlow 8s ease-in-out infinite;
}

@keyframes dividerFlow {
    0%, 100% {
        transform: translateX(0) scaleX(1);
    }
    50% {
        transform: translateX(2px) scaleX(1.01);
    }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .section-divider {
        height: 60px;
    }
    
    .wave-divider-top,
    .curve-divider,
    .tilt-divider {
        height: 60px;
    }
    
    .tilt-divider {
        transform: skewY(-1deg);
    }
}

@media (max-width: 480px) {
    .section-divider {
        height: 40px;
    }
    
    .wave-divider-top,
    .curve-divider,
    .tilt-divider {
        height: 40px;
    }
    
    .tilt-divider {
        transform: skewY(-0.5deg);
    }
}