/* Background Grid Pattern */
.auth-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--dark-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}

/* Animated Gradient Blobs */
.auth-bg-gradient-1 {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(0, 245, 212, 0.12), transparent 70%);
  animation: authGradientMove1 20s ease-in-out infinite;
}

.auth-bg-gradient-2 {
  position: absolute;
  bottom: -30%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(158, 240, 26, 0.08), transparent 70%);
  animation: authGradientMove2 25s ease-in-out infinite;
}

/* Animations */
@keyframes authGradientMove1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20%, 20%); }
}

@keyframes authGradientMove2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20%, -20%); }
}

@keyframes authFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-card-animate {
  animation: authFadeInUp 0.6s ease-out;
}

/* Focus ring for inputs (cyan glow) */
.auth-input-focus:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
}