@import "tailwindcss";

@source "../components/*.{js,ts,jsx,tsx}";
@source "../components/ui/*.{js,ts,jsx,tsx}";
@source "*.{js,ts,jsx,tsx}";

@theme {
  --color-background: #0a0a0f;
  --color-foreground: #ffffff;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  /* Custom animations */
  --animate-gradient: gradient 8s linear infinite;
  --animate-float: float 3s ease-in-out infinite;
  --animate-glow: glow 2s ease-in-out infinite alternate;

  @keyframes gradient {
    0%, 100% {
      background-size: 200% 200%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }

  @keyframes glow {
    from {
      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
    }
    to {
      box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.3);
    }
  }
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@utility text-balance {
  text-wrap: balance;
}

@utility glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@utility gradient-purple-blue {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@utility gradient-cyan-purple {
  background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%);
}

@utility gradient-orange-pink {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
}

@utility gradient-pink-rose {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

@utility gradient-green-teal {
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
}

@utility gradient-indigo-purple {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}