/* ============================================================
   NexArena — Animations & Micro-interactions
   ============================================================ */

/* Neon flicker on logo */
@keyframes neonFlicker {
  0%, 100% { opacity: 1; }
  92%       { opacity: 1; }
  93%       { opacity: 0.5; }
  94%       { opacity: 1; }
  96%       { opacity: 0.7; }
  97%       { opacity: 1; }
}

.neon-flicker { animation: neonFlicker 6s ease infinite; }

/* Scan line effect */
@keyframes scanLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scan-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(6,182,212,0.15), transparent);
  z-index: 9998;
  animation: scanLine 8s linear infinite;
  pointer-events: none;
}

/* Typing cursor */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--accent);
}

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

/* Counter animation */
.counter-value {
  display: inline-block;
  transition: all 0.1s ease;
}

/* Pulse ring */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulseRing 2s ease infinite;
}

/* Glitch text */
@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  20%       { clip-path: inset(10% 0 60% 0); transform: translate(-3px, -2px); }
  40%       { clip-path: inset(40% 0 30% 0); transform: translate(3px, 1px); }
  60%       { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 2px); }
  80%       { clip-path: inset(20% 0 70% 0); transform: translate(2px, -1px); }
}

@keyframes glitch2 {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  20%       { clip-path: inset(60% 0 10% 0); transform: translate(3px, 2px); }
  40%       { clip-path: inset(30% 0 40% 0); transform: translate(-3px, -1px); }
  60%       { clip-path: inset(5% 0 70% 0); transform: translate(2px, -2px); }
  80%       { clip-path: inset(70% 0 20% 0); transform: translate(-2px, 1px); }
}

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.glitch::before {
  color: var(--accent);
  animation: glitch1 4s infinite linear alternate-reverse;
  opacity: 0.5;
}

.glitch::after {
  color: var(--primary-light);
  animation: glitch2 4s infinite linear alternate-reverse;
  opacity: 0.5;
}

/* Loading bar */
.progress-bar {
  height: 3px;
  background: var(--gradient-cyber);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  right: 0;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 2s ease infinite;
}

@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}