/* ========================================
   BASE STYLES
   Reset, Variables, Fonts
   ======================================== */

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap");

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CSS Variables */
:root {
  --neon-cyan: #00ffff;
  --neon-pink: #ff00ff;
  --neon-purple: #bd00ff;
  --neon-green: #00ff00;
  --neon-orange: #ff6600;
  --dark-bg: #0a0a0f;
  --grid-color: rgba(0, 255, 255, 0.1);
}

/* Body */
body {
  font-family: "Share Tech Mono", monospace;
  background: var(--dark-bg);
  color: var(--neon-cyan);
  overflow-x: hidden;
  position: relative;
  cursor: none;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--neon-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: all 0.1s ease;
  box-shadow: 0 0 20px var(--neon-cyan);
  mix-blend-mode: difference;
}

.cursor-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--neon-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  box-shadow: 0 0 10px var(--neon-cyan);
  opacity: 0;
  animation: trailFade 0.5s ease-out;
}

.custom-cursor.active {
  transform: scale(0.8);
  background: rgba(0, 255, 255, 0.2);
}

.custom-cursor.hover {
  transform: scale(1.5);
  border-color: var(--neon-pink);
  box-shadow: 0 0 30px var(--neon-pink);
}

/* Typography */
h1,
h2,
h3 {
  font-family: "Orbitron", sans-serif;
}