/*
 * Hero WebGL layer. The canvas is absolutely positioned over the fallback
 * image and only fades in once the first frame has actually drawn, so a
 * browser without WebGL (or a device that bails out) keeps the static art
 * with no flash of empty space.
 */
.hero-image-3d{position:relative}

.hero-gem{
    position:absolute;inset:0;z-index:2;
    pointer-events:none;              /* never blocks the hero buttons */
    opacity:0;transition:opacity 1s ease .1s;
}
.hero-gem.is-live{opacity:1}
.hero-gem-canvas{display:block;width:100%;height:100%}

/* soft brand glow, only once the canvas is actually live */
.hero-gem::before{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:70%;aspect-ratio:1/1;border-radius:50%;
    background:radial-gradient(circle,rgba(111,160,111,.26) 0%,rgba(111,160,111,.08) 48%,rgba(111,160,111,0) 70%);
    filter:blur(30px);
}

/* the static art fades out only when the gem has drawn */
.hero-image-3d:has(.hero-gem.is-live) .floating-image{opacity:0;transition:opacity .8s ease}
/* no :has() support — keep both, the canvas simply layers over the image */
@supports not selector(:has(*)){
    .hero-image-3d .floating-image{opacity:1}
}