.hero-input {
  position: relative;
  background: linear-gradient(
    45deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57
  );
  background-size: 400% 400%;
  animation: gradientShift 3s ease infinite;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(147, 51, 234, 0.2),
    0 0 90px rgba(236, 72, 153, 0.1);
}

.hero-input-inner {
  background: hsl(var(--b1));
  border-radius: 13px;
  position: relative;
  z-index: 1;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}