.categories {
  cursor: grab;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.categories.active {
  cursor: grabbing;
}


.categories.centered {
  cursor: grab;
}

.categories.centered:active {
  cursor: grabbing;
}


/* Glow effect on hover */
.category-button:hover {
  box-shadow: 0 0 10px rgba(106, 17, 203, 0.6), 0 0 20px rgba(106, 17, 203, 0.4);
  transition: box-shadow 0.3s ease;
}

/* Animation scroll when idle */
.categories.centered.auto-scroll {
  animation: scroll-left 40s linear infinite;
}

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


.category-button {
  transition: box-shadow 0.3s ease, background 1s ease-in-out;
}

.category-button:hover {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6),
              0 0 14px rgba(106, 17, 203, 0.5),
              0 0 18px rgba(106, 17, 203, 0.3);
  background: linear-gradient(90deg, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
  background-size: 200% 200%;
  animation: glowGradient 4s ease infinite;
}

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


.categories.centered {
  cursor: grab;
}
.categories.centered:active {
  cursor: grabbing;
}