/* QD shared ambient background — aurora + drifting glows + panning grid + dust canvas.
   Self-contained: drop <link> + <script defer src="assets/bg-fx.js"> into any page.
   Everything animates transform/opacity only (GPU-composited, no layout/paint cost). */
.qd-bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.qd-bgfx .au{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;opacity:.5;mix-blend-mode:screen;background:conic-gradient(from 0deg,transparent 0deg,rgba(140,160,235,.05) 70deg,transparent 140deg,rgba(255,255,255,.04) 210deg,transparent 280deg,rgba(139,125,247,.045) 330deg,transparent 360deg);animation:qdAuSpin 60s linear infinite}
@keyframes qdAuSpin{to{transform:rotate(360deg)}}
.qd-bgfx .gl{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen}
.qd-bgfx .g1{width:760px;height:760px;left:-220px;top:-240px;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 62%);animation:qdDr1 14s cubic-bezier(.16,1,.3,1) infinite alternate,qdBr 9s ease-in-out infinite}
.qd-bgfx .g2{width:680px;height:680px;right:-200px;top:30%;background:radial-gradient(circle,rgba(150,170,255,.10),transparent 60%);animation:qdDr2 17s cubic-bezier(.16,1,.3,1) infinite alternate,qdBr 12s ease-in-out 2s infinite}
.qd-bgfx .g3{width:620px;height:620px;left:30%;bottom:-280px;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 62%);animation:qdDr1 21s cubic-bezier(.16,1,.3,1) infinite alternate,qdBr 11s ease-in-out 4s infinite}
@keyframes qdDr1{to{transform:translate(210px,130px) scale(1.2)}}
@keyframes qdDr2{to{transform:translate(-210px,110px) scale(1.16)}}
@keyframes qdBr{0%,100%{opacity:.75}50%{opacity:1}}
.qd-bgfx .gr{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:66px 66px;mask-image:radial-gradient(circle at 60% 14%,#000,transparent 72%);-webkit-mask-image:radial-gradient(circle at 60% 14%,#000,transparent 72%);animation:qdGridPan 16s linear infinite}
@keyframes qdGridPan{to{background-position:-66px -66px}}
.qd-bgfx canvas{position:absolute;inset:0;width:100%;height:100%}
.qd-bgfx video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.qd-bgfx video.on{opacity:.55}
@media(prefers-reduced-motion:reduce){.qd-bgfx .au,.qd-bgfx .gl,.qd-bgfx .gr{animation:none}.qd-bgfx canvas,.qd-bgfx video{display:none}}
