@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 3s ease infinite;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@keyframes scroll-x {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll-x {
  animation: scroll-x 30s linear infinite;
}

/* Animated Stars Background */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star-static {
  position: absolute;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
}

.star-move-1 {
  animation: twinkle-move-1 ease-in-out infinite;
}

.star-move-2 {
  animation: twinkle-move-2 ease-in-out infinite;
}

.star-move-3 {
  animation: twinkle-move-3 ease-in-out infinite;
}

.star-move-4 {
  animation: twinkle-move-4 ease-in-out infinite;
}

@keyframes twinkle-move-1 {
  0%, 100% {
    opacity: 0.1;
    transform: translate(0, 0) scale(1);
  }
  25% {
    opacity: 0.2;
    transform: translate(15px, -10px) scale(1.1);
  }
  50% {
    opacity: 0.15;
    transform: translate(25px, 5px) scale(1.2);
  }
  75% {
    opacity: 0.18;
    transform: translate(10px, 15px) scale(1.1);
  }
}

@keyframes twinkle-move-2 {
  0%, 100% {
    opacity: 0.12;
    transform: translate(0, 0) scale(1);
  }
  25% {
    opacity: 0.2;
    transform: translate(-20px, 12px) scale(1.15);
  }
  50% {
    opacity: 0.1;
    transform: translate(-10px, -18px) scale(1);
  }
  75% {
    opacity: 0.18;
    transform: translate(8px, -8px) scale(1.2);
  }
}

@keyframes twinkle-move-3 {
  0%, 100% {
    opacity: 0.12;
    transform: translate(0, 0) scale(1.1);
  }
  33% {
    opacity: 0.2;
    transform: translate(18px, 20px) scale(1);
  }
  66% {
    opacity: 0.15;
    transform: translate(-15px, 10px) scale(1.25);
  }
}

@keyframes twinkle-move-4 {
  0%, 100% {
    opacity: 0.15;
    transform: translate(0, 0) scale(1);
  }
  20% {
    opacity: 0.2;
    transform: translate(-12px, -15px) scale(1.15);
  }
  40% {
    opacity: 0.1;
    transform: translate(10px, -20px) scale(1.05);
  }
  60% {
    opacity: 0.18;
    transform: translate(20px, 8px) scale(1.2);
  }
  80% {
    opacity: 0.15;
    transform: translate(-8px, 18px) scale(1.1);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}