/* Only loaded by the login page. The form stays above the decorative scene. */
.re-auth-page {
  background: #f7f9fe;
}

.re-auth-shell {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  padding: 40px clamp(32px, 6vw, 120px);
}

.re-login-scene {
  position: fixed;
  inset: 0 0 0 auto;
  width: 54%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 64% 45%, #2549e00d, transparent 57%),
    radial-gradient(ellipse at 85% 68%, #a9baff14, transparent 48%);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 95%, transparent);
}

.re-login-scene > canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.re-auth-shell .re-login-card {
  grid-column: 1;
  width: min(480px, 100%);
  box-shadow: 0 20px 64px #2549e014, 0 4px 16px #2549e006;
}

@media (max-width: 899px) {
  .re-auth-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 80px 20px 60px; }
  .re-login-scene {
    inset: 0 0 auto;
    width: 100%;
    height: 320px;
    mask-image: linear-gradient(#000 65%, transparent);
  }
  .re-login-scene > canvas { opacity: .6; }
}

@media (max-width: 360px) {
  .re-auth-shell .re-login-title { font-size: 32px; }
}

.re-login-brand {margin-bottom:28px}
.re-login-brand img {display:block;width:280px;max-width:100%;height:auto}