/* animations.css — reward & feedback motion (theme-neutral). Terminal-specific
   styling (uppercase banners, glow, blinking cursor) lives in theme.css.
   All effects are gated in JS by prefers-reduced-motion + a user toggle. */

@keyframes pulseSuccess {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}
@keyframes pulseError {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
  100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); transform: translateX(0); }
}
.pulse-success { animation: pulseSuccess 0.6s ease-out; }
.pulse-error { animation: pulseError 0.45s ease-out; }

/* Blinking cursor keyframe (used by the terminal theme's .brand::after). */
@keyframes blink { 50% { opacity: 0; } }

@keyframes stamp {
  0% { transform: scale(0.96); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.step-stamp { animation: stamp 0.32s cubic-bezier(.2,.8,.2,1); }

/* Reward banner — earned "mastered" moment (neutral; terminal adds glow/uppercase). */
.reward-banner {
  position: fixed; left: 50%; top: 84px; translate: -50% -20px;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 12px 22px; font-weight: 700; box-shadow: var(--shadow);
  opacity: 0; z-index: 50; pointer-events: none;
  transition: opacity 0.35s ease, translate 0.35s cubic-bezier(.2,.8,.2,1);
}
.reward-banner.show { opacity: 1; translate: -50% 0; }
.reward-concept { border-color: var(--success); color: var(--success); }
.reward-topic { border-color: var(--accent-2); color: var(--accent-2); }

/* Particle burst */
.burst-layer { position: fixed; left: 50%; top: 120px; width: 0; height: 0; z-index: 49; pointer-events: none; }
.particle {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  left: 0; top: 0; opacity: 1;
  animation: fly 1.1s ease-out forwards;
}
@keyframes fly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(200deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-success, .pulse-error, .step-stamp, .particle { animation: none !important; }
  .reward-banner { transition: opacity 0.2s linear; }
  .meter .fill { transition: none; }
}