/* ==========================================================
   WWMS NETWORK BACKGROUND
========================================================== */

#network-bg{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

/* ==========================================================
   SVG
========================================================== */

#network-svg{

    width:100%;

    height:100%;

    display:block;

}

/* ==========================================================
   CONNECTION LINE
========================================================== */

.network-line{

    stroke:#00D8FF;

    stroke-width:1;

    stroke-opacity:.12;

    fill:none;

    transition:
        stroke-opacity .25s,
        stroke-width .25s;

}

.network-line.active{

    stroke:#5DFF00;

    stroke-width:2;

    stroke-opacity:.9;

    filter:url(#glow);

}

/* ==========================================================
   NODE
========================================================== */

.network-node{

    position:absolute;

    width:8px;

    height:8px;

    margin-left:-4px;

    margin-top:-4px;

    border-radius:50%;

    background:#00D8FF;

    box-shadow:
        0 0 8px rgba(0,216,255,.8),
        0 0 18px rgba(0,216,255,.4);

    opacity:.8;

    transition:
        transform .2s;

}

/* ==========================================================
   NODE GLOW
========================================================== */

.network-node::after{

    content:"";

    position:absolute;

    left:-6px;

    top:-6px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:rgba(0,216,255,.08);

}

/* ==========================================================
   DATA PULSE
========================================================== */

.network-pulse{

    position:absolute;

    width:7px;

    height:7px;

    margin-left:-3px;

    margin-top:-3px;

    border-radius:50%;

    background:#5DFF00;

    box-shadow:

        0 0 8px #5DFF00,

        0 0 18px rgba(93,255,0,.7);

}

/* ==========================================================
   GRID GLOW
========================================================== */

.network-glow{

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,216,255,.06),

            transparent 70%

        );

    filter:blur(20px);

}

/* ==========================================================
   FADE
========================================================== */

.network-fade{

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            transparent 30%,

            rgba(7,17,27,.18) 80%,

            rgba(7,17,27,.65)

        );

}

/* ==========================================================
   NODE PULSE
========================================================== */

@keyframes nodePulse{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.6);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.7;

    }

}

.network-node.active{

    animation:nodePulse .8s ease;

}

/* ==========================================================
   BREATHING
========================================================== */

@keyframes breathing{

    0%{

        opacity:.08;

    }

    50%{

        opacity:.18;

    }

    100%{

        opacity:.08;

    }

}

.network-line{

    animation:breathing 6s infinite;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .network-node{

        width:6px;

        height:6px;

        margin-left:-3px;

        margin-top:-3px;

    }

    .network-pulse{

        width:5px;

        height:5px;

        margin-left:-2px;

        margin-top:-2px;

    }

    .network-line{

        stroke-width:.8;

        stroke-opacity:.08;

    }

}

/* ==========================================================
   REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce){

    .network-line{

        animation:none;

    }

}