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

/* Import custom animations */
@import url("/assets/animations-9697756b.css");

/* Custom Nexrai Styles */

/* CSS Custom Properties for colors */
@layer base {
  :root {
    --nexrai-bg-primary: #0f0f0f;
    --nexrai-bg-secondary: #1a1a1a;
    --nexrai-bg-tertiary: #2a2a2a;
    --nexrai-cyan: #00d4ff;
    --nexrai-cyan-dark: #00a8cc;
    --nexrai-cyan-light: #33ddff;
    --nexrai-text-primary: #ffffff;
    --nexrai-text-secondary: #a0a0a0;
    --nexrai-text-muted: #6b7280;
    --nexrai-border: #333333;
    --nexrai-border-light: #404040;
  }
}

@layer components {
  /* Custom button styles */
  .btn-nexrai-primary {
    @apply bg-gradient-to-r from-cyan-400 to-cyan-500 hover:from-cyan-500 hover:to-cyan-600 text-black font-semibold py-4 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-400/25;
  }

  .btn-nexrai-secondary {
    @apply border-2 border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-black font-semibold py-4 px-8 rounded-xl transition-all duration-300 backdrop-blur-sm bg-white/5;
  }

  /* Card styles */
  .card-nexrai {
    @apply bg-gray-900/50 backdrop-blur-sm border border-gray-700 hover:border-cyan-400/50 rounded-xl transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl hover:shadow-cyan-400/10;
  }

  .card-nexrai-glass {
    @apply bg-white/5 backdrop-blur-md border border-gray-700 hover:border-cyan-400/50 rounded-xl transition-all duration-300;
  }

  /* Input styles */
  .input-nexrai {
    @apply w-full px-4 py-4 bg-gray-900/50 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:ring-2 focus:ring-cyan-400 focus:border-transparent transition-all duration-300 backdrop-blur-sm;
  }

  .input-nexrai:focus {
    @apply bg-gray-900/70 shadow-lg shadow-cyan-400/10;
  }
}

@layer utilities {
  /* Custom background utilities */
  .bg-nexrai-primary {
    background: var(--nexrai-bg-primary);
  }

  .bg-nexrai-secondary {
    background: var(--nexrai-bg-secondary);
  }

  .bg-nexrai-tertiary {
    background: var(--nexrai-bg-tertiary);
  }

  .bg-gradient-nexrai {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
  }

  .bg-gradient-nexrai-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 30%, #0f0f0f 70%, #000000 100%);
  }

  .bg-gradient-cyan {
    background: linear-gradient(135deg, var(--nexrai-cyan) 0%, var(--nexrai-cyan-dark) 100%);
  }

  .bg-gradient-cyan-subtle {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 168, 204, 0.05) 100%);
  }

  /* Custom text gradients */
  .text-gradient-cyan {
    background: linear-gradient(135deg, var(--nexrai-cyan) 0%, var(--nexrai-cyan-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Section spacing */
  .section-spacing {
    @apply py-24 lg:py-32;
  }

  /* Hover effects */
  .hover-glow-cyan {
    @apply transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/25;
  }

  /* Responsive typography */
  .text-responsive-xl {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  
  .text-responsive-lg {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  @media (min-width: 641px) {
    .text-responsive-xl {
      font-size: 3.5rem;
      line-height: 4rem;
    }
    
    .text-responsive-lg {
      font-size: 2rem;
      line-height: 2.5rem;
    }
  }

  @media (min-width: 1024px) {
    .text-responsive-xl {
      font-size: 4.5rem;
      line-height: 5rem;
    }
    
    .text-responsive-lg {
      font-size: 2.5rem;
      line-height: 3rem;
    }
  }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--nexrai-cyan-dark);
}

/* Animation Performance Optimizations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-auto {
  will-change: auto;
}

/* Intersection Observer Initial State */
[data-controller="intersection"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-controller="intersection"].intersection-triggered {
  opacity: 1;
  transform: translateY(0);
}