/* ============================================================
   HERO 3D BACKGROUND — Three.js Canvas Layer
   Premium ambient sphere animation behind hero content
   ============================================================ */

/* Canvas — fills hero, sits behind content */
#hero-3d-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero-3d-canvas.loaded {
    opacity: 1;
}

/* Ensure hero content stays above the canvas */
.hero {
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Soft readability veil behind hero text block */
.hero-content::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: calc(100% - 200px);
    /* Don't cover the mockup */
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.08) 40%,
            transparent 75%);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}

/* Prevent canvas from capturing scrolls on touch devices */
#hero-3d-canvas canvas {
    touch-action: none;
}

/* -------- Responsive Adjustments -------- */
@media (max-width: 768px) {
    #hero-3d-canvas {
        opacity: 0;
        /* will fade in via JS */
    }

    #hero-3d-canvas.loaded {
        opacity: 0.8;
    }

    /* Stronger readability veil on mobile */
    .hero-content::before {
        width: 130%;
        background: radial-gradient(ellipse at center,
                rgba(0, 0, 0, 0.2) 0%,
                rgba(0, 0, 0, 0.1) 50%,
                transparent 80%);
    }
}

@media (max-width: 480px) {
    #hero-3d-canvas.loaded {
        opacity: 0.65;
    }
}