/* ========================================================================== Dual Launch — Ambient animated background (bg-fx) -------------------------------------------------------------------------- Shared across every HTML page. To use: And place at the top of : The script paints the sparks particles. CSS handles the rest. ========================================================================== */ .bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(18,84,204,0.10), transparent 60%), linear-gradient(180deg, #0B1221 0%, #0A0F1C 100%); } .bg-fx__aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; mix-blend-mode: screen; will-change: transform; } .bg-fx__aurora--a { width: 60vw; height: 60vw; left: -10vw; top: -15vw; background: radial-gradient(circle, rgba(18,84,204,0.55) 0%, rgba(26,106,255,0.20) 40%, transparent 70%); animation: aurora-a 28s ease-in-out infinite alternate; } .bg-fx__aurora--b { width: 55vw; height: 55vw; right: -12vw; top: 20vh; background: radial-gradient(circle, rgba(26,106,255,0.45) 0%, rgba(91,148,223,0.15) 45%, transparent 70%); animation: aurora-b 34s ease-in-out infinite alternate; } .bg-fx__aurora--c { width: 45vw; height: 45vw; left: 20vw; bottom: -15vw; background: radial-gradient(circle, rgba(240,168,30,0.18) 0%, rgba(240,168,30,0.05) 50%, transparent 75%); opacity: 0.4; animation: aurora-c 40s ease-in-out infinite alternate; } @keyframes aurora-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); } 100% { transform: translate3d(-2vw, 8vh, 0) scale(0.95); } } @keyframes aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-5vw, -3vh, 0) scale(1.10); } 100% { transform: translate3d(3vw, 5vh, 0) scale(0.92); } } @keyframes aurora-c { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.35; } 50% { transform: translate3d(-4vw, -6vh, 0) scale(1.15); opacity: 0.5; } 100% { transform: translate3d(5vw, 0, 0) scale(0.95); opacity: 0.30; } } .bg-fx__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%); animation: grid-drift 60s linear infinite; } @keyframes grid-drift { to { background-position: 80px 80px; } } .bg-fx__grain { position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.025; pointer-events: none; animation: grain 8s steps(6) infinite; } @keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-2%, 1%); } 40% { transform: translate(1%, -2%); } 60% { transform: translate(-1%, 2%); } 80% { transform: translate(2%, -1%); } 100% { transform: translate(0,0); } } .bg-fx__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .bg-fx__aurora, .bg-fx__grid, .bg-fx__grain { animation: none !important; } .bg-fx__sparks { display: none; } }