/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
}

.fade-delay-1 { animation-delay: 0.2s; }
.fade-delay-2 { animation-delay: 0.4s; }
.fade-delay-3 { animation-delay: 0.6s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover glow */
.glow-hover:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.35);
  transform: translateY(-6px);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* ===== SPACE BACKGROUND ===== */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at bottom,
    #1a0b3f 0%,
    #070311 60%
  );
  overflow: hidden;
}

/* ===== STARS ===== */
.stars,
.stars.layer2 {
  position: absolute;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, #fff, transparent),
    radial-gradient(1px 1px at 160px 120px, #fff, transparent),
    radial-gradient(1px 1px at 200px 150px, #fff, transparent);
  background-size: 250px 250px;
  animation: starDrift 120s linear infinite;
  opacity: 0.35;
}


.stars.layer2 {
  animation-duration: 200s;
  opacity: 0.2;
}

/* ===== NEBULA GLOW ===== */
.nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(138,92,255,0.18), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(76,29,149,0.15), transparent 45%);
  filter: blur(80px);
}

/* ===== ANIMATION ===== */
@keyframes starDrift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-500px);
  }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.55; }
}

.stars {
  animation:
    starDrift 120s linear infinite,
    twinkle 6s ease-in-out infinite;
}