/* styles.css */

/* === Animations === */
@keyframes glow-flicker {
  0%, 100% {
    text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, 0 0 20px #00FF00;
  }
  96% {
    text-shadow: none;
  }
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* === Fonts === */
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.syne-mono-regular {
  font-family: "Syne Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

/* === Effects === */
.glitch {
  animation: glow-flicker 20s infinite;
}

.animate-blink {
  animation: blink 1s step-start infinite;
}

.glow-title,
.glow-text {
  text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, 0 0 20px #00FF00;
}

.glow-text:hover {
  animation: none;
  text-shadow: 0 0 5px #FF1493, 0 0 10px #FF1493, 0 0 20px #FF1493;
}

.green-glow {
  filter: drop-shadow(0 0 5px #00FF00) drop-shadow(0 0 10px #00FF00) drop-shadow(0 0 20px #00FF00);
  transition: filter 0.3s ease;
}

.green-glow:hover {
  filter: drop-shadow(0 0 10px #FF1493) drop-shadow(0 0 20px #FF1493) drop-shadow(0 0 30px #FF1493);
}

/* === Background === */
.bg-circuit {
  background-color: #000000;
  background-image: url('/images/space-background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}