/* RelayForge authentication page background override */
@keyframes relayforge-auth-drift {
  0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); }
  50% { transform: scale(1.08) translate3d(-1.2%, 0.8%, 0); }
}

/* Scope the effect to login / registration pages: the auth layout contains a password input. */
body:has(input[type="password"]) {
  background: #080611;
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none {
  isolation: isolate;
  overflow: hidden;
  background: #080611;
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -2;
  background: url("/relayforge-static/auth-bg.jpg") center / cover no-repeat;
  animation: relayforge-auth-drift 24s ease-in-out infinite;
  transform-origin: center;
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 5, 18, .72) 0%, rgba(5, 5, 18, .42) 46%, rgba(5, 5, 18, .72) 100%),
    radial-gradient(circle at 72% 22%, rgba(73, 71, 255, .26), transparent 35%),
    radial-gradient(circle at 22% 78%, rgba(238, 58, 164, .18), transparent 32%);
  pointer-events: none;
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none > a {
  color: #fff;
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none .text-muted-foreground {
  color: rgba(255,255,255,.72);
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none .border-input,
body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none input {
  background-color: rgba(8, 6, 24, .58);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none input::placeholder {
  color: rgba(255,255,255,.58);
}

@media (prefers-reduced-motion: reduce) {
  body:has(input[type="password"]) #root > div.relative.grid.h-svh.max-w-none::before { animation: none; }
}