/* ════════════════════════════════════════════════════════════════════════ BOYDLee Studio — FX FIELD · boydlee-fx-field.css · v1 The MOVING BACKGROUND FIELD + the sig-beam CTA ring, lifted out of boydlee-fx.css so pages built on offer-pages.css (and audit-intake's own inline system) can carry the same depth without importing the whole FX system. Deliberately NOT the full file: boydlee-fx.css redefines --silver-3 / --silver-4, .btn, .btn-primary and .holo-text, which would fight offer-pages.css. Nothing here redeclares a token either file owns. Load AFTER the page's base stylesheet. DIALS (set on ): --bg-intensity 0–1, overall field opacity (default 0.45) --field-hue dominant orb colour; omit for the neutral 4-colour mix Spectrum only — ruby and jade stay out of the field entirely. ════════════════════════════════════════════════════════════════════════ */ @property --angle { syntax:''; initial-value:0deg; inherits:false; } .bg-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--bg-intensity, 0.45); transition: opacity .4s ease; } .bg-parallax { position: absolute; left: 0; right: 0; top: 0; height: 100%; will-change: transform; } .bg-field .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; } .drift-orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; } /* Aurora is the default field: its motion is pure transform, so it is the one layer that satisfies the studio motion law without qualification. */ .layer-aurora .o1 { background: var(--field-hue, var(--sapphire, #0070f3)); width: 48vw; height: 48vw; top:-12%; left:-6%; opacity:0.075; animation: drift-a 26s ease-in-out infinite; } .layer-aurora .o2 { background: var(--amethyst, #9944FF); width: 44vw; height: 44vw; top:28%; right:-8%; opacity:0.065; animation: drift-b 31s ease-in-out infinite; } .layer-aurora .o3 { background: var(--cyan, #00dfd8); width: 40vw; height: 40vw; bottom:-14%; left:24%; opacity:0.055; animation: drift-c 24s ease-in-out infinite; } .layer-aurora .o4 { background: var(--field-hue, var(--magenta, #ff0080)); width: 36vw; height: 36vw; top:52%; left:6%; opacity:0.05; animation: drift-a 33s ease-in-out infinite reverse; } .layer-bars { background: linear-gradient(60deg, transparent 10%, rgba(0,223,216,0.04) 25%, transparent 40%, rgba(153,68,255,0.04) 60%, transparent 75%, rgba(0,112,243,0.035) 90%, transparent); background-size: 250% 250%; filter: blur(48px); animation: pan-bars 34s linear infinite; } .layer-grid { background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 46px 46px; animation: pan-grid 26s linear infinite; } .layer-mesh { background: radial-gradient(40% 50% at 20% 30%, rgba(0,112,243,0.075), transparent 70%), radial-gradient(40% 50% at 80% 25%, rgba(153,68,255,0.07), transparent 70%), radial-gradient(45% 55% at 62% 78%, rgba(0,223,216,0.06), transparent 70%), radial-gradient(40% 50% at 32% 75%, rgba(255,0,128,0.055), transparent 70%); background-size: 200% 200%; filter: blur(40px); animation: pan-mesh 42s ease-in-out infinite; } .layer-dots { background-image: radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.6px); background-size: 30px 30px; animation: pan-dots 24s linear infinite; } .layer-beams { inset: -50%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(0,112,243,0.03) 28deg, transparent 60deg, transparent 168deg, rgba(153,68,255,0.03) 200deg, transparent 240deg, transparent 330deg, rgba(0,223,216,0.025) 352deg, transparent 360deg); filter: blur(34px); animation: spin-slow 55s linear infinite; } .layer-waves { background: repeating-linear-gradient(45deg, transparent 0 42px, rgba(0,223,216,0.0225) 42px 84px, transparent 84px 126px, rgba(153,68,255,0.0225) 126px 168px); background-size: 220% 220%; filter: blur(10px); animation: pan-waves 30s linear infinite; } @keyframes pan-mesh { 0%,100%{background-position:0% 0%} 50%{background-position:100% 100%} } @keyframes pan-dots { to { background-position: 30px 30px; } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes pan-waves { to { background-position: 220% 220%; } } @keyframes pan-bars { to { background-position: 250% 0; } } @keyframes pan-grid { to { background-position: 46px 46px; } } @keyframes drift-a { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,40px) scale(1.1)} 66%{transform:translate(-40px,70px) scale(0.95)} } @keyframes drift-b { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-70px,-50px) scale(1.05)} 66%{transform:translate(50px,-30px) scale(1.15)} } @keyframes drift-c { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-60px) scale(1.2)} } body[data-bg="aurora"] .layer-aurora { opacity: 1; } body[data-bg="mesh"] .layer-mesh { opacity: 1; } body[data-bg="bars"] .layer-bars { opacity: 1; } body[data-bg="waves"] .layer-waves { opacity: 1; } body[data-bg="beams"] .layer-beams { opacity: 1; } body[data-bg="grid"] .layer-grid { opacity: 1; } body[data-bg="dots"] .layer-dots { opacity: 1; } body[data-bg="off"] .bg-field { opacity: 0 !important; } /* Only the field actually on screen is allowed to burn frames. */ .bg-field .layer, .bg-field .drift-orb { animation-play-state: paused; } body[data-bg="aurora"] .layer-aurora, body[data-bg="aurora"] .layer-aurora .drift-orb, body[data-bg="mesh"] .layer-mesh, body[data-bg="bars"] .layer-bars, body[data-bg="waves"] .layer-waves, body[data-bg="beams"] .layer-beams, body[data-bg="grid"] .layer-grid, body[data-bg="dots"] .layer-dots { animation-play-state: running; } /* The blurred conic beam is the most expensive layer in the set — phones never render it, whatever data-bg says. */ @media (max-width: 767px) { .layer-beams { display: none; } /* Phones never render the live hero scene, and the four blur(72px) orbs are the next-heaviest thing on any page, so they hold still there. */ .layer-aurora .drift-orb { animation-play-state: paused; } } /* ════════════════════════════════════════════════════════════════════════ SIG-BEAM — the always-on rotating spectrum ring on a primary CTA. Draws inside the host button's own border, so a gold-bordered .btn-primary keeps its gold edge and gains the holo ring; gold never joins the spectrum. ════════════════════════════════════════════════════════════════════════ */ .sig-beam { position: relative; } .sig-beam::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--angle), transparent 0deg, transparent 248deg, var(--cyan, #00dfd8) 288deg, var(--sapphire, #0070f3) 318deg, rgba(0,0,0,0.92) 333deg, var(--amethyst, #9944FF) 348deg, var(--magenta, #ff0080) 357deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 3s linear infinite; } @keyframes spin { to { --angle: 360deg; } } /* ════════════════════════════════════════════════════════════════════════ Accessibility — the field and the ring both freeze. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .bg-field .layer, .bg-field .drift-orb, .bg-parallax, .sig-beam::before { animation: none !important; } .bg-parallax { transform: none !important; } }