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

:root {
  --color-bg: #030712;
  --color-glass-bg: rgba(17, 24, 39, 0.7);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-neon-cyan: #06b6d4;
  --color-neon-purple: #8b5cf6;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Tech grid background pattern */
.tech-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  position: relative;
}

.tech-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 20%, var(--color-bg) 80%);
  pointer-events: none;
}

/* Glow effects */
.glow-cyan {
  box-shadow: 0 0 40px -5px rgba(6, 182, 212, 0.15);
}

.glow-purple {
  box-shadow: 0 0 40px -5px rgba(139, 92, 246, 0.15);
}

.glow-hover-cyan:hover {
  box-shadow: 0 0 25px -3px rgba(6, 182, 212, 0.3);
  border-color: rgba(6, 182, 212, 0.4);
}

.glow-hover-purple:hover {
  box-shadow: 0 0 25px -3px rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.4);
}

/* Glassmorphism utility */
.glass-panel {
  background: var(--color-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-glass-border);
}

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

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

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

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

/* Fade-in animations for intersection observer */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Custom glow orb animations */
@keyframes float {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
  100% { transform: translate(0px, 0px) scale(1); }
}

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

.animate-float-delayed {
  animation: float 18s infinite ease-in-out;
  animation-delay: 2s;
}