/* Animations CSS */

/* Glitch Text Effect */
.glitch-text {
  position: relative;
  display: inline-block;
  color: var(--color-neon-purple);
  text-shadow: 0 0 10px var(--color-neon-purple-glow);
}

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

.glitch-text::before {
  left: 2px;
  text-shadow: -1px 0 var(--color-neon-cyan);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: 1px 0 var(--color-neon-pink);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0%, 80%, 100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  20% {
    clip-path: inset(10% 0 60% 0);
    opacity: 0.8;
  }
  40% {
    clip-path: inset(40% 0 20% 0);
    opacity: 0.6;
  }
  60% {
    clip-path: inset(60% 0 40% 0);
    opacity: 0.4;
  }
}

@keyframes glitch-anim-2 {
  0%, 80%, 100% {
    clip-path: inset(0 0 0 0);
    opacity: 0.2;
  }
  20% {
    clip-path: inset(70% 0 10% 0);
    opacity: 0.4;
  }
  40% {
    clip-path: inset(10% 0 70% 0);
    opacity: 0.6;
  }
  60% {
    clip-path: inset(30% 0 40% 0);
    opacity: 0.8;
  }
}

/* Pulse Animation */
@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

/* Button Flicker */
.neon-button, .play-button {
  animation: buttonFlicker 5s infinite alternate;
}

@keyframes buttonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    box-shadow: 0 0 10px var(--color-neon-purple-glow);
  }
  20%, 24%, 55% {
    box-shadow: 0 0 20px var(--color-neon-purple-glow);
  }
}

/* Border Pulse Animation */
@keyframes borderPulse {
  0%, 100% {
    border-color: var(--color-neon-purple);
    box-shadow: 0 0 10px var(--color-neon-purple-glow);
  }
  50% {
    border-color: var(--color-neon-cyan);
    box-shadow: 0 0 15px var(--color-neon-cyan-glow);
  }
}

/* Modal Animation */
@keyframes modalAppear {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading Spinner */
.loading-spinner {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(0, 255, 247, 0.1);
  border-radius: 50%;
  border-top-color: var(--color-neon-cyan);
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Initialize Glitch Text on Load */
document.addEventListener('DOMContentLoaded', function() {
  const glitchTexts = document.querySelectorAll('.glitch-text');
  
  glitchTexts.forEach(text => {
    text.setAttribute('data-content', text.textContent);
  });
});