html.public-sphere-prepaint body::before {
  content: "";
  position: fixed;
  inset: -2px;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--sphere-x, 50%) var(--sphere-y, 50%), rgba(55, 167, 254, 0.16), transparent 18%),
    linear-gradient(135deg, #1e222b 0%, #111723 48%, #070b12 100%);
  opacity: 1;
  transform: translateZ(0);
}

html.public-sphere-prepaint.public-gate-prepaint body::before {
  background: #020305;
}

html.public-sphere-prepaint:not(.public-sphere-ready) body > :not(.app-sphere-reveal):not(.app-gate-reveal):not(.vitrine-sphere-reveal):not(.signup-sphere-reveal):not(.page-sphere-transition):not(.vitrine-sphere-exit):not(.signup-sphere-exit) {
  opacity: 0 !important;
}

html.public-sphere-prepaint.public-sphere-ready body > * {
  opacity: 1;
}

html.public-sphere-prepaint.public-sphere-ready body::before {
  opacity: 0;
  transition: opacity 160ms ease;
}