/* ============================================================ VELLUM — Background FX (fx.css) Ambient creative-studio atmosphere: 1) Drifting gradient orbs 2) Fine grain 3) Cursor glow All subtle, performance-light, reduced-motion aware. To disable everything: remove this stylesheet, or add class="no-fx" to . ============================================================ */ /* Fixed layer that holds the ambient orbs (sits behind content) */ .fx-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* ---- Flowing aurora mesh (modern soft gradient motion) ---- */ .fx-aurora { position: absolute; inset: -30%; z-index: 0; pointer-events: none; background: radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), radial-gradient(36% 44% at 78% 24%, color-mix(in srgb, var(--ash) 50%, transparent), transparent 62%), radial-gradient(44% 52% at 62% 78%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%), radial-gradient(34% 40% at 30% 80%, color-mix(in srgb, #6a9fd4 30%, transparent), transparent 60%); filter: blur(40px); opacity: 0.7; will-change: transform; animation: auroraFlow 28s var(--ease-in-out) infinite alternate; } @keyframes auroraFlow { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(1.05); } 33% { transform: translate3d(3%, -3%, 0) rotate(4deg) scale(1.12); } 66% { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1.08); } 100% { transform: translate3d(2%, 3%, 0) rotate(2deg) scale(1.14); } } /* Ensure page content sits above the ambient layer */ #main-wrapper, main, .footer { position: relative; z-index: 1; } .nav { z-index: var(--z-nav); } .modal { z-index: var(--z-modal); } .lightbox { z-index: var(--z-modal); } /* ---- Drifting gradient orbs ---- */ .fx-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; will-change: transform; } .fx-orb--1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; top: -8vw; right: -6vw; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); animation: orbDrift1 34s var(--ease-in-out) infinite alternate; } .fx-orb--2 { width: 40vw; height: 40vw; max-width: 540px; max-height: 540px; top: 38%; left: -12vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ash) 60%, transparent), transparent 70%); animation: orbDrift2 44s var(--ease-in-out) infinite alternate; } .fx-orb--3 { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; bottom: -10vw; right: 12vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%); animation: orbDrift3 52s var(--ease-in-out) infinite alternate; } @keyframes orbDrift1 { 0% { transform: translate3d(0,0,0) scale(1); } 30% { transform: translate3d(-4vw, 5vh, 0) scale(1.08); } 60% { transform: translate3d(-7vw, 2vh, 0) scale(0.96); } 100% { transform: translate3d(-3vw, 8vh, 0) scale(1.12); } } @keyframes orbDrift2 { 0% { transform: translate3d(0,0,0) scale(1.05); } 35% { transform: translate3d(5vw, -4vh, 0) scale(0.94); } 70% { transform: translate3d(9vw, -2vh, 0) scale(1.06); } 100% { transform: translate3d(8vw, -6vh, 0) scale(0.92); } } @keyframes orbDrift3 { 0% { transform: translate3d(0,0,0) scale(0.95); } 40% { transform: translate3d(-3vw, -5vh, 0) scale(1.05); } 75% { transform: translate3d(-6vw, -3vh, 0) scale(0.98); } 100% { transform: translate3d(-5vw, -8vh, 0) scale(1.1); } } /* ---- Fine grain texture (whole page) ---- */ .fx-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Cursor-following glow (hero) ---- */ .fx-cursor { position: fixed; top: 0; left: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.6s var(--ease); will-change: transform; filter: blur(20px); } .fx-cursor.is-active { opacity: 1; } /* ---- Floating particles canvas ---- */ .fx-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 1; } /* ---- Disable switch ---- */ body.no-fx .fx-bg, body.no-fx .fx-grain, body.no-fx .fx-cursor, body.no-fx .fx-particles { display: none; } @media (prefers-reduced-motion: reduce) { .fx-orb { animation: none; } .fx-aurora { animation: none; } .fx-cursor { display: none; } .fx-particles { display: none; } } /* On small screens, lighten the load: keep orbs static-ish, drop cursor glow */ @media (max-width: 768px) { .fx-cursor { display: none; } .fx-orb { filter: blur(56px); opacity: 0.4; } }