/* Extra keyframes + utility animation classes */

@keyframes lfGlitch {
  0% {
    transform: translate(0);
    text-shadow: 0 0 0 transparent;
  }
  20% {
    transform: translate(-2px, 1px);
    text-shadow: 2px 0 var(--brand-secondary), -2px 0 var(--brand-accent);
  }
  40% {
    transform: translate(2px, -1px);
    text-shadow: -2px 0 var(--brand-primary), 2px 0 var(--brand-secondary);
  }
  60% {
    transform: translate(-1px, -1px);
    text-shadow: 1px 0 var(--brand-accent), -1px 0 var(--brand-secondary);
  }
  80% {
    transform: translate(1px, 1px);
    text-shadow: -1px 0 var(--brand-primary), 1px 0 var(--brand-accent);
  }
  100% {
    transform: translate(0);
    text-shadow: none;
  }
}

.glitch-active {
  animation: lfGlitch 2.8s steps(2, end) infinite;
}

@keyframes lfNeonPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.35), 0 0 20px rgba(0, 229, 160, 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 229, 160, 0), 0 0 36px rgba(0, 229, 160, 0.45);
  }
}

@keyframes lfRipple {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes lfStaggerIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lfScoreTick {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: lfShimmer 1.2s infinite;
}
@keyframes lfShimmer {
  100% {
    transform: translateX(100%);
  }
}

.progress-line {
  height: 6px;
  border-radius: 999px;
  background: var(--border-subtle);
  overflow: hidden;
}
.progress-line__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--gradient-brand);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-line__bar.is-filled {
  width: var(--pct, 60%);
}