.ui-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ui-bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.08), transparent 24%),
    radial-gradient(circle at 50% 78%, rgba(255,255,255,.06), transparent 30%);
}
.ui-bg__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.ui-bg__orb{
  position:absolute;right:-8vw;top:10vh;width:42vw;height:42vw;max-width:520px;max-height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 68%);
  filter:blur(18px);
  animation:uiOrbFloat 9s ease-in-out infinite;
}
@keyframes uiOrbFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-24px,18px,0) scale(1.05)}
}