/* Futuristic fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:ital,wght@0,300;0,400;0,600;1,300&display=swap&font-display=swap');

:root {
  --color-bg:          #050508;
  --color-bg-alt:      #0c0c12;
  --color-bg-card:     #0e0e18;
  --color-fg:          #e8eaf6;
  --color-fg-dim:      #7986cb;
  --color-accent:      #00e5ff;
  --color-accent-dim:  #0097a7;
  --color-accent2:     #e040fb;
  --color-accent3:     #76ff03;
  --color-danger:      #ff1744;
  --color-border:      #1a1a2e;
  --color-border-glow: rgba(0, 229, 255, 0.35);

  --font-display: 'Orbitron', 'Courier New', monospace;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;
  --font-sans:    'Exo 2', 'Rajdhani', 'Segoe UI', system-ui, sans-serif;

  --nav-height:   64px;
  --section-pad:  6rem 2rem;
  --radius:       6px;
  --radius-lg:    12px;
  --transition:   0.3s ease;

  --glow-cyan:    0 0 8px #00e5ff, 0 0 20px rgba(0,229,255,0.4), 0 0 40px rgba(0,229,255,0.15);
  --glow-purple:  0 0 8px #e040fb, 0 0 20px rgba(224,64,251,0.4), 0 0 40px rgba(224,64,251,0.15);
  --glow-green:   0 0 8px #76ff03, 0 0 20px rgba(118,255,3,0.3);
}

/* ── Quantum diagonal background animation ──────────────────────────────── */
@keyframes quantumShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.03; }
  50%       { opacity: 0.07; }
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  position: relative;
}

/* Layer 1: animated diagonal gradient */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 40px,
      rgba(0, 229, 255, 0.018) 40px,
      rgba(0, 229, 255, 0.018) 41px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 40px,
      rgba(0, 229, 255, 0.012) 40px,
      rgba(0, 229, 255, 0.012) 41px
    );
  background-size: 80px 80px;
  animation: quantumShift 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Layer 2: subtle dot grid that pulses */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,229,255,0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Ensure all content sits above the background layers */
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(1.6rem, 5vw, 4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.12em;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
  filter: none;
}

/* Glitch pseudo-elements — single accent color, no rainbow */
.glitch::before,
.glitch::after {
  background: var(--color-bg) !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  filter: none !important;
}

h2 {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--color-accent);
  margin-bottom: 2.5rem;
  font-weight: 700;
  text-shadow: var(--glow-cyan);
  position: relative;
}

h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin-top: 0.5rem;
  box-shadow: var(--glow-cyan);
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent);
}

p {
  color: var(--color-fg-dim);
  line-height: 1.85;
  font-family: var(--font-sans);
  font-weight: 300;
}

code, pre { font-family: var(--font-mono); }

a { color: var(--color-accent); }
a:hover { text-shadow: var(--glow-cyan); }

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent2));
  border-radius: 3px;
}

/* Cursor */
a, button, [role="button"], label, .file-drop-zone, .btn { cursor: pointer; }