:root {
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-purple: #aa00ff;
  --neon-orange: #ff6600;
  --neon-yellow: #ffff00;

  --bg-dark: #0a0a0f;
  --bg-darker: #050508;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;

  --glow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
  --glow-magenta: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta);
  --glow-purple: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
}

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  animation: scanline-flicker 0.1s infinite;
}

@keyframes scanline-flicker {
  0% { opacity: 0.8; }
  50% { opacity: 0.9; }
  100% { opacity: 0.8; }
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.glitch-text {
  position: relative;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  letter-spacing: 0.1em;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  color: var(--neon-magenta);
  animation: glitch-1 2s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  text-shadow: var(--glow-magenta);
}

.glitch-text::after {
  color: var(--neon-yellow);
  animation: glitch-2 3s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  text-shadow: 0 0 10px var(--neon-yellow);
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(3px, -3px); }
  40% { transform: translate(3px, 3px); }
  60% { transform: translate(-3px, -3px); }
  80% { transform: translate(-3px, 3px); }
}

.content-box {
  border: 2px solid var(--neon-cyan);
  box-shadow:
    inset 0 0 20px rgba(0, 255, 255, 0.1),
    0 0 20px rgba(0, 255, 255, 0.3);
}

.section-title {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  animation: neon-flicker 3s infinite alternate;
}

@keyframes neon-flicker {
  0%, 100% {
    text-shadow:
      0 0 10px var(--neon-cyan),
      0 0 20px var(--neon-cyan),
      0 0 30px var(--neon-cyan);
  }
  50% {
    text-shadow:
      0 0 5px var(--neon-cyan),
      0 0 10px var(--neon-cyan);
  }
}

@media (max-width: 768px) {
  .scanlines {
    opacity: 0.3;
  }

  .glitch-text::before,
  .glitch-text::after {
    display: none;
  }

  .section-title {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines,
  .glitch-text::before,
  .glitch-text::after,
  .section-title {
    animation: none !important;
  }
}