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

body {
  font-family: 'Outfit', sans-serif;
  background-color: #050814;
  color: #e2e8f0;
  overflow-x: hidden;
}

code, pre {
  font-family: 'Fira Code', monospace;
}

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

::-webkit-scrollbar-track {
  background: #050814;
}

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

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

/* Neon Text Glow */
.glow-text-orange {
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.4), 0 0 20px rgba(255, 140, 0, 0.2);
}

.glow-text-cyan {
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4), 0 0 20px rgba(56, 189, 248, 0.2);
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card-orange-hover:hover {
  border-color: rgba(255, 140, 0, 0.3);
  box-shadow: 0 10px 30px -10px rgba(255, 140, 0, 0.15);
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-cyan-hover:hover {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.15);
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Neon Border Glow */
.neon-glow-orange {
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.15), inset 0 0 15px rgba(255, 140, 0, 0.05);
}

.neon-glow-cyan {
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.15), inset 0 0 15px rgba(56, 189, 248, 0.05);
}

/* Background Cyber Grid effect */
.cyber-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* Background radial gradient spotlight */
.spotlight {
  background: radial-gradient(circle 800px at var(--x, 50%) var(--y, 50%), rgba(255, 140, 0, 0.05), transparent 80%);
}

.spotlight-cyan {
  background: radial-gradient(circle 600px at var(--x, 50%) var(--y, 50%), rgba(56, 189, 248, 0.04), transparent 80%);
}

/* Custom terminal scanline animation */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.terminal-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.15), transparent);
  animation: scanline 6s linear infinite;
  pointer-events: none;
}

/* Terminal blink cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s infinite;
}

/* Floating animation for mascot */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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