/* ============================================================
   ANIMATIONS.CSS
   ============================================================ */

@keyframes view-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 12px 2px currentColor; }
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.shake { animation: shake var(--dur-slow) var(--ease-in-out); }

@keyframes xp-float {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px); }
}

.xp-float-text {
  position: absolute;
  color: var(--signal-up);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  pointer-events: none;
  animation: xp-float 1.1s var(--ease-out) forwards;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spinner 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}