@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&display=swap";

/* styles.css */
html, body {
  scroll-behavior: auto !important;
}

* {
  font-family: Courier New, Courier, monospace;
}

body {
  animation: scanlines .1s linear infinite;
  background-color: #000;
  background-image: linear-gradient(#00ff4108 1px, #0000 1px), linear-gradient(90deg, #00ff4108 1px, #0000 1px);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 20px 20px;
  background-attachment: scroll;
  background-origin: padding-box;
  background-clip: border-box;
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 4px;
  }
}

.glitch-text {
  position: relative;
  animation: glitch 2s infinite;
}

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

.glitch-text:before {
  animation: glitch-1 .3s infinite;
  color: #ff0040;
  z-index: -1;
}

.glitch-text:after {
  animation: glitch-2 .3s infinite;
  color: #0ff;
  z-index: -2;
}

@keyframes glitch {
  0%, 90%, 100% {
    transform: translate3d(0, 0, 0);
  }

  95% {
    transform: translate3d(-2px, 0, 0);
  }
}

@keyframes glitch-1 {
  0%, 90%, 100% {
    transform: translate3d(0, 0, 0);
  }

  95% {
    transform: translate3d(2px, 0, 0);
  }
}

@keyframes glitch-2 {
  0%, 90%, 100% {
    transform: translate3d(0, 0, 0);
  }

  95% {
    transform: translate3d(-2px, 2px, 0);
  }
}

.terminal-glow {
  box-shadow: 0 0 20px #00ffff4d, inset 0 0 20px #00ffff1a;
}

.terminal-glow:before {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: scanline .1s linear infinite;
  background: linear-gradient(#0000 50%, #00ff4108 50%) 0 0 / 100% 4px;
  inset: 0;
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #0ff;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00ff41;
}

@media (width <= 768px) {
  .glitch-text {
    font-size: 2rem;
  }

  .terminal-glow {
    margin: 1rem;
  }
}

input:focus {
  box-shadow: 0 0 10px #00ffff80;
  outline: none !important;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px #0ff3;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px #00ffff80;
  }

  50% {
    box-shadow: 0 0 20px #0ffc;
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}