/* =========================================
   CYBERPUNK GLITCH TITLE EFFECT 
========================================= */
.title-container {
  margin-bottom: 30px;
  position: relative;
}
.glitch-wrapper {
  text-align: center;
}
.glitch {
  position: relative;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.glitch:hover::before {
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch:hover::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip: rect(10px, 9999px, 20px, 0); }
  100% { clip: rect(80px, 9999px, 90px, 0); }
}
@keyframes glitch-anim2 {
  0% { clip: rect(30px, 9999px, 40px, 0); }
  100% { clip: rect(60px, 9999px, 70px, 0); }
}

/* =========================================
   LOADING SPINNER ANIMATION
========================================= */
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}