/* ===== Space background: nebula glow + live starfield (canvas) ===== */
body { background: radial-gradient(120% 80% at 50% -10%, #12121C 0%, #0B0B0C 55%) fixed; }
.space { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.nebulae { position: absolute; inset: -10%; transform: translate(calc(var(--mx, 0) * -34px), calc(var(--my, 0) * -24px)); }
.neb { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: .34; will-change: transform; }
.n1 { top: -12%; left: -10%; width: 62vmax; height: 52vmax; background: radial-gradient(closest-side, #5B34FF, transparent); animation: drift1 46s ease-in-out infinite alternate; }
.n2 { right: -14%; bottom: -10%; width: 58vmax; height: 50vmax; background: radial-gradient(closest-side, #1F6BFF, transparent); opacity: .28; animation: drift2 58s ease-in-out infinite alternate; }
.n3 { top: 34%; right: 6%; width: 34vmax; height: 30vmax; background: radial-gradient(closest-side, #C23BFF, transparent); opacity: .16; animation: drift3 40s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-8vw, -6vh) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-6vw, 9vh) scale(.9); } }
#stars { position: absolute; inset: 0; display: block; }
.portfolio, .cs { position: relative; z-index: 1; }
@media (max-width: 640px) { .neb { filter: blur(60px); } .n3 { display: none; } }
@media (prefers-reduced-motion: reduce) { .neb { animation: none; } }

/* Case study: no card, so the stars and nebula simply fade away behind the reading column. */
.cs-page .space { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 520px), rgb(0 0 0 / 14%) calc(50% - 400px), rgb(0 0 0 / 14%) calc(50% + 400px), #000 calc(50% + 520px), #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 520px), rgb(0 0 0 / 14%) calc(50% - 400px), rgb(0 0 0 / 14%) calc(50% + 400px), #000 calc(50% + 520px), #000 100%); }
@media (max-width: 900px) { .cs-page .space { -webkit-mask-image: none; mask-image: none; opacity: .22; } }