/* Shared, page-scoped layout for the public authentication screens. */
.auth-page {
  position: relative;
  display: block !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
}

.auth-page-shell {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1rem, 3vw, 2rem);
}

.auth-card {
  width: min(100%, 440px);
  margin: 0;
  text-align: center;
}

.auth-page-login .auth-card {
  position: relative;
  background: rgba(18, 22, 32, 0.92) !important;
}

/* Login-only visual layer. It is never interactive and remains below the form. */
.auth-background {
  --auth-gold-x: 0px;
  --auth-gold-y: 0px;
  --auth-emerald-x: 0px;
  --auth-emerald-y: 0px;
  --auth-violet-x: 0px;
  --auth-violet-y: 0px;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(9, 11, 16, 0.18) 54%, rgba(9, 11, 16, 0.7) 100%),
    linear-gradient(145deg, #090b10 0%, #0b101b 52%, #080a0f 100%);
}

.auth-background::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: radial-gradient(rgba(255, 255, 255, 0.42) 0.7px, transparent 0.8px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

.auth-background__layer {
  position: absolute;
  will-change: transform;
}

.auth-background__layer--gold {
  top: -20vmax;
  right: -17vmax;
  width: min(64vw, 46rem);
  transform: translate3d(var(--auth-gold-x), var(--auth-gold-y), 0);
}

.auth-background__layer--emerald {
  bottom: -25vmax;
  left: -15vmax;
  width: min(58vw, 40rem);
  transform: translate3d(var(--auth-emerald-x), var(--auth-emerald-y), 0);
}

.auth-background__layer--violet {
  top: 36%;
  left: 58%;
  width: min(34vw, 25rem);
  transform: translate3d(var(--auth-violet-x), var(--auth-violet-y), 0);
}

.auth-background__orb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(10px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.auth-background__layer--gold .auth-background__orb {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.09) 36%, transparent 70%);
  animation: auth-orb-drift-gold 28s ease-in-out infinite alternate;
}

.auth-background__layer--emerald .auth-background__orb {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, rgba(16, 185, 129, 0.045) 42%, transparent 70%);
  animation: auth-orb-drift-emerald 34s ease-in-out infinite alternate;
}

.auth-background__layer--violet .auth-background__orb {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.09) 0%, rgba(99, 102, 241, 0.03) 45%, transparent 72%);
  animation: auth-orb-drift-violet 31s ease-in-out infinite alternate;
}

@keyframes auth-orb-drift-gold {
  to { transform: translate3d(-5%, 9%, 0) scale(1.08); }
}

@keyframes auth-orb-drift-emerald {
  to { transform: translate3d(8%, -7%, 0) scale(1.07); }
}

@keyframes auth-orb-drift-violet {
  to { transform: translate3d(-7%, 8%, 0) scale(0.94); }
}

.auth-background.is-paused .auth-background__orb {
  animation-play-state: paused;
}

@media (max-width: 640px) {
  .auth-page-shell { padding: 1rem; }
  .auth-card { width: 100%; }
  .auth-background__layer--gold { width: 82vw; }
  .auth-background__layer--emerald { width: 76vw; }
  .auth-background__layer--violet { width: 54vw; left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-background__orb { animation: none; }
  .auth-background__layer { transform: none; }
}