/**
 * 3D fiber network arka plan — perspektif, derinlik, okunabilirlik dengesi
 */

html {
    background-color: #060a12;
}

html[data-theme="light"] {
    background-color: #e8eef6;
}

body:not(.light-mode),
body.light-mode {
    background-color: transparent !important;
}

.network-bg {
    --net-x: 50vw;
    --net-y: 50vh;
    --net-shift-x: 0px;
    --net-shift-y: 0px;
    --net-tilt-x: 0deg;
    --net-tilt-y: 0deg;
    --net-glow-r: min(40vw, 380px);
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

body:not(.light-mode) .network-bg {
    background:
        radial-gradient(ellipse 100% 70% at 50% 0%, rgba(1, 177, 175, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 55% 40% at 100% 100%, rgba(0, 100, 140, 0.07) 0%, transparent 50%),
        linear-gradient(175deg, #050810 0%, #0a1018 50%, #060910 100%);
}

body.light-mode .network-bg {
    background:
        radial-gradient(ellipse 90% 65% at 50% -8%, rgba(1, 177, 175, 0.07) 0%, transparent 52%),
        linear-gradient(168deg, #eef2f7 0%, #e4ebf3 50%, #dde6ef 100%);
}

/* 3D sahne — canvas perspektif eğimi */
.network-bg__stage {
    position: absolute;
    inset: -5%;
    perspective: 1100px;
    perspective-origin: 50% 45%;
    z-index: 2;
}

.network-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.88;
    transform:
        rotateX(var(--net-tilt-x))
        rotateY(var(--net-tilt-y))
        translate3d(var(--net-shift-x), var(--net-shift-y), 0)
        scale(1.04);
    transform-style: preserve-3d;
    will-change: transform;
    filter: drop-shadow(0 0 28px rgba(1, 177, 175, 0.06));
}

body.light-mode .network-bg__canvas {
    opacity: 0.72;
    filter: drop-shadow(0 0 20px rgba(13, 148, 136, 0.05));
}

.network-bg__aurora {
    position: absolute;
    inset: -20%;
    z-index: 1;
    opacity: 0.38;
    background:
        radial-gradient(ellipse 50% 40% at 25% 35%, rgba(0, 236, 233, 0.07) 0%, transparent 68%),
        radial-gradient(ellipse 45% 35% at 78% 68%, rgba(1, 177, 175, 0.06) 0%, transparent 65%);
    transform: translate(
        calc((var(--net-x) - 50vw) * -0.05 + var(--net-shift-x)),
        calc((var(--net-y) - 50vh) * -0.05 + var(--net-shift-y))
    );
    animation: net-aurora-drift 20s ease-in-out infinite alternate;
}

body.light-mode .network-bg__aurora {
    opacity: 0.28;
}

@keyframes net-aurora-drift {
    0% { opacity: 0.32; transform: translate(calc((var(--net-x) - 50vw) * -0.05 + var(--net-shift-x)), calc((var(--net-y) - 50vh) * -0.05 + var(--net-shift-y))) scale(1); }
    100% { opacity: 0.42; transform: translate(calc((var(--net-x) - 50vw) * -0.06 + var(--net-shift-x)), calc((var(--net-y) - 50vh) * -0.06 + var(--net-shift-y))) scale(1.03); }
}

/* Derinlik sisi — 3D hissi */
.network-bg__depth-fog {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        radial-gradient(ellipse 70% 55% at 50% 55%, transparent 20%, rgba(5, 8, 14, 0.35) 100%),
        linear-gradient(180deg, rgba(5, 8, 14, 0.15) 0%, transparent 35%, transparent 65%, rgba(5, 8, 14, 0.25) 100%);
    pointer-events: none;
}

body.light-mode .network-bg__depth-fog {
    background:
        radial-gradient(ellipse 75% 60% at 50% 50%, transparent 25%, rgba(226, 232, 240, 0.2) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%, rgba(203, 213, 225, 0.1) 100%);
}

.network-bg__glow {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(
        circle var(--net-glow-r) at var(--net-x) var(--net-y),
        rgba(0, 236, 233, 0.1) 0%,
        rgba(1, 177, 175, 0.04) 28%,
        transparent 65%
    );
    mix-blend-mode: screen;
    opacity: 0.85;
}

body.light-mode .network-bg__glow {
    background: radial-gradient(
        circle var(--net-glow-r) at var(--net-x) var(--net-y),
        rgba(1, 177, 175, 0.08) 0%,
        rgba(13, 148, 136, 0.03) 30%,
        transparent 68%
    );
    mix-blend-mode: soft-light;
    opacity: 0.7;
}

.network-bg__vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: radial-gradient(
        ellipse 85% 75% at 50% 48%,
        transparent 38%,
        rgba(0, 0, 0, 0.32) 100%
    );
    opacity: 0.5;
}

body.light-mode .network-bg__vignette {
    background: radial-gradient(
        ellipse 88% 78% at 50% 45%,
        transparent 42%,
        rgba(148, 163, 184, 0.12) 100%
    );
    opacity: 0.45;
}

/* Hafif scrim — yazı okunabilirliği */
.network-bg__scrim {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: rgba(4, 6, 12, 0.2);
    pointer-events: none;
}

body.light-mode .network-bg__scrim {
    background: rgba(238, 242, 247, 0.14);
}

main,
.lux-loader {
    position: relative;
    z-index: 1;
}

body.nav-menu-open .network-bg,
body.mobile-menu-open .network-bg {
    opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
    .network-bg__aurora {
        animation: none;
    }

    .network-bg__canvas {
        transform: none;
    }
}

@media (max-width: 991px) {
    .network-bg {
        --net-glow-r: min(52vw, 300px);
    }

    .network-bg__canvas {
        opacity: 0.8;
    }
}

@media print {
    .network-bg {
        display: none !important;
    }
}