/* ============================================
   HERO INK EFFECT - Premium WebGL Overlay
   ============================================ */

/* Container for WebGL canvas - fills hero section */
#hero-inkfx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#hero-inkfx canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ensure hero content stays above effect */
#hero {
    position: relative;
}

#hero > div:not(#hero-inkfx) {
    position: relative;
    z-index: 10;
}