/* ============================================================
   SIDAKEP - Digital Constellation Background
   Nuansa IT: rasi bintang, network nodes, circuit glow, data stream
   Warna: biru tua ke biru cerah (sesuai tema SIDAKEP)
   ============================================================ */

:root {
    --bg-deep:    #0d1f3c;
    --bg-mid:     #0d2b5e;
    --bg-light:   #1250a0;
    --node-glow:  #4fc3f7;
    --node-dim:   #1e6fa8;
    --line-color: rgba(79, 195, 247, 0.18);
    --accent:     #00e5ff;
    --accent2:    #1565c0;
}

/* ---- Body ---- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-deep);    position: relative;
    overflow: hidden;
}

/* ---- Canvas Rasi Bintang (diisi JS) ---- */
#constellation-canvas {
    position: fixed;
    inset: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

/* ---- Gradient Overlay di atas canvas ---- */
#bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -9;
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(18, 80, 160, 0.20) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(21, 101, 192, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 50%, rgba(13, 43, 94, 0.4) 0%, transparent 100%);
    pointer-events: none;
}

/* ---- Circuit Board Lines (SVG pattern via CSS) ---- */
#circuit-layer {
    position: fixed;
    inset: 0;
    z-index: -8;
    pointer-events: none;
    opacity: 0.07;
    background-image:
        /* horizontal traces */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 59px,
            rgba(79, 195, 247, 0.6) 59px,
            rgba(79, 195, 247, 0.6) 60px
        ),
        /* vertical traces */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 59px,
            rgba(79, 195, 247, 0.6) 59px,
            rgba(79, 195, 247, 0.6) 60px
        );
    background-size: 60px 60px;
}

/* ---- Nodes di circuit grid (titik-titik pertemuan) ---- */
#circuit-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(79, 195, 247, 0.5) 1.5px, transparent 1.5px);
    background-size: 60px 60px;
    background-position: 0 0;
}

/* ---- Scanline / Data Stream effect ---- */
#scanline {
    position: fixed;
    inset: 0;
    z-index: -7;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(4, 16, 31, 0.08) 3px,
        rgba(4, 16, 31, 0.08) 4px
    );
}

/* ---- Vertical Data Stream Lines ---- */
.data-stream {
    position: fixed;
    top: -100%;
    width: 1px;
    height: 200%;
    z-index: -6;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--node-glow) 40%,
        var(--accent) 50%,
        var(--node-glow) 60%,
        transparent 100%
    );
    opacity: 0;
    animation: dataStream linear infinite;
}

.data-stream:nth-of-type(1)  { left: 5%;   animation-duration: 6s;   animation-delay: 0s;     width: 1px; }
.data-stream:nth-of-type(2)  { left: 13%;  animation-duration: 9s;   animation-delay: -3s;    width: 1px; }
.data-stream:nth-of-type(3)  { left: 22%;  animation-duration: 7s;   animation-delay: -1.5s;  width: 2px; }
.data-stream:nth-of-type(4)  { left: 31%;  animation-duration: 11s;  animation-delay: -5s;    width: 1px; }
.data-stream:nth-of-type(5)  { left: 40%;  animation-duration: 8s;   animation-delay: -2s;    width: 1px; }
.data-stream:nth-of-type(6)  { left: 50%;  animation-duration: 10s;  animation-delay: -7s;    width: 2px; }
.data-stream:nth-of-type(7)  { left: 60%;  animation-duration: 6.5s; animation-delay: -4s;    width: 1px; }
.data-stream:nth-of-type(8)  { left: 70%;  animation-duration: 12s;  animation-delay: -1s;    width: 1px; }
.data-stream:nth-of-type(9)  { left: 80%;  animation-duration: 7.5s; animation-delay: -6s;    width: 2px; }
.data-stream:nth-of-type(10) { left: 91%;  animation-duration: 9.5s; animation-delay: -8s;    width: 1px; }

@keyframes dataStream {
    0%   { transform: translateY(-50%); opacity: 0; }
    5%   { opacity: 0.6; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(50%); opacity: 0; }
}

