@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

@layer base {
  :root {
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;
    --card: 0 0% 6%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 6%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 84% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 24 95% 53%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 60%;
    --accent: 24 95% 53%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 0 84% 50%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    background-color: #0a0a0a;
    color: white;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #dc2626;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ef4444;
}

/* Selection */
::selection {
  background: rgba(220, 38, 38, 0.3);
  color: white;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.6);
  }
}

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

@keyframes scroll-indicator {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(5px);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeIn {
  animation: fadeIn 0.4s ease-out forwards;
}

.animate-scroll-indicator {
  animation: scroll-indicator 2s ease-in-out infinite;
}

/* Gradient text */
.gradient-text {
  @apply bg-clip-text text-transparent;
  background-image: linear-gradient(135deg, #dc2626, #f97316);
}

/* Gradient background */
.gradient-bg {
  background: linear-gradient(135deg, #dc2626, #f97316);
}

/* Glass effect */
.glass {
  @apply backdrop-blur-md bg-white/5 border border-white/10;
}

/* Grid lines background */
.grid-lines {
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Hover lift effect */
.hover-lift {
  @apply transition-all duration-300;
}

.hover-lift:hover {
  @apply -translate-y-1;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Section padding */
.section-padding {
  @apply py-20 md:py-28 lg:py-32;
}

/* Container */
.container-custom {
  @apply w-full px-4 sm:px-6 lg:px-8 xl:px-12 mx-auto;
  max-width: 1400px;
}

/* Button styles */
.btn-primary {
  @apply inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-red-600 to-orange-500 text-white font-medium rounded-full transition-all duration-300 hover:shadow-lg hover:shadow-red-500/30 hover:scale-105;
}

.btn-outline {
  @apply inline-flex items-center gap-2 px-6 py-3 border border-white/20 text-white font-medium rounded-full transition-all duration-300 hover:bg-white/10;
}

/* Card styles */
.card-hover {
  @apply bg-white/5 border border-white/10 rounded-xl transition-all duration-300 hover:border-red-500/30 hover:bg-white/10;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Hide scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
