@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-slideIn {
  animation: slideIn 0.3s ease-in-out;
}

@layer utilities {
  /* Chrome / Edge / Safari */
  .scrollbar-custom::-webkit-scrollbar {
    width: 8px; /* scrollbar thickness */
  }

  .scrollbar-custom::-webkit-scrollbar-track {
    background: #020617; /* slate-950 */
  }

  .scrollbar-custom::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg,
      #6366f1, /* indigo-500 */
      #22d3ee  /* cyan-400 */
    );
    border-radius: 9999px;
  }

  .scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
      180deg,
      #818cf8, /* indigo-400 */
      #67e8f9  /* cyan-300 */
    );
  }

  /* Firefox support */
  .scrollbar-custom {
    scrollbar-width: thin;              /* auto | thin | none */
    scrollbar-color: #6366f1 #020617;   /* thumb track */
  }
}