/* Custom Scrollbar Styles */

/* Webkit browsers (Chrome, Safari, Edge) */
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(137, 210, 189, 0.3);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 210, 189, 0.5);
}

/* Hide scrollbar while keeping functionality (optional - for cleaner look) */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Global smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Custom selection color (already in body class but adding here for consistency) */
::selection {
  background: rgba(137, 176, 210, 0.3);
  color: white;
}

/* Mobile Optimizations */
@media (hover: none) {

  /* Stop all transformations, scales, and translations triggered by hover or focus */
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }

  /* Target specific Tailwind-style hover classes commonly used in the project */
  .group:hover .group-hover\:scale-105,
  .group:hover .group-hover\:scale-110,
  .group:hover .group-hover\:translate-x-1,
  .group:hover .group-hover\:translate-x-2,
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .hover\:translate-x-1:hover,
  .hover\:bg-white\/5:hover,
  .hover\:bg-white\/10:hover,
  .hover\:border-white\/20:hover,
  .hover\:border-accent-blue\/40:hover,
  .hover\:text-accent-blue:hover,
  .hover\:text-accent-teal:hover {
    transform: none !important;
    scale: 1 !important;
    background-color: transparent !important;
    /* Resetting to common base or transparent */
    border-color: inherit !important;
    box-shadow: none !important;
  }

  /* Force reset for Framer Motion inline hover styles */
  [style*="transform"],
  [style*="scale"] {
    transform: none !important;
  }
}

/* Remove tap highlight on mobile for cleaner feel */
* {
  -webkit-tap-highlight-color: transparent;
}