/* The slowly drifting brand gradient from the platform heroes, behind the page area of the app, the sign in
   form, the onboarding frame and the error pages. It fades out downwards. */

.main, .onb-shell, .auth-main, .status-wrap { position: relative; isolation: isolate; }
.auth-main, .status-wrap { overflow: hidden; }

.main::before, .onb-shell::before, .auth-main::before, .status-wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 auto; height: min(760px, 100%);
  background: var(--mesh);
  background-size: 180% 180%, 200% 200%, 180% 180%, 200% 200%;
  opacity: var(--mesh-opacity);
  -webkit-mask-image: var(--mesh-fade); mask-image: var(--mesh-fade);
  animation: mesh-drift 10s ease-in-out infinite;
}
.onb-shell::before { position: fixed; height: 760px; }
.main::before { height: 760px; }

@keyframes mesh-drift {
  0%, 100% { background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%; }
  50% { background-position: 100% 50%, 0% 100%, 0% 0%, 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .main::before, .onb-shell::before, .auth-main::before, .status-wrap::before { animation: none; }
}