/* ============================================
   3D Node Network Canvas Styles
   ============================================ */

/* Canvas positioning - absolutely positioned, peeking from left */
.node-network-canvas {
    position: absolute;
    left: 0;
    width: 35vw;
    height: 70lvh;
    z-index: 0;
    pointer-events: auto;
    transform: translateX(10%);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Ensure hero is positioned context */
#hero {
    position: relative;
}

/* Text content above canvas */
#hero h1,
#hero h2,
#hero p,
#hero #afirmations {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Responsive adjustments - move sphere left as screen gets narrower */
@media (max-width: 1650px) {
    .node-network-canvas {
        transform: translateX(0%);
    }
}

@media (max-width: 1450px) {
    .node-network-canvas {
        transform: translateX(-10%);
    }
}

@media (max-width: 1150px) {
    .node-network-canvas {
        transform: translateX(-20%);
    }
}

/* @media (max-width: 950px) {
    .node-network-canvas {
        transform: translateX(-50%);
    }
} */

/* Mobile - hide completely */
@media (max-width: 1030px) {
    .node-network-canvas {
        display: none;
    }
}