/* =====================================================================
   Login particle-wave background
   Uses the ERP theme tokens; no separate colour palette is maintained.
   ===================================================================== */
:root {
  --bg-anim-base: var(--bg);
  --bg-anim-accent1: var(--brand);
  --bg-anim-accent2: var(--brand-text);
  --bg-anim-accent3: var(--info);
  --bg-anim-gold: var(--warn);
  --bg-anim-dark-dot: var(--text);
  --bg-anim-spark: var(--text);
  --bg-anim-alpha: .72;
  --bg-anim-count: 1;
}

[data-mode="dark"] {
  --bg-anim-alpha: .88;
}

.body-blank.has-login-background {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background: var(--bg-anim-base);
}

[data-mode="light"] .body-blank.has-login-background {
  background:
    radial-gradient(circle at 18% 76%, var(--warn-bg), transparent 46%),
    radial-gradient(circle at 88% 30%, var(--brand-soft), transparent 42%),
    var(--bg-anim-base);
}

#login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--bg-anim-alpha);
  transition: opacity .35s ease;
}

.body-blank.has-login-background > .login-wrap {
  position: relative;
  z-index: 2;
}

/* The fallback is also the instant first paint while the canvas starts. */
.body-blank.has-login-background::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -20%;
  pointer-events: none;
  opacity: .78;
  background:
    radial-gradient(ellipse at 14% 62%, var(--brand-soft) 0 8%, transparent 34%),
    radial-gradient(ellipse at 54% 47%, var(--warn-bg) 0 7%, transparent 30%),
    radial-gradient(ellipse at 89% 67%, var(--info-bg) 0 8%, transparent 32%);
  background:
    radial-gradient(ellipse at 14% 62%, color-mix(in srgb, var(--bg-anim-accent1) 31%, transparent) 0 8%, transparent 34%),
    radial-gradient(ellipse at 54% 47%, color-mix(in srgb, var(--bg-anim-gold) 31%, transparent) 0 7%, transparent 30%),
    radial-gradient(ellipse at 89% 67%, color-mix(in srgb, var(--bg-anim-accent3) 25%, transparent) 0 8%, transparent 32%),
    conic-gradient(from 78deg at 50% 58%, transparent, color-mix(in srgb, var(--bg-anim-accent1) 12%, transparent), transparent 35%);
  filter: blur(72px) saturate(1.12);
  transform: translate3d(0, 0, 0) scale(1.05);
  animation: login-bg-drift 31s ease-in-out infinite alternate;
  transition: opacity .45s ease;
}

/* A very faint theme-coloured texture prevents a flat fallback. */
.body-blank.has-login-background::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background:
    repeating-linear-gradient(118deg,
      transparent 0 7px,
      color-mix(in srgb, var(--bg-anim-spark) 30%, transparent) 8px,
      transparent 9px 17px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent);
}

.body-blank.login-bg-canvas-ready:not(.login-bg-fallback)::before {
  opacity: .12;
}

[data-mode="light"] .body-blank.login-bg-canvas-ready:not(.login-bg-fallback)::before {
  opacity: .28;
}

.body-blank.login-bg-fallback #login-bg {
  display: none;
}

.body-blank.login-bg-fallback::before {
  opacity: .82;
}

[data-mode="dark"] .body-blank.has-login-background::before {
  opacity: .92;
  filter: blur(78px) saturate(1.18);
}

[data-mode="light"] .body-blank.has-login-background::after {
  opacity: .065;
}

@keyframes login-bg-drift {
  0%   { transform: translate3d(-4%, 2%, 0) scale(1.02) rotate(-1deg); }
  48%  { transform: translate3d(3%, -3%, 0) scale(1.10) rotate(1deg); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.05) rotate(-.5deg); }
}

@media (max-width: 680px) {
  .body-blank.has-login-background::before { filter: blur(62px); }
  .body-blank.has-login-background > .login-wrap { max-width: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  #login-bg { display: none !important; }
  .body-blank.has-login-background::before {
    animation: none !important;
    opacity: .72 !important;
    transform: scale(1.04);
  }
}