/* WebGL v2/v3 统一 Canvas 舞台 */

#gl-unified-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* 仅 Hero 内联渲染时不挂全屏层，避免 scissor 错位「图飞了」 */
body.gl-stage-active:not(.gl-unified-active) #gl-unified-canvas {
    display: none !important;
}

body.gl-stage-active .header {
    z-index: 1000;
}

/* 下拉打开时卡片提到最前，避免被邻卡或统一 Canvas 挡住 */
.product-card.is-menu-open {
    position: relative;
    z-index: 50;
    overflow: visible !important;
}

.product-card.is-menu-open .product-image {
    overflow: hidden;
}

body.gl-stage-active .product-card.is-menu-open .gl-stage .gl-fallback {
    opacity: 1;
    transition: none;
}

/* 静图卡片：fallback 必须可见 */
.products-section .gl-stage.gl-static .gl-fallback,
.products-section .gl-card-still.gl-static .gl-fallback {
    opacity: 1 !important;
}

/* 首页 Hero 用舞台内 canvas；产品卡仍走统一 Canvas scissor */
.gl-stage[data-gl-managed]:not([data-size="hero"]) .gl-canvas {
    display: none !important;
}

.gl-stage[data-gl-managed][data-size="hero"] .gl-canvas {
    display: block !important;
    opacity: 1;
}

.gl-stage.gl-ready .gl-canvas {
    opacity: 1;
}

.gl-stage.gl-static .gl-fallback {
    opacity: 1;
}

.gl-stage.gl-static .gl-canvas {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .gl-stage .gl-canvas {
        display: none !important;
    }

    .gl-stage .gl-fallback {
        opacity: 1 !important;
    }
}