/* ============================================================================ Shared site background — editorial noir + drifting glows + swappable texture. Used by index.html and every portfolio/*.html page. HOW TO SWAP THE BACKGROUND (whole site, one change): - Texture: change the modifier class on .bg-container in each page's markup: tex-contours | tex-dots | tex-diagonal | tex-none (or change the default recommendation in the markup snippet below). - Motion: add the class bg-static to .bg-container to freeze all animation. - Colours / intensity / speed: edit the CSS variables + keyframes below only. REQUIRED MARKUP (first child of on every page): Depends on the page defining --bg-deep (index.html and case-study.css both do). ========================================================================== */ .bg-container { /* --- swap knobs ------------------------------------------------------- */ --glow-a: hsla(216, 90%, 58%, 0.30); /* cobalt core */ --glow-a2: hsla(220, 82%, 50%, 0.10); /* cobalt mid */ --glow-b: hsla(258, 66%, 61%, 0.22); /* violet accent */ --glow-c: hsla(188, 82%, 55%, 0.18); /* cyan accent */ --tex-1: hsla(200, 80%, 74%, 0.045); --tex-2: hsla(216, 80%, 74%, 0.04); /* --------------------------------------------------------------------- */ position: fixed; inset: 0; z-index: -10; overflow: hidden; background: var(--bg-deep, #06080e); } /* Soft glows — real elements so their drift is a compositor-only transform/opacity animation (no repaint, no JS, ~free). */ .bg-glow { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform, opacity; } .bg-glow-1 { width: 92vw; height: 86vh; left: -12vw; top: 18vh; background: radial-gradient(closest-side, var(--glow-a), var(--glow-a2) 52%, transparent 72%); animation: glowDrift1 18s ease-in-out infinite alternate; } .bg-glow-2 { width: 80vw; height: 80vh; right: -14vw; top: -22vh; background: radial-gradient(closest-side, var(--glow-b), transparent 70%); animation: glowDrift2 24s ease-in-out infinite alternate; } .bg-glow-3 { width: 62vw; height: 62vh; left: 28vw; top: 40vh; background: radial-gradient(closest-side, var(--glow-c), transparent 70%); animation: glowDrift3 20s ease-in-out infinite alternate; } @keyframes glowDrift1 { from { transform: translate3d(-7%, -4%, 0) scale(0.9); opacity: 0.5; } to { transform: translate3d(8%, 7%, 0) scale(1.22); opacity: 1; } } @keyframes glowDrift2 { from { transform: translate3d(4%, 6%, 0) scale(1.15); opacity: 0.35; } to { transform: translate3d(-8%, -4%, 0) scale(0.9); opacity: 0.95; } } @keyframes glowDrift3 { from { transform: translate3d(-6%, 4%, 0) scale(0.85); opacity: 0.1; } to { transform: translate3d(7%, -7%, 0) scale(1.2); opacity: 0.72; } } /* --- Texture layer: base + swappable variants ------------------------- */ .bg-texture { position: absolute; inset: 0; pointer-events: none; } /* Topographic contour rings (default), with a slow minimal drift. */ .tex-contours .bg-texture { inset: -6%; opacity: 0.8; background-image: repeating-radial-gradient(circle at 30% 44%, transparent 0 21px, var(--tex-1) 21px 22px), repeating-radial-gradient(circle at 78% 66%, transparent 0 25px, var(--tex-2) 25px 26px); animation: texDrift 44s ease-in-out infinite alternate; will-change: transform; } @keyframes texDrift { from { transform: translate3d(-1.5%, -1%, 0); } to { transform: translate3d(1.5%, 1.5%, 0); } } /* Fine dot matrix. */ .tex-dots .bg-texture { background-image: radial-gradient(circle, hsla(216, 85%, 72%, 0.16) 1px, transparent 1.4px); background-size: 20px 20px; } /* Diagonal hairlines. */ .tex-diagonal .bg-texture { background-image: repeating-linear-gradient(135deg, transparent 0 13px, hsla(216, 70%, 74%, 0.05) 13px 14px); } /* No texture. */ .tex-none .bg-texture { display: none; } /* Freeze all background motion. */ .bg-static .bg-glow, .bg-static .bg-texture { animation: none !important; } @media (prefers-reduced-motion: reduce) { .bg-glow, .bg-texture { animation: none !important; } }