:root {
  --blue: #0080FF;
  --cyan: #00D9FF;
  --near: #131313;
  --white: #FFFFFF;
  --muted: #B3B3B3;
}

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

html {
  background: var(--near);
  color: var(--white);
  font-family: 'Work Sans', system-ui, sans-serif;
  overflow-x: clip;
  max-width: 100%;
  margin: 0;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  min-height: 100%;
  width: 100%;
  position: relative;
  cursor: none;
}

::selection {
  background: var(--cyan);
  color: var(--near);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mono {
  font-family: 'Courier New', monospace;
}

/* ========== GLOBAL ANIMATIONS ========== */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes revealDown {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  from { opacity: 0.1; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 0.2; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes pulseCenter {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.3), inset 0 0 15px rgba(0, 217, 255, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(0, 217, 255, 0.6), inset 0 0 30px rgba(0, 217, 255, 0.4);
  }
}

@keyframes rotateStack {
  0% { transform: rotate(0deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1.05); }
}

@keyframes rotateStackReverse {
  0% { transform: rotate(0deg) scale(1.1); }
  100% { transform: rotate(-360deg) scale(1.1); }
}

@keyframes orbitFloat {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(6px); }
}

@keyframes dashFlow {
  to { stroke-dashoffset: -200; }
}