/* Global auth background */
.auth-bg {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom right, #0f172a, #111827, #1f2937);
  position: relative;
  overflow: hidden;
}

/* Floating blobs */
.blob { position: fixed; border-radius: 9999px; pointer-events: none; }
.blob-cyan { background: rgba(34,211,238,.10); }
.blob-pink { background: rgba(236,72,153,.10); }
.blob-purple { background: rgba(168,85,247,.10); }

/* Grid dot overlay */
.bg-dots {
  position: fixed; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='1' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Card accent glow on hover (subtle) */
.card-glow { position: relative; z-index: 0; }            /* ensure stacking context for content */
.card-glow:before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 1rem;
  background: linear-gradient(90deg, rgba(34,211,238,.20), transparent, rgba(236,72,153,.20));
  filter: blur(6px);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;                                   /* don't block clicks */
  z-index: -1;                                            /* keep behind the card content */
}
.card-glow:hover:before { opacity: 1; }

/* Ensure links are always clickable above effects */
.card-glow a { position: relative; z-index: 1; }

/* Animations */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideDown { from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }

.animate-fadeIn { animation: fadeIn .6s ease-out }
.animate-slideUp { opacity: 0; animation: slideUp .5s ease-out forwards }
.animate-slideDown { opacity: 0; animation: slideDown .5s ease-out forwards }

/* Utility helpers when you don’t want inline style */
.delay-100 { animation-delay: 100ms }
.delay-200 { animation-delay: 200ms }
.delay-300 { animation-delay: 300ms }
.delay-400 { animation-delay: 400ms }
.delay-500 { animation-delay: 500ms }