/* === BUFICIAL: Global repeating background — single painter === */ :root { --global-bg: url("/assets/img/backgrounds/Buficial_Website_Background.png"); --bg-color: #0a0b0f; } /* Paint the wallpaper ONCE on (the script reads from here) */ html { background-color: var(--bg-color); background-image: var(--global-bg); background-repeat: repeat; background-position: 0 0; background-size: 394px auto !important; /* half-scale tile */ background-attachment: scroll; /* wallpaper scrolls with page */ } /* Body is transparent so the wallpaper shows through */ body { margin: 0; min-height: 100vh; background: transparent !important; } /* Make common wrappers transparent so the tile shows through */ header, .site-header, main, footer, section, article, aside, nav, div, .container, .content, .wrapper { background: transparent !important; background-image: none !important; } /* Optional: readability film for your own content wrappers (tweak/remove) */ .card, .panel, .glass, .box { background: rgba(0, 0, 0, 0.02); } /* Teal glow canvas (bass-driven; CSS pulse is a safe fallback before audio unlocks) */ #blue-glow-overlay{ position: fixed; inset: 0; pointer-events: none; z-index: 9999; mix-blend-mode: screen; animation: glowPulse 1s linear infinite; /* disabled by JS once audio starts */ } @keyframes glowPulse{ 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* (Optional) Tracer layer above glow, also screen-blended */ #trace-overlay{ position: fixed; inset: 0; pointer-events: none; z-index: 10000; /* above #blue-glow-overlay (9999) */ mix-blend-mode: screen; /* additive look over background */ } /* Sensible defaults */ *, *::before, *::after { box-sizing: border-box; }