@keyframes nx-blob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -30px) scale(1.08);
  }
}
@keyframes nx-card {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nx-pulse {
  0%,
  100% {
    box-shadow: 0 0 40px rgb(var(--brand-600) / .35);
  }
  50% {
    box-shadow: 0 0 60px rgb(var(--brand-600) / .55);
  }
}
@keyframes nx-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }
  40%,
  60% {
    transform: translateX(4px);
  }
}
.nx-blob {
  animation: nx-blob 9s ease-in-out infinite;
}
.nx-login-card,
.nx-card-in {
  animation: nx-card .7s cubic-bezier(.34, 1.56, .64, 1) both;
}
.nx-lock-pulse {
  animation: nx-pulse 3s ease-in-out infinite;
}
.nx-auth-card {
  background-color: var(--surface);
  color: var(--text);
}
.pin-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
.pin-input.filled {
  border-color: var(--brand);
  background-color: var(--brand-soft);
}
@media (prefers-reduced-motion: reduce) {
  .nx-blob,
  .nx-login-card,
  .nx-card-in,
  .nx-lock-pulse {
    animation: none;
  }
}