/* ========================================================================== Shared Background — Black + Lava Lamp + Scanline Include via: Then add the .page-glow div as first child of ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap'); :root { color-scheme: light dark; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; background: #000000; color: #e2e8f0; } body { margin: 0; padding: 0; background: #000000; } /* Subtle scanline overlay */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 9999; } /* ================================================================ Full-screen lava lamp ================================================================ */ .page-glow { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .lava-blob { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform, border-radius; } .lava-blob-1 { top: -15%; left: -10%; width: 55%; height: 55%; background: radial-gradient(circle at 50% 50%, rgba(147,51,234,0.07) 0%, rgba(126,34,206,0.04) 50%, transparent 80%); animation: lava1 40s ease-in-out infinite; } .lava-blob-2 { top: -10%; right: -15%; width: 50%; height: 50%; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,0.05) 0%, rgba(6,182,212,0.02) 50%, transparent 80%); animation: lava2 33s ease-in-out infinite; } .lava-blob-3 { top: 25%; left: 20%; width: 45%; height: 45%; background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.06) 0%, rgba(126,34,206,0.03) 50%, transparent 80%); animation: lava3 47s ease-in-out infinite; } .lava-blob-4 { bottom: -10%; left: -5%; width: 40%; height: 40%; background: radial-gradient(circle at 50% 50%, rgba(147,51,234,0.05) 0%, rgba(126,34,206,0.02) 50%, transparent 80%); animation: lava4 53s ease-in-out infinite; } .lava-blob-5 { bottom: -15%; right: -10%; width: 50%; height: 50%; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,0.02) 0%, rgba(6,182,212,0.01) 50%, transparent 80%); animation: lava5 43s ease-in-out infinite; } .lava-blob-6 { top: 40%; right: 5%; width: 40%; height: 40%; background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.05) 0%, rgba(126,34,206,0.02) 50%, transparent 80%); animation: lava6 50s ease-in-out infinite; } @keyframes lava1 { 0% { border-radius: 30% 70% 55% 45%; transform: translate(0, 0) scale(1) rotate(0deg); } 16% { border-radius: 55% 35% 65% 30%; transform: translate(15%, 20%) scale(1.15) rotate(8deg); } 33% { border-radius: 40% 60% 30% 65%; transform: translate(35%, 40%) scale(1.05) rotate(-5deg); } 50% { border-radius: 65% 30% 55% 40%; transform: translate(20%, 60%) scale(1.20) rotate(12deg); } 66% { border-radius: 35% 55% 45% 60%; transform: translate(40%, 30%) scale(1.10) rotate(-8deg); } 83% { border-radius: 50% 40% 60% 35%; transform: translate(10%, 10%) scale(1.12) rotate(4deg); } 100% { border-radius: 30% 70% 55% 45%; transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes lava2 { 0% { border-radius: 50% 40% 55% 45%; transform: translate(0, 0) scale(1) rotate(0deg); } 16% { border-radius: 35% 60% 40% 55%; transform: translate(-25%, 15%) scale(1.10) rotate(-6deg); } 33% { border-radius: 60% 35% 55% 40%; transform: translate(-40%, 45%) scale(1.18) rotate(5deg); } 50% { border-radius: 40% 55% 35% 60%; transform: translate(-20%, 65%) scale(1.08) rotate(-10deg); } 66% { border-radius: 55% 40% 60% 35%; transform: translate(-35%, 35%) scale(1.14) rotate(7deg); } 83% { border-radius: 45% 50% 40% 55%; transform: translate(-10%, 10%) scale(1.06) rotate(-3deg); } 100% { border-radius: 50% 40% 55% 45%; transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes lava3 { 0% { border-radius: 45% 55% 50% 50%; transform: translate(0, 0) scale(1) rotate(0deg); } 16% { border-radius: 60% 35% 55% 45%; transform: translate(20%, -15%) scale(1.12) rotate(6deg); } 33% { border-radius: 35% 60% 45% 55%; transform: translate(-15%, 25%) scale(1.08) rotate(-8deg); } 50% { border-radius: 55% 40% 35% 65%; transform: translate(25%, 30%) scale(1.16) rotate(10deg); } 66% { border-radius: 40% 55% 60% 35%; transform: translate(-20%, -10%) scale(1.05) rotate(-5deg); } 83% { border-radius: 50% 45% 45% 55%; transform: translate(10%, 15%) scale(1.10) rotate(3deg); } 100% { border-radius: 45% 55% 50% 50%; transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes lava4 { 0% { border-radius: 50% 45% 55% 50%; transform: translate(0, 0) scale(1) rotate(0deg); } 20% { border-radius: 40% 60% 35% 55%; transform: translate(20%, -30%) scale(1.14) rotate(-7deg); } 40% { border-radius: 60% 35% 50% 45%; transform: translate(45%, -50%) scale(1.08) rotate(8deg); } 60% { border-radius: 35% 55% 60% 40%; transform: translate(30%, -20%) scale(1.18) rotate(-10deg); } 80% { border-radius: 55% 40% 45% 55%; transform: translate(10%, -40%) scale(1.06) rotate(5deg); } 100% { border-radius: 50% 45% 55% 50%; transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes lava5 { 0% { border-radius: 55% 45% 50% 50%; transform: translate(0, 0) scale(1) rotate(0deg); } 20% { border-radius: 40% 55% 60% 35%; transform: translate(-20%, -25%) scale(1.12) rotate(6deg); } 40% { border-radius: 55% 35% 40% 60%; transform: translate(-40%, -55%) scale(1.06) rotate(-9deg); } 60% { border-radius: 35% 60% 50% 45%; transform: translate(-25%, -35%) scale(1.16) rotate(8deg); } 80% { border-radius: 50% 40% 55% 45%; transform: translate(-10%, -15%) scale(1.08) rotate(-4deg); } 100% { border-radius: 55% 45% 50% 50%; transform: translate(0, 0) scale(1) rotate(0deg); } } @keyframes lava6 { 0% { border-radius: 50% 50% 45% 55%; transform: translate(0, 0) scale(1) rotate(0deg); } 16% { border-radius: 35% 55% 60% 40%; transform: translate(-15%, -20%) scale(1.10) rotate(-5deg); } 33% { border-radius: 60% 40% 35% 55%; transform: translate(-30%, 15%) scale(1.14) rotate(7deg); } 50% { border-radius: 45% 55% 50% 40%; transform: translate(-10%, -35%) scale(1.06) rotate(-9deg); } 66% { border-radius: 55% 35% 45% 60%; transform: translate(-25%, 10%) scale(1.18) rotate(6deg); } 83% { border-radius: 40% 60% 55% 35%; transform: translate(-5%, -10%) scale(1.08) rotate(-3deg); } 100% { border-radius: 50% 50% 45% 55%; transform: translate(0, 0) scale(1) rotate(0deg); } }