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

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 11, 11, 15;
  --background-end-rgb: 11, 11, 15;
  --primary-color: #00E0FF;
  --secondary-color: #35F2DB;
  --dark-bg: #0B0B0F;
  --panel-bg: #121217;
  --border-color: #1A1A24;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

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

/* Custom animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Glassmorphism */
.glassmorphic {
  background: rgba(18, 18, 23, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(26, 26, 36, 0.7);
}

/* Gradient text */
.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-[#00E0FF] to-[#35F2DB];
}

/* Gradient borders */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to right, #00E0FF, #35F2DB);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Button hover effects */
.btn-primary {
  @apply px-6 py-3 rounded-full bg-gradient-to-r from-[#00E0FF] to-[#35F2DB] text-[#0B0B0F] font-bold transition-all;
}

.btn-primary:hover {
  @apply shadow-lg shadow-[#00E0FF]/30 scale-105;
}

.btn-secondary {
  @apply px-6 py-3 rounded-full border border-[#00E0FF] text-[#00E0FF] font-bold transition-all;
}

.btn-secondary:hover {
  @apply bg-[#00E0FF]/10 scale-105;
}

/* Card hover effects */
.card {
  @apply bg-[#121217] rounded-xl p-6 border border-[#1A1A24] transition-all;
}

.card:hover {
  @apply border-[#00E0FF]/50 transform scale-[1.02];
}

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

::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}