/* Auth page atmosphere — orbs, neural canvas, vignette, HUD */

:root {
  --auth-orb-shift-x: 0px;
  --auth-orb-shift-y: 0px;
}

body.auth-page {
  position: relative;
  overflow-x: hidden;
  background: #041a2a !important;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(55, 192, 255, 0.12), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(255, 138, 0, 0.08), transparent 50%),
    linear-gradient(180deg, #041a2a 0%, #062237 45%, #041520 100%) !important;
}

.auth-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.auth-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.auth-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
  transform: translate(var(--auth-orb-shift-x), var(--auth-orb-shift-y));
  opacity: 0.55;
}

.auth-bg-orb--cyan {
  width: min(520px, 70vw);
  height: min(520px, 70vw);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(55, 192, 255, 0.35) 0%, transparent 70%);
  animation: authOrbDrift1 22s ease-in-out infinite alternate;
}

.auth-bg-orb--orange {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  bottom: -6%;
  right: -6%;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.32) 0%, transparent 70%);
  animation: authOrbDrift2 26s ease-in-out infinite alternate-reverse;
}

.auth-bg-orb--purple {
  width: min(320px, 45vw);
  height: min(320px, 45vw);
  top: 38%;
  left: 18%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
  animation: authOrbDrift3 19s ease-in-out infinite alternate;
}

@keyframes authOrbDrift1 {
  from { transform: translate(var(--auth-orb-shift-x), var(--auth-orb-shift-y)) scale(1); }
  to   { transform: translate(calc(var(--auth-orb-shift-x) + 60px), calc(var(--auth-orb-shift-y) + 40px)) scale(1.1); }
}
@keyframes authOrbDrift2 {
  from { transform: translate(var(--auth-orb-shift-x), var(--auth-orb-shift-y)) scale(1); }
  to   { transform: translate(calc(var(--auth-orb-shift-x) - 50px), calc(var(--auth-orb-shift-y) - 35px)) scale(1.08); }
}
@keyframes authOrbDrift3 {
  from { transform: translate(var(--auth-orb-shift-x), var(--auth-orb-shift-y)) scale(1); }
  to   { transform: translate(calc(var(--auth-orb-shift-x) + 30px), calc(var(--auth-orb-shift-y) - 50px)) scale(1.12); }
}

#auth-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.82;
  contain: strict;
}

.auth-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(2, 14, 26, 0.5) 68%,
    rgba(2, 14, 26, 0.88) 100%);
}

.auth-hud {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.auth-hud-grid {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image:
    linear-gradient(rgba(55, 192, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 192, 255, 0.14) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 82%);
}

.auth-hud-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(55, 192, 255, 0.02) 3px,
    rgba(55, 192, 255, 0.02) 4px
  );
  animation: authHudScan 16s linear infinite;
  opacity: 0.55;
}

@keyframes authHudScan {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}

body.auth-page > header,
body.auth-page > main {
  position: relative;
  z-index: 2;
}

html.motion-reduced #auth-fx-canvas { display: none; }

@media (prefers-reduced-motion: reduce) {
  #auth-fx-canvas { display: none; }
  .auth-hud-scanline,
  .auth-bg-orb { animation: none !important; }
  .auth-hud-grid { opacity: 0.07; }
}

html.motion-reduced .auth-hud-scanline,
html.motion-reduced .auth-bg-orb {
  animation: none !important;
}