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

/* Base reset styles */
html {
  scroll-behavior: smooth;
  background-color: #050508;
  color: #e2e8f0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  background-color: #050508;
}

/* Premium Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #050508;
}
::-webkit-scrollbar-thumb {
  background: #161922;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00f0ff;
}

/* Linear-gradients cyber grid background */
.cyber-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
}

.glow-shadow-cyan {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12);
}

.glow-shadow-magenta {
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.12);
}

/* Code-editor live heartbeat wave animation */
@keyframes wave-motion {
  0%, 100% {
    d: path("M0 50 Q 50 10, 100 50 T 200 50 T 300 50 T 400 50");
  }
  50% {
    d: path("M0 50 Q 50 90, 100 50 T 200 50 T 300 10, 400 50");
  }
}
.wave-path-1 {
  animation: wave-motion 3.5s ease-in-out infinite;
}

@keyframes wave-motion-2 {
  0%, 100% {
    d: path("M0 60 Q 60 90, 120 60 T 240 60 T 360 60 T 400 60");
  }
  50% {
    d: path("M0 60 Q 60 10, 120 60 T 240 60 T 360 90, 400 60");
  }
}
.wave-path-2 {
  animation: wave-motion-2 4.5s ease-in-out infinite;
}

/* Dynamic custom scale and glow interaction curves */
.transition-all-custom {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bg-dot-grid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
  background-size: 24px 24px;
}