/* Custom Fonts for kono.my */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");

/* Fallback for retro gaming font */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* Custom font variables */
:root {
  --primary-font: "Orbitron", "Press Start 2P", monospace;
  --secondary-font: "Rajdhani", "Press Start 2P", monospace;
  --accent-font: "Audiowide", "Press Start 2P", monospace;
  --mono-font: "Space Mono", "Press Start 2P", monospace;
  --tech-font: "Electrolize", "Press Start 2P", monospace;
}

/* Letter color cycling animation */
@keyframes colorCycle {
  0% {
    color: #ffffff;
    text-shadow: 2px 2px 0px #00ff00, 4px 4px 0px #008800, 0 0 10px #00ff00;
  }
  14.28% {
    color: #ff0080;
    text-shadow: 2px 2px 0px #ff0080, 4px 4px 0px #cc0066, 0 0 10px #ff0080;
  }
  28.56% {
    color: #ff4000;
    text-shadow: 2px 2px 0px #ff4000, 4px 4px 0px #cc3300, 0 0 10px #ff4000;
  }
  42.84% {
    color: #ffff00;
    text-shadow: 2px 2px 0px #ffff00, 4px 4px 0px #cccc00, 0 0 10px #ffff00;
  }
  57.12% {
    color: #00ff00;
    text-shadow: 2px 2px 0px #00ff00, 4px 4px 0px #00cc00, 0 0 10px #00ff00;
  }
  71.4% {
    color: #00ffff;
    text-shadow: 2px 2px 0px #00ffff, 4px 4px 0px #00cccc, 0 0 10px #00ffff;
  }
  85.68% {
    color: #8000ff;
    text-shadow: 2px 2px 0px #8000ff, 4px 4px 0px #6600cc, 0 0 10px #8000ff;
  }
  100% {
    color: #ffffff;
    text-shadow: 2px 2px 0px #00ff00, 4px 4px 0px #008800, 0 0 10px #00ff00;
  }
}

@keyframes titleSlide {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Individual letter animations with staggered delays */
.letter {
  display: inline-block;
  animation: colorCycle 3s ease-in-out infinite;
}

.letter-1 {
  animation-delay: 0s;
}

.letter-2 {
  animation-delay: 0.2s;
}

.letter-3 {
  animation-delay: 0.4s;
}

.letter-4 {
  animation-delay: 0.6s;
}

.letter-5 {
  animation-delay: 0.8s;
}

.letter-6 {
  animation-delay: 1s;
}

.letter-7 {
  animation-delay: 1.2s;
}

/* Glitch effect animation for hover */
@keyframes glitch {
  0%,
  100% {
    transform: translate(0);
  }
  10% {
    transform: translate(-1px, 1px);
  }
  20% {
    transform: translate(1px, -1px);
  }
  30% {
    transform: translate(-1px, -1px);
  }
  40% {
    transform: translate(1px, 1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  60% {
    transform: translate(1px, -1px);
  }
  70% {
    transform: translate(-1px, -1px);
  }
  80% {
    transform: translate(1px, 1px);
  }
  90% {
    transform: translate(-1px, 1px);
  }
}