/* =========================================================
   background.css — Fixed Canvas & Background Layers
   ========================================================= */

/* -------------------------------------------------------
   Canvas wrapper — full-screen fixed behind all content
------------------------------------------------------- */

.bg-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-canvas);
    pointer-events: none;
    overflow: hidden;
}

/* Main particle / network canvas */
#bg-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.7;
}

/* -------------------------------------------------------
   Layered ambient glow blobs
   Creates the "deep server room" atmosphere
------------------------------------------------------- */

.bg-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
    /* Top-left green ambient */
        radial-gradient(
            ellipse 60% 50% at 10% 15%,
            rgba(0, 255, 65, 0.04) 0%,
            transparent 60%
        ),
        /* Top-right purple accent */
        radial-gradient(
                ellipse 50% 40% at 90% 10%,
                rgba(124, 58, 237, 0.06) 0%,
                transparent 55%
            ),
        /* Center-bottom cyan bloom */
        radial-gradient(
                ellipse 70% 40% at 50% 100%,
                rgba(0, 229, 255, 0.03) 0%,
                transparent 60%
            );
    animation: drift 90s linear infinite alternate;
    pointer-events: none;
}

/* Scanline overlay — subtle CRT effect */
.bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.04) 3px,
        rgba(0, 0, 0, 0.04) 4px
    );
    pointer-events: none;
    opacity: 0.6;
}

/* -------------------------------------------------------
   Topology SVG decorative layer
   (topology.js overlays an SVG — these rules position it)
------------------------------------------------------- */

#topology-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-canvas);
    pointer-events: none;
    opacity: 0.45;
    filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.15));
}

/* Animated topology link lines */
.topology-link {
    stroke: var(--color-green);
    stroke-width: 1.5;
    fill: none;
    opacity: 0.5;
    filter: drop-shadow(0 0 2px rgba(0, 255, 65, 0.3));
}

.topology-link--active {
    animation: packet-pulse 3s ease-in-out infinite;
}

/* Topology node circles */
.topology-node {
    fill: var(--color-void);
    stroke: var(--color-green-40);
    stroke-width: 2;
    filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.4));
}

.topology-node--core {
    stroke: var(--color-cyan-40);
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5));
}

/* -------------------------------------------------------
   Scroll-driven vignette — darkens edges slightly
------------------------------------------------------- */

.vignette {
    position: fixed;
    inset: 0;
    z-index: var(--z-canvas);
    pointer-events: none;
    background: radial-gradient(
        ellipse 100% 100% at 50% 50%,
        transparent 55%,
        rgba(10, 10, 15, 0.5) 100%
    );
}

/* -------------------------------------------------------
   Section background accents
   Alternating sections get a faint navy tint
------------------------------------------------------- */

.section--about,
.section--contact {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(13, 17, 23, 0.75) 8%,
        rgba(13, 17, 23, 0.75) 92%,
        transparent 100%
    );
    /* Subtle left-edge accent line */
    border-left: none;
    position: relative;
}

.section--about::before,
.section--contact::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--color-green-20) 20%,
        var(--color-green-20) 80%,
        transparent
    );
    pointer-events: none;
}

.section--hero {
    /* Hero is fully transparent — lets the canvas shine through */
    background: transparent;
}

.section--skills {
    background: transparent;
}