@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 10, 14, 39;
    --background-end-rgb: 6, 9, 20;
  }

  body {
    @apply bg-gradient-to-br from-[#0A0E27] via-[#060914] to-[#0A0E27] text-white;
    min-height: 100vh;
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-white/5;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-white/20 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-white/30;
  }
}

@layer components {
  /* Glassmorphism utility */
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent;
  }

  /* Card hover effect */
  .card-hover {
    @apply transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-cyan-500/10;
  }

  /* Animated gradient border */
  .gradient-border {
    @apply relative;
  }

  .gradient-border::before {
    content: '';
    @apply absolute inset-0 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-500 opacity-0 transition-opacity duration-300;
    z-index: -1;
    filter: blur(10px);
  }

  .gradient-border:hover::before {
    @apply opacity-50;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Animation utilities */
  .animate-in {
    animation: slideIn 0.3s ease-out;
  }

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

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Pulsing animation for active indicators */
  .pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Custom Leaflet marker styles */
  .custom-marker {
    background: transparent !important;
    border: none !important;
  }

  .custom-marker svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
}