@import "tailwindcss";

@layer base {
  html,
  body {
    font-family:
      "Google Sans",
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    font-size: 16px;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
    color: #ffffff;
  }

  #root {
    height: 100%;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  *:hover {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
  }

  *:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }

  *:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
  }
}

@keyframes pulse-gentle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.animate-pulse-gentle {
  animation: pulse-gentle 2.5s ease-in-out infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out both;
}

@keyframes shimmer-detection {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.detection-shimmer {
  background: linear-gradient(
    105deg,
    #8c8c94 0%,
    #8c8c94 40%,
    #1a73e8 50%,
    #8c8c94 60%,
    #8c8c94 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-detection 2s ease-in-out infinite;
}