/* Public site background: pure black. Light only where it matters: big soft clouds and
   projector beams anchored to sections, scrolling with the page. Grain shows only in the light. */
html{background:#000}
body{background:transparent;position:relative}
.mbg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#000}
.mbg::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 220px}
.mbg .cl{position:absolute;animation:mbg-breathe var(--d,34s) ease-in-out infinite alternate}
.mbg .cl span{position:absolute;inset:-18%;will-change:transform}
.mbg .cl .l1{animation:mbg-orbit var(--t,40s) linear infinite;--o:var(--r,60px)}
.mbg .cl .l2{animation:mbg-orbit var(--t,55s) linear infinite reverse;--o:var(--r2,90px)}
.mbg .bm i{animation:mbg-glow 9s ease-in-out infinite alternate}
@keyframes mbg-orbit{from{transform:rotate(0deg) translateX(var(--o)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--o)) rotate(-360deg)}}
@keyframes mbg-breathe{from{transform:scale(1,1)}to{transform:scale(1.14,.9)}}
@keyframes mbg-glow{from{opacity:.82}to{opacity:1}}
.mbg .bm{position:absolute;transform-origin:50% 0;animation:mbg-sway var(--d,14s) ease-in-out infinite alternate}
.mbg .bm i{position:absolute;inset:0;display:block;filter:blur(30px)}
.mbg .bm i::before{content:"";position:absolute;inset:0;clip-path:polygon(47.5% 0,52.5% 0,88% 100%,12% 100%);
  background:linear-gradient(180deg,rgba(255,240,220,.5),rgba(242,190,130,.24) 28%,rgba(200,116,43,.08) 60%,transparent 85%)}
.mbg .bm b{position:absolute;left:50%;top:-60px;width:220px;height:160px;margin-left:-110px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,244,228,.6),rgba(255,214,160,.2) 45%,transparent 100%);filter:blur(6px)}
@keyframes mbg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,-5%) scale(1.08,.94)}}
@keyframes mbg-sway{from{transform:rotate(calc(var(--r,24deg) - 7deg))}to{transform:rotate(calc(var(--r,24deg) + 7deg))}}
@media (prefers-reduced-motion:reduce){.mbg .cl,.mbg .cl span,.mbg .bm i{animation:none}.mbg .bm{animation:none}}
/* light theme: warm paper, light reads as sun through a window */
html[data-theme="light"]{background:#f3efe8}
html[data-theme="light"] .mbg{background:#f3efe8}
html[data-theme="light"] .mbg::after{opacity:.32}
html[data-theme="light"] .mbg .cl{mix-blend-mode:multiply;opacity:.55}
html[data-theme="light"] .mbg .bm{mix-blend-mode:multiply;opacity:.5}
html[data-theme="light"] .mbg .bm i::before{background:linear-gradient(180deg,rgba(214,150,80,.55),rgba(214,150,80,.25) 35%,rgba(200,116,43,.08) 65%,transparent 88%)}
html[data-theme="light"] .mbg .bm b{opacity:.4}
.mbg{transition:background .5s}