/* ---- Glowing Pulse Rings (seperti sinyal/ping) ---- */
.pulse-ring {
    position: fixed;
    border-radius: 50%;
    border: 1px solid var(--node-glow);
    z-index: -5;
    pointer-events: none;
    animation: pulseRing ease-out infinite;
    opacity: 0;
}

.pulse-ring:nth-child(1) { width: 6px; height: 6px; top: 22%; left: 15%;  animation-duration: 4s;  animation-delay: 0s; }
.pulse-ring:nth-child(2) { width: 6px; height: 6px; top: 55%; left: 72%;  animation-duration: 5s;  animation-delay: -1.5s; }
.pulse-ring:nth-child(3) { width: 6px; height: 6px; top: 78%; left: 30%;  animation-duration: 4.5s;animation-delay: -3s; }
.pulse-ring:nth-child(4) { width: 6px; height: 6px; top: 38%; left: 88%;  animation-duration: 6s;  animation-delay: -2s; }
.pulse-ring:nth-child(5) { width: 6px; height: 6px; top: 12%; left: 55%;  animation-duration: 3.5s;animation-delay: -0.5s; }
.pulse-ring:nth-child(6) { width: 6px; height: 6px; top: 65%; left: 48%;  animation-duration: 5.5s;animation-delay: -4s; }

@keyframes pulseRing {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; box-shadow: 0 0 6px var(--node-glow); }
    70%  { transform: translate(-50%, -50%) scale(18);  opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* ---- Titik Node Bercahaya ---- */
.node-dot {
    position: fixed;
    border-radius: 50%;
    z-index: -4;
    pointer-events: none;
    background: var(--node-glow);
    box-shadow: 0 0 6px 2px var(--node-glow), 0 0 12px 4px rgba(79, 195, 247, 0.4);
    animation: nodeBlink ease-in-out infinite;
}

.node-dot:nth-child(1)  { width:4px; height:4px; top:22%; left:15%;  animation-duration:3.5s; animation-delay:0s; }
.node-dot:nth-child(2)  { width:3px; height:3px; top:55%; left:72%;  animation-duration:4.2s; animation-delay:-1.5s; }
.node-dot:nth-child(3)  { width:5px; height:5px; top:78%; left:30%;  animation-duration:3.0s; animation-delay:-3s; }
.node-dot:nth-child(4)  { width:3px; height:3px; top:38%; left:88%;  animation-duration:5.0s; animation-delay:-2s; }
.node-dot:nth-child(5)  { width:4px; height:4px; top:12%; left:55%;  animation-duration:2.8s; animation-delay:-0.5s; }
.node-dot:nth-child(6)  { width:3px; height:3px; top:65%; left:48%;  animation-duration:4.5s; animation-delay:-4s; }
.node-dot:nth-child(7)  { width:4px; height:4px; top:90%; left:60%;  animation-duration:3.8s; animation-delay:-1s; }
.node-dot:nth-child(8)  { width:2px; height:2px; top:45%; left:22%;  animation-duration:6.0s; animation-delay:-2.5s; }
.node-dot:nth-child(9)  { width:3px; height:3px; top:30%; left:40%;  animation-duration:4.8s; animation-delay:-3.5s; }
.node-dot:nth-child(10) { width:5px; height:5px; top:70%; left:82%;  animation-duration:3.2s; animation-delay:-0.8s; }
.node-dot:nth-child(11) { width:3px; height:3px; top:5%;  left:80%;  animation-duration:5.5s; animation-delay:-5s; }
.node-dot:nth-child(12) { width:4px; height:4px; top:50%; left:5%;   animation-duration:4.0s; animation-delay:-1.2s; }

@keyframes nodeBlink {
    0%, 100% { opacity: 0.3; transform: scale(0.8); box-shadow: 0 0 4px 1px var(--node-glow); }
    50%       { opacity: 1;   transform: scale(1.3); box-shadow: 0 0 10px 4px var(--node-glow), 0 0 20px 8px rgba(79,195,247,0.3); }
}

/* ---- Floating Binary / Code Text ---- */
.float-code {
    position: fixed;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(79, 195, 247, 0.18);
    z-index: -3;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 2px;
    animation: floatCode linear infinite;
}

/* Posisi float-code dihandle via inline style di blade */

@keyframes floatCode {
    0%   { opacity: 0; transform: translateY(0); }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-30px); }
}