/* ============================================================
   AIRBLOW EQUIPMENTS — 3D Laboratory Glassware Stage styles
   Scoped to #lab3d-stage. Bundled in style/lab3d.css.
   ============================================================ */

#lab3d-stage,
#lab3d-stage .hero-3d-body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#lab3d-stage {
    z-index: 2;
    cursor: grab;
    touch-action: pan-y;               /* mobile scroll still works */
    background:
        radial-gradient(120% 90% at 50% 10%, rgba(56, 189, 248, 0.10), transparent 60%),
        radial-gradient(140% 120% at 85% 90%, rgba(99, 102, 241, 0.10), transparent 55%),
        linear-gradient(180deg, rgba(240, 249, 255, 0.55), rgba(241, 245, 249, 0.25));
    isolation: isolate;
}

#lab3d-stage:active {
    cursor: grabbing;
}

/* Soft vignette to make the glass pop */
#lab3d-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(15, 23, 42, 0.18) 100%);
}

/* Very subtle shine sweep */
#lab3d-stage::before {
    content: '';
    position: absolute;
    inset: -50% -50%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
    transform: translateX(-70%);
    animation: lab3d-shine 9s ease-in-out infinite;
}

@keyframes lab3d-shine {
    0%, 60% { transform: translateX(-70%); }
    100% { transform: translateX(70%); }
}

/* WebGL-unavailable fallback: premium gradient + CSS flask outline */
#lab3d-stage.lab3d-fallback {
    background:
        radial-gradient(100% 100% at 50% 30%, rgba(56, 189, 248, 0.16), transparent 60%),
        linear-gradient(180deg, #e0f2fe, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}
#lab3d-stage.lab3d-fallback::before,
#lab3d-stage.lab3d-fallback::after {
    content: '';
    position: absolute;
    z-index: 1;
    background: rgba(56, 189, 248, 0.28);
    border-radius: 9999px;
}
#lab3d-stage.lab3d-fallback::before { /* flask body */
    width: 42%;
    height: 55%;
    bottom: 12%;
    animation: lab3d-float 4s ease-in-out infinite;
}
#lab3d-stage.lab3d-fallback::after { /* flask neck */
    width: 20%;
    height: 28%;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes lab3d-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Keep the host canvas fitting inside the rounded stage */
#lab3d-stage > canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: inherit;
}

/* Mobile refinement */
@media (max-width: 768px) {
    #lab3d-stage { touch-action: pan-y; }
    #lab3d-stage::before { animation-duration: 12s; }
    #lab3d-stage.lab3d-fallback::before { width: 52%; }
}