/* ============================================================
   WEB3D — 3D UI LAYER (content-preserving, UI only)
   Adds: fixed 3D background, depth stacking, interactive tilt
   ============================================================ */

/* --- Global fixed 3D background canvas --- */
#globe3d {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
    opacity: 0;                 /* fades in once JS starts */
    transition: opacity 1.2s ease;
}
#globe3d.ready { opacity: 0.85; }

/* Subtle vignette so text over the 3D layer stays readable */
.web3d-vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 38%, transparent 0%, transparent 42%, rgba(5,8,16,0.45) 100%),
        linear-gradient(180deg, rgba(5,8,16,0.25) 0%, transparent 18%, transparent 82%, rgba(5,8,16,0.35) 100%);
}

/* --- Keep ALL real content above the 3D layer --- */
/* Static sections need a stacking context above the canvas */
#home, #about, #education, #cde-journey, #skills, #publications,
#experience, #projects, #conferences, #certificates, #volunteering, #contact,
footer {
    position: relative;
    z-index: 1;
}
/* Already-positioned overlays: raise z-index ONLY (never change position) */
.navbar { z-index: 1000; }
.back-to-top { z-index: 999; }
.flags-container { z-index: 50; }
.loader { z-index: 9999; }
.ss-modal { z-index: 10000; }

/* --- Depth: give grids a shared perspective so card tilt reads as 3D --- */
.courses-grid, .ss-grid, .cde-highlights, .hero-stats,
.skills-grid, .pubs-grid, .exp-grid, .certs-grid,
.contact-grid, .conf-list, .skills-container {
    perspective: 1100px;
    perspective-origin: 50% 40%;
}

/* --- Tilt base (desktop pointer only) --- */
@media (hover: hover) and (pointer: fine) {
    .tilt-3d {
        transform-style: preserve-3d;
        will-change: transform;
    }
    /* soft moving sheen driven by JS custom props */
    .tilt-3d::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
        background: radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0) 42%
        );
        mix-blend-mode: screen;
        z-index: 3;
    }
    .tilt-3d.tilting::after { opacity: 1; }
}

/* Give the hero image real depth on pointer move */
.hero-image, .hero-content { will-change: transform; }
.image-wrapper { transform-style: preserve-3d; }

/* --- Respect reduced motion / touch: flatten everything --- */
@media (prefers-reduced-motion: reduce) {
    #globe3d.ready { opacity: 0.5; }
    .tilt-3d { transform: none !important; }
    .tilt-3d::after { display: none; }
}