/* =============================================================================
   TacLearn – Animations & Gamification Effects
   ============================================================================= */

/* XP-Float (steigt nach oben) */
.xp-float {
  position: fixed;
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 1.4rem;
  color: var(--c-xp);
  text-shadow: 0 0 10px var(--c-xp);
  pointer-events: none;
  z-index: 4000;
  animation: xpFloat 1.2s ease-out forwards;
}

@keyframes xpFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  50%  { opacity: 1; transform: translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.8); }
}

/* Schütteln (falsche Antwort) */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(8px); }
  45%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}
.shake { animation: shake 0.6s ease both; }

/* Pulsieren (Aktionsaufforderung) */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,230,118,0.6); }
  50%     { box-shadow: 0 0 0 10px rgba(0,230,118,0); }
}
.pulse { animation: pulse 1.8s infinite; }

/* Grün aufblitzen (richtige Antwort) */
@keyframes flashGreen {
  0%  { background: var(--c-panel); }
  30% { background: rgba(0,230,118,0.25); }
  100%{ background: var(--c-panel); }
}
.flash-correct { animation: flashGreen 0.6s ease; }

/* Rot aufblitzen (falsche Antwort) */
@keyframes flashRed {
  0%  { background: var(--c-panel); }
  30% { background: rgba(255,23,68,0.25); }
  100%{ background: var(--c-panel); }
}
.flash-wrong { animation: flashRed 0.6s ease; }

/* Einblenden von oben */
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.slide-down { animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Einblenden von unten */
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.slide-up { animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Bounce für Level-Up */
@keyframes bounce {
  0%,100% { transform: scale(1); }
  25%     { transform: scale(1.15); }
  50%     { transform: scale(0.95); }
  75%     { transform: scale(1.08); }
}
.bounce { animation: bounce 0.6s ease; }

/* Konfetti-Partikel */
.confetti-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5000;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Glitch-Effekt für Titeltext (Optional / auf Dashboard) */
@keyframes glitch {
  0%,100% { text-shadow: none; transform: none; }
  10%     { text-shadow: 2px 0 var(--c-danger), -2px 0 var(--c-secondary); transform: translate(1px); }
  20%     { text-shadow: -2px 0 var(--c-danger), 2px 0 var(--c-secondary); transform: translate(-1px); }
  30%     { text-shadow: none; transform: none; }
}
.glitch { animation: glitch 4s infinite; }

/* Typing-Cursor */
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}
.cursor::after {
  content: '_';
  animation: blink 1s step-end infinite;
  color: var(--c-primary);
}

/* Karten-Flip */
@keyframes cardFlipIn {
  from { transform: rotateY(-90deg); opacity: 0; }
  to   { transform: rotateY(0deg); opacity: 1; }
}
.card-flip { animation: cardFlipIn 0.35s ease; }

/* Progress-Pulse nach Abschluss */
@keyframes progressComplete {
  0%   { box-shadow: 0 0 0 0 rgba(0,230,118,0.8); }
  100% { box-shadow: 0 0 0 16px rgba(0,230,118,0); }
}
.progress-complete { animation: progressComplete 0.5s ease; }