/* Onyx Realms — shared background classes. Usage: … Pair with any one of: onyx-bg-radial | onyx-bg-prismatic | onyx-bg-shards | onyx-bg-grid | onyx-bg-aurora License: MIT (original artwork). */ .onyx-bg { background-color: #04020c; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; min-height: 100vh; } .onyx-bg-radial { background-image: url('/assets/img/bg/bg-onyx-radial.svg'); } .onyx-bg-prismatic { background-image: url('/assets/img/bg/bg-onyx-prismatic.svg'); } .onyx-bg-shards { background-image: url('/assets/img/bg/bg-onyx-shards.svg'); } .onyx-bg-grid { background-image: url('/assets/img/bg/bg-onyx-grid.svg'); } .onyx-bg-aurora { background-image: url('/assets/img/bg/bg-onyx-aurora.svg'); } /* Optional: subtle drift animation. Add .onyx-bg-drift to . */ @keyframes onyxBgDrift { 0% { background-position: 50% 48%; } 50% { background-position: 52% 52%; } 100% { background-position: 50% 48%; } } .onyx-bg-drift { animation: onyxBgDrift 24s ease-in-out infinite; } /* Helper for fixed full-bleed FX overlays (sparks, confetti containers, etc.) */ .onyx-fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }