/*
 * auth-prescreens.css — fondo decorativo para pantallas pre-shell del
 * cluster auth (login, invite-accept, forbidden).
 *
 * Mesh gradient con los colores brand del logo iERP (extraídos de
 * branding/ierp.svg):
 *   - #02ff88 (verde brand — segundo color más frecuente del SVG)
 *   - #3c1642 (morado brand — color dominante del SVG)
 *   - #ed1b1f (rojo acento — del lock-up del logo)
 *
 * Filosofía: aporta densidad visual sin competir con el card central.
 * El form siempre gana en jerarquía; el mesh queda en segundo plano
 * vía opacidades bajas (~14-28% en light, ~22-65% en dark). Suficiente
 * presencia para no quedar "soso" pero sin distraer.
 *
 * Animación: drift muy lento (28s) sobre `background-position` —
 * imperceptible en uso normal pero suficiente para que la pantalla
 * "respire". Respeta `prefers-reduced-motion`.
 */

body.auth-prescreen-bg {
  background-color: var(--background);
  background-image:
    radial-gradient(at 12% 18%, color-mix(in oklab, #02ff88 22%, transparent) 0%, transparent 45%),
    radial-gradient(at 88% 22%, color-mix(in oklab, #3c1642 28%, transparent) 0%, transparent 45%),
    radial-gradient(at 72% 92%, color-mix(in oklab, #ed1b1f 14%, transparent) 0%, transparent 40%),
    radial-gradient(at 18% 82%, color-mix(in oklab, #3c1642 14%, transparent) 0%, transparent 45%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.dark body.auth-prescreen-bg {
  background-color: oklch(0.13 0 0);
  background-image:
    radial-gradient(at 12% 18%, color-mix(in oklab, #02ff88 28%, transparent) 0%, transparent 45%),
    radial-gradient(at 88% 22%, color-mix(in oklab, #3c1642 65%, transparent) 0%, transparent 45%),
    radial-gradient(at 72% 92%, color-mix(in oklab, #ed1b1f 22%, transparent) 0%, transparent 40%),
    radial-gradient(at 18% 82%, color-mix(in oklab, #3c1642 35%, transparent) 0%, transparent 45%);
}

@media (prefers-reduced-motion: no-preference) {
  body.auth-prescreen-bg {
    animation: auth-mesh-drift 28s ease-in-out infinite alternate;
  }
}

@keyframes auth-mesh-drift {
  from {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  to {
    background-position: 6% 3%, -4% 4%, -3% -2%, 4% -3%;
  }
}