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

:root {
  --bg-primary: #0b011d;
  --bg-secondary: #170335;
  --bg-tertiary: #270650;
  --neon-pink: #ff007f;
  --neon-cyan: #00f5ff;
  --neon-purple: #9d4edd;
  --neon-yellow: #fffb00;
  --text-main: #ffffff;
  --text-muted: #d0c8ec;
  --font-header: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Outfit', sans-serif;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow-pink: 0 0 10px #ff007f, 0 0 20px rgba(255, 0, 127, 0.3);
  --shadow-cyan: 0 0 10px #00f5ff, 0 0 20px rgba(0, 245, 255, 0.3);
  --shadow-purple: 0 0 10px #9d4edd, 0 0 20px rgba(157, 78, 237, 0.3);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
  background-size: 100% 4px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.8;
}

.perspective-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.perspective-grid {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 300%;
  height: 200%;
  background-image: 
    linear-gradient(to right, rgba(0, 245, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 0, 127, 0.15) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: translateX(-50%) perspective(200px) rotateX(65deg);
  transform-origin: bottom center;
  animation: grid-scroll-anim 12s linear infinite;
}

@keyframes grid-scroll-anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 600px;
  }
}

.retro-sun {
  position: absolute;
  bottom: 30vh;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ff007f 0%, #ff5e00 50%, #fffb00 100%);
  z-index: -1;
  box-shadow: 0 0 50px rgba(255, 0, 127, 0.6);
  -webkit-mask-image: linear-gradient(to bottom, 
    black 0%, black 50%,
    transparent 52%, black 54%,
    transparent 58%, black 61%,
    transparent 66%, black 70%,
    transparent 76%, black 81%,
    transparent 88%, black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, 
    black 0%, black 50%,
    transparent 52%, black 54%,
    transparent 58%, black 61%,
    transparent 66%, black 70%,
    transparent 76%, black 81%,
    transparent 88%, black 94%,
    transparent 100%
  );
}

.text-glow-pink {
  text-shadow: var(--shadow-pink);
}

.text-glow-cyan {
  text-shadow: var(--shadow-cyan);
}

.neon-border-pink {
  border: 2px solid var(--neon-pink);
  box-shadow: var(--shadow-pink);
}

.neon-border-cyan {
  border: 2px solid var(--neon-cyan);
  box-shadow: var(--shadow-cyan);
}

.crt-flicker {
  animation: crt-flicker-anim 0.15s infinite;
}

@keyframes crt-flicker-anim {
  0% { opacity: 0.99; }
  50% { opacity: 1; }
  100% { opacity: 0.995; }
}

.scanlines-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 9998;
}