/* Glitch Text Effect */
.glitch-text {
  position: relative;
  animation: glitch 5s infinite;
}

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

.glitch-text::before {
  color: var(--neon-primary);
  animation: glitch-effect 3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
  opacity: 0.8;
}

.glitch-text::after {
  color: var(--neon-accent);
  animation: glitch-effect 2s infinite reverse;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  transform: translate(0.025em, 0.0125em);
  opacity: 0.8;
}

@keyframes glitch-effect {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(-5px, 0);
  }
  20% {
    transform: translate(5px, 0);
  }
  30% {
    transform: translate(-5px, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-2px, 2px);
  }
  60% {
    transform: translate(0, 0);
  }
  70% {
    transform: translate(2px, -2px);
  }
  80% {
    transform: translate(-2px, 0);
  }
  90% {
    transform: translate(2px, 0);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes glitch {
  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
    transform: skewX(0deg);
    text-shadow: 0 0 10px var(--neon-glow);
  }
  41% {
    transform: skewX(10deg);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
  42% {
    transform: skewX(-10deg);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
  59% {
    transform: skewX(40deg) skewY(10deg);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
  60% {
    transform: skewX(-40deg) skewY(-10deg);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
  66% {
    transform: skewX(10deg) scale(1.1);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
  70% {
    transform: skewX(-10deg);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
  72% {
    transform: skewX(20deg) skewY(5deg);
    text-shadow: 0.5px 0 0 var(--neon-primary), -0.5px 0 0 var(--neon-accent);
  }
}

/* Neon Pulse Animation */
@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 5px var(--neon-glow), 0 0 10px var(--neon-glow), 0 0 15px var(--neon-glow), 0 0 20px var(--neon-primary), 0 0 35px var(--neon-primary), 0 0 40px var(--neon-primary);
  }
  50% {
    text-shadow: 0 0 2px var(--neon-glow), 0 0 5px var(--neon-glow), 0 0 10px var(--neon-glow), 0 0 15px var(--neon-primary), 0 0 25px var(--neon-primary), 0 0 30px var(--neon-primary);
  }
}

/* Apply neon pulse to logo */
.logo {
  animation: neonPulse 2s infinite alternate;
}

/* Hover animation for game cards */
@keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px var(--neon-glow), 0 0 10px var(--neon-glow);
  }
  50% {
    box-shadow: 0 0 10px var(--neon-glow), 0 0 20px var(--neon-glow), 0 0 30px var(--neon-glow);
  }
  100% {
    box-shadow: 0 0 5px var(--neon-glow), 0 0 10px var(--neon-glow);
  }
}

/* Diagonal lines scanline effect */
@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 10px
  );
  pointer-events: none;
  z-index: 9999;
  animation: scanlines 10s linear infinite;
  opacity: 0.3;
}

/* Flickering text effect */
@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.5;
  }
}

.footer-title {
  animation: flicker 8s infinite;
}

/* Page transition */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: fadeIn 0.8s ease-out;
}

/* Loading spinner animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(246, 55, 236, 0.3);
  border-top: 4px solid var(--neon-primary);
  border-radius: 50%;
  animation: rotate 1s linear infinite;
  margin: 20px auto;
}

/* Breathing animation for buttons */
@keyframes breathe {
  0%, 100% {
    box-shadow: 0 0 5px var(--neon-glow), 0 0 10px var(--neon-glow);
  }
  50% {
    box-shadow: 0 0 15px var(--neon-glow), 0 0 20px var(--neon-glow), 0 0 25px var(--neon-glow);
  }
}

.neon-button {
  animation: breathe 3s infinite;
}

/* Horizontal scan line effect */
@keyframes horizontalScan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

.horizontal-scan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--neon-primary), transparent);
  opacity: 0.5;
  z-index: 9999;
  pointer-events: none;
  animation: horizontalScan 8s linear infinite;
}

/* Mobile menu toggle animation */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Button click effect */
@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

button:active {
  animation: buttonPress 0.3s ease;
}

/* Floating animation for category cards */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.category-card:hover {
  animation: float 3s ease infinite;
}