/* ============================================ * Magic Darkroom · Liquid Aurora Background * * Soft blurred-blob mesh gradient (Stripe / Linear * "aurora" style). All colors are driven by theme * tokens defined in theme/themes.css, so the same * markup re-skins for every theme. * * Markup:
with a starfield layer * and a .md-bg__drift wrapper holding 4 drifting blobs. * The wrapper gets a small pointer-parallax translate * (driven by JS via --md-bg-px / --md-bg-py) layered on * top of each blob's own autonomous keyframe drift. * * Requires: theme/tokens.css, theme/themes.css * ============================================ */ /* Base canvas color lives on so the fixed * aurora layer (z-index:-1) can show through body. */ html { background: var(--bg-base); } body { background: transparent; } .md-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(135% 120% at 50% -20%, var(--bg-glow) 0%, transparent 55%), var(--bg-base); } /* ---- Subtle starfield (only visible on dark themes) ---- */ .md-bg__stars { position: absolute; inset: 0; opacity: var(--bg-stars-opacity, 0); transition: opacity 0.6s ease; background-repeat: repeat; background-size: 280px 280px; background-image: radial-gradient(1.4px 1.4px at 24px 38px, rgba(255, 255, 255, 0.9), transparent 60%), radial-gradient(1px 1px at 88px 120px, rgba(255, 255, 255, 0.7), transparent 60%), radial-gradient(1.6px 1.6px at 150px 60px, rgba(214, 224, 255, 0.9), transparent 60%), radial-gradient(1px 1px at 200px 180px, rgba(255, 255, 255, 0.6), transparent 60%), radial-gradient(1.2px 1.2px at 250px 30px, rgba(255, 255, 255, 0.8), transparent 60%), radial-gradient(1px 1px at 40px 200px, rgba(220, 210, 255, 0.7), transparent 60%), radial-gradient(1.5px 1.5px at 120px 240px, rgba(255, 255, 255, 0.85), transparent 60%), radial-gradient(1px 1px at 260px 130px, rgba(255, 255, 255, 0.6), transparent 60%), radial-gradient(1.2px 1.2px at 180px 210px, rgba(206, 225, 255, 0.8), transparent 60%); animation: md-bg-twinkle 5.5s ease-in-out infinite; } @keyframes md-bg-twinkle { 0%, 100% { opacity: var(--bg-stars-opacity, 0); } 50% { opacity: calc(var(--bg-stars-opacity, 0) * 0.55); } } .md-bg__blob { position: absolute; width: 52vmax; height: 52vmax; border-radius: 50%; filter: blur(72px); opacity: var(--bg-blob-opacity, 0.6); mix-blend-mode: var(--bg-blend, multiply); will-change: transform; } .md-bg__blob--1 { top: -16%; left: -10%; background: radial-gradient(circle at 35% 35%, var(--bg-blob-1), transparent 68%); animation: md-bg-drift-1 16s ease-in-out infinite; } .md-bg__blob--2 { top: 8%; right: -16%; background: radial-gradient(circle at 35% 35%, var(--bg-blob-2), transparent 68%); animation: md-bg-drift-2 20s ease-in-out infinite; } .md-bg__blob--3 { bottom: -20%; left: 6%; background: radial-gradient(circle at 35% 35%, var(--bg-blob-3), transparent 68%); animation: md-bg-drift-3 18s ease-in-out infinite; } .md-bg__blob--4 { bottom: -14%; right: 2%; background: radial-gradient(circle at 35% 35%, var(--bg-blob-4), transparent 68%); animation: md-bg-drift-4 22s ease-in-out infinite; } /* Pointer-parallax wrapper. The whole blob field leans a few * px toward the cursor (JS lerps --md-bg-px/py). This is a single * transform on an already-painted layer — no extra blur/blend * pass — so it stays cheap. Blobs keep their own keyframe drift. */ .md-bg__drift { position: absolute; inset: 0; transform: translate3d(calc(var(--md-bg-px, 0) * 1px), calc(var(--md-bg-py, 0) * 1px), 0); will-change: transform; } @keyframes md-bg-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(11vw, 5vh) scale(1.1); } 50% { transform: translate(7vw, 14vh) scale(1.18); } 75% { transform: translate(-5vw, 7vh) scale(1.06); } } @keyframes md-bg-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1.05); } 25% { transform: translate(-10vw, 6vh) scale(0.95); } 50% { transform: translate(-14vw, 13vh) scale(0.88); } 75% { transform: translate(-6vw, 4vh) scale(1); } } @keyframes md-bg-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(9vw, -6vh) scale(1.08); } 50% { transform: translate(14vw, -12vh) scale(1.16); } 75% { transform: translate(6vw, -4vh) scale(1.05); } } @keyframes md-bg-drift-4 { 0%, 100% { transform: translate(0, 0) scale(0.95); } 25% { transform: translate(-8vw, -5vh) scale(1.04); } 50% { transform: translate(-14vw, -11vh) scale(1.12); } 75% { transform: translate(-5vw, -7vh) scale(1.02); } } @media (prefers-reduced-motion: reduce) { .md-bg__blob, .md-bg__stars { animation: none !important; } } /* ---- Touch devices: lighten the aurora for smooth scrolling / battery ---- * No pointer to follow on touch, so the parallax JS never runs (--md-bg-px/py * stay 0). The blobs keep their cheap transform-based drift but use a smaller * blur radius, which is the expensive part of the paint on low-end phones. */ @media (pointer: coarse) { .md-bg__blob { filter: blur(54px); } }