/* ============================================
   3D INDUSTRIAL SECTION DIVIDER - WAVEFORM/ELECTRICAL FLOW
   ============================================ */

.section-divider {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    z-index: 10;
}

/* Main Waveform Container */
.divider-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* SVG Waveform Path */
.divider-wave svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Primary Wave - Metallic Gradient */
.wave-primary {
    fill: url(#waveGradient);
    filter: drop-shadow(0 -4px 8px rgba(6, 3, 141, 0.3));
}

/* Secondary Wave - Subtle Overlay */
.wave-secondary {
    fill: url(#waveGradientSecondary);
    opacity: 0.6;
    filter: drop-shadow(0 -2px 4px rgba(242, 129, 32, 0.2));
}

/* Electrical Flow Line */
.flow-line {
    stroke: url(#flowGradient);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(242, 129, 32, 0.6));
    animation: flowPulse 3s ease-in-out infinite;
}

/* Geometric Edge Accents */
.edge-accent {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(242, 129, 32, 0.4) 20%, 
        rgba(242, 129, 32, 0.8) 50%, 
        rgba(242, 129, 32, 0.4) 80%, 
        transparent 100%);
    box-shadow: 0 0 10px rgba(242, 129, 32, 0.5);
}

/* Energy Nodes */
.energy-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #F28120;
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(242, 129, 32, 0.8),
        0 0 20px rgba(242, 129, 32, 0.4);
    animation: nodePulse 2s ease-in-out infinite;
}

.energy-node:nth-child(1) {
    bottom: 40%;
    left: 15%;
    animation-delay: 0s;
}

.energy-node:nth-child(2) {
    bottom: 60%;
    left: 50%;
    animation-delay: 0.7s;
}

.energy-node:nth-child(3) {
    bottom: 45%;
    left: 85%;
    animation-delay: 1.4s;
}

/* Animations */
@keyframes flowPulse {
    0%, 100% {
        stroke-dashoffset: 0;
        opacity: 0.8;
    }
    50% {
        stroke-dashoffset: 20;
        opacity: 1;
    }
}

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
        box-shadow: 
            0 0 15px rgba(242, 129, 32, 1),
            0 0 30px rgba(242, 129, 32, 0.6);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-divider {
        height: 80px;
    }
    
    .energy-node {
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .section-divider {
        height: 60px;
    }
    
    .energy-node {
        width: 4px;
        height: 4px;
    }
}