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

:root {
  --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font-inter);
}

body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  color: #1a1a2e;
  min-height: 100vh;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
  }
  
  .glow {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }
  
  .glow-hover:hover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
    transition: box-shadow 0.3s ease;
  }
  
  .gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
  }
  
  .gradient-border {
    position: relative;
    background: linear-gradient(135deg, #1a0a2e 0%, #0a0a0a 100%);
    border-radius: 0.5rem;
  }
  
  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    padding: 1px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

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

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #4facfe);
  border-radius: 4px;
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #764ba2, #f093fb, #4facfe, #667eea);
  background-size: 200% 200%;
}