/* WebGPU backgrounds added by assets/js/shader-fx.js (canvas.fx-canvas). */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.fx-canvas.is-ready{opacity:1}

/* Home hero: bottom layer, under the orbit diagram (-3), its scrim (-2) and the glow (-1); dark theme only */
.hero > .fx-canvas{z-index:-4}
:root[data-theme="light"] .hero > .fx-canvas{display:none}

/* Auth overlay panel: canvas under the sliding track; a copy of the panel gradient
   cross-fades out once the shader has drawn its first frame. */
.overlay-wrap > .fx-canvas{z-index:0;transition:none}
.overlay-wrap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,#5E68E6,#3D47C9);opacity:1;transition:opacity 1.2s ease}
.overlay-wrap.fx-on::before{opacity:0}
.overlay-wrap > .overlay-track{z-index:2}
.overlay-wrap.fx-on > .overlay-track{background:transparent}

/* reduce-motion: shader-fx.js shows one still frame, so just skip the fades */
@media (prefers-reduced-motion: reduce){.fx-canvas,.overlay-wrap::before{transition:none}}