/* Digital Edge terminal datascape - presentation layer.
   Every rule is scoped under html.edge3d-on, which is only added once the
   WebGL scene has successfully booted. Without it (no WebGL2, reduced
   motion, old browser, JS off) the site renders exactly as before. */

#edge3d-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
}

html.edge3d-on #edge3d-canvas.is-live {
    opacity: 1;
}

/* Lift page content above the canvas. The header is already fixed z-50 and
   the legal modals are fixed z-[100]; both stay above everything. */
html.edge3d-on main,
html.edge3d-on footer {
    position: relative;
    z-index: 1;
}

/* Content sections become glassy terminal panels so the world shows through.
   Scoped to main only: the header, its Products dropdown, the mobile menu,
   the footer and the legal modals all keep their solid surfaces.
   Backdrop blur is applied at section level only; nested chips and cards get
   translucency without their own (expensive) blur layer. */
html.edge3d-on main .bg-brand-background {
    background-color: color-mix(in srgb, var(--brand-background) 72%, transparent);
}

html.edge3d-on main .bg-brand-surface {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, transparent);
}

html.edge3d-on main section.bg-brand-background,
html.edge3d-on main section.bg-brand-surface {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* The hero is the marquee moment: fully transparent so the world shows
   through crisp behind the headline. */
html.edge3d-on main > section:first-child,
html.edge3d-on main > section:first-child.bg-brand-background {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Low-tier devices skip backdrop blur (expensive on weak GPUs) and lean on
   higher panel opacity instead. */
html.edge3d-on.edge3d-lowtier main .bg-brand-background {
    background-color: color-mix(in srgb, var(--brand-background) 88%, transparent);
}

html.edge3d-on.edge3d-lowtier main .bg-brand-surface {
    background-color: color-mix(in srgb, var(--brand-surface) 92%, transparent);
}

html.edge3d-on.edge3d-lowtier main section.bg-brand-background,
html.edge3d-on.edge3d-lowtier main section.bg-brand-surface {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Retire the 2D stand-ins for things the scene now renders in 3D. They stay
   in the markup and keep working whenever the scene does not boot. */
html.edge3d-on .grid-motif,
html.edge3d-on .nodes-motif,
html.edge3d-on .hero-glow {
    display: none;
}