/* ============================================================ SOCOTECO-I — Animated Background CSS Pair with bg-animation.js Required HTML structure: -------------------------------------------------------

------------------------------------------------------- The canvas MUST be the first child of . ============================================================ */ /* Page base — dark navy so the canvas colour matches */ body { background: #001433; position: relative; /* * overflow-x: clip (not hidden) keeps the canvas from breaking * position:fixed children such as navbars and modals. */ overflow-x: clip; } /* Dark-mode variant (Bootstrap data-bs-theme="dark") */ [data-bs-theme="dark"] body { background: #000d1f; } /* ── The canvas sits behind everything, fixed to the viewport ── */ #bg-canvas { position: fixed; inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */ width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* * Lift ALL direct children of above the canvas. * Exceptions: * • #bg-canvas itself (stays at z-index:0) * • Any modal overlay you manually set to z-index:9999999 */ body > *:not(#bg-canvas) { position: relative; z-index: 1; } /* * ── If you use modals / overlays ── * Make sure they have a z-index higher than 1, e.g.: * * .your-modal-overlay { * position: fixed; * z-index: 9999; * } * * ── If you use a floating action button ── * .messenger-btn, .fab { * position: fixed; * z-index: 9998; <- below modals, above page content * } */