/* =====================================================
   Three.js Animations - Khan Electrical Services
   ===================================================== */

/* ─── Global background canvas (three-bg.js) ───
   Sits at z-index:0, all real body content at z-index:1 (injected inline) */
#khan-three-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
}

/* ─── Hero-specific canvas (index.html only, threejs-scene.js) ───
   Inside .hero which is position:relative, so absolute works fine. */
.hero {
    position: relative;
    overflow: hidden;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Ensure hero content (text, buttons) stays above canvases */
.hero > *:not(#hero-canvas):not(.blob) {
    position: relative;
    z-index: 3;
}

.hero .blob {
    z-index: 1;
}