/* The slowly drifting brand gradient behind the admin's page area and its sign in form; the app's surface hides it.
   It fades out downwards and stays inside its area, or a short page scrolls. */

.main, .auth-main { position: relative; isolation: isolate; }
.auth-main { overflow: hidden; }

.main::before, .auth-main::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;
}

@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, .auth-main::before { animation: none; }
}