/* Animations and Special Effects */

/* Scanlines Effect */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.3) 50%
  );
  background-size: 100% 4px;
  z-index: 999;
  pointer-events: none;
  opacity: 0.2;
}

/* Noise Effect */
.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAA0klEQVRoge3ZSwoEIQxF0ex/07NpGATx+1JJeucwF+JRx7yZmZmZmZmZmdknZuCaCTg+MupE5H+jTkRqX5GJ2JfvCBOxL98RJmJfviNMxL58R5iIfb0fEV3w7ZhPcZknIrXPEKjDFZEo5NURqcJVzlFEqnCVcxSRKlzlHEWkClc5RxGpwlXOUUSqcJVzFJEqXOUcRaQKVzlHEanCVc5RRKpwlXMUkSpc5RxFpArnUYs4oe8Q4vEnIrXPEOTxJyK1zxDm8ScitY/4Z/LqSDsyi5mZmZnZN74AoJkbGzXcWQMAAAAASUVORK5CYII=');
  opacity: 0.05;
  z-index: 998;
  pointer-events: none;
}

/* Glitch Text Effect */
.glitch-text {
  position: relative;
  animation: glitch 2s 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(--glitch-blue);
  z-index: -1;
  animation: glitch-anim 3s infinite;
}

.glitch-text::after {
  color: var(--glitch-red);
  z-index: -2;
  animation: glitch-anim 2s infinite;
}

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

/* Loading Bar Animation */
.loading-animation {
  width: 100%;
  height: 20px;
  background-color: var(--dark-gray);
  margin-bottom: 30px;
  border: 2px solid var(--crt-green);
  position: relative;
  overflow: hidden;
}

.loading-bar {
  width: 30%;
  height: 100%;
  background-color: var(--crt-green);
  animation: loading 2s infinite;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* Typewriter Effect for Menu */
.nav-link::after {
  content: '';
  position: absolute;
  top: 0;
  right: -4px;
  width: 2px;
  height: 100%;
  background-color: var(--crt-green);
  animation: blink 1s step-end infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-link:hover::after {
  opacity: 1;
}

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

/* CRT On/Off Effect */
.crt-screen {
  animation: turnOn 2.5s ease-in-out;
}

@keyframes turnOn {
  0% {
    transform: scale(0.8);
    opacity: 0;
    filter: brightness(10);
  }
  10% {
    transform: scale(0.8);
    opacity: 0.4;
    filter: brightness(10);
  }
  20% {
    transform: scale(0.8);
    opacity: 0.6;
    filter: brightness(5);
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
    filter: brightness(2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

/* Button Hover Animation */
.pixelated-button, .play-button {
  position: relative;
  overflow: hidden;
}

.pixelated-button::after, .play-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: all 0.6s ease;
}

.pixelated-button:hover::after, .play-button:hover::after {
  left: 100%;
}

/* Form Input Focus Effect */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 10px var(--crt-green);
  animation: pulseBorder 1.5s infinite;
}

@keyframes pulseBorder {
  0%, 100% {
    border-color: var(--crt-green);
  }
  50% {
    border-color: var(--amber);
  }
}

/* Random Glitch Animation */
@keyframes randomGlitch {
  0%, 100% {
    clip-path: inset(80% 0 0 0);
  }
  20% {
    clip-path: inset(10% 0 60% 0);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
  }
  60% {
    clip-path: inset(20% 0 40% 0);
  }
  80% {
    clip-path: inset(0 0 80% 0);
  }
}

/* CRT Flicker Effect */
.crt-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 255, 51, 0.03);
  opacity: 0;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
}

/* Terminal Cursor Animation */
.terminal-line:last-child::after {
  content: '_';
  display: inline-block;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Game Card Hover Animation */
.game-card {
  position: relative;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(51, 255, 51, 0.1) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(51, 255, 51, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.game-card:hover::before {
  opacity: 1;
}