@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

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

@layer base {
  body {
    @apply font-['Space_Grotesk'] text-[#8c9bab] bg-[#030712] antialiased selection:bg-[#06b6d4] selection:text-[#030712];
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply text-[#f8fafc] font-bold tracking-tight;
  }
}

@layer components {
  .btn-cyber {
    @apply inline-flex items-center justify-center px-8 py-3 bg-transparent border border-[#06b6d4] text-[#06b6d4] font-['JetBrains_Mono'] text-xs tracking-widest uppercase hover:bg-[#06b6d4] hover:text-[#030712] hover:shadow-[0_0_20px_rgba(6,182,212,0.5)] transition-all duration-300 relative overflow-hidden;
  }
  
  .btn-cyber::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.5s ease;
  }
  
  .btn-cyber:hover::before {
    left: 100%;
  }
}

.text-cyan { color: #06b6d4; }
.text-magenta { color: #d946ef; }

.nav-scrolled {
  @apply bg-[#030712]/80 backdrop-blur-md border-b border-[#06b6d4]/20 shadow-[0_4px_30px_rgba(6,182,212,0.1)];
}

.grid-bg {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(6, 182, 212, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 182, 212, 0.05) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.glass-panel {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(6, 182, 212, 0.15);
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.1), 0 0 30px rgba(6, 182, 212, 0.15);
  transform: translateY(-5px);
}

.glow-text {
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.terminal-text {
  font-family: 'JetBrains Mono', monospace;
}

/* Typing animation for terminal */
.typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #06b6d4;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #06b6d4; }
}