/* ─────────────────────────────────────────────
   LINGSTER DEUTSCH-TRAINER – Animationen
   ───────────────────────────────────────────── */

/* ── SPLASH ── */
@keyframes splashIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes splashFadeOut {
  to { opacity: 0; pointer-events: none; }
}
@keyframes loadBar {
  from { width: 0%; }
  to   { width: 100%; }
}
@keyframes flagWave {
  from { transform: rotate(-8deg) scale(1);    }
  to   { transform: rotate(8deg)  scale(1.08); }
}

/* ── VIEW TRANSITIONS ── */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* ── BOUNCE ── */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3);   }
  50%  { opacity: 1; transform: scale(1.15);  }
  70%  { transform: scale(0.92);              }
  100% { transform: scale(1);                 }
}

/* ── PULSE ── */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.85; }
}
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ── SHAKE (Fehler-Feedback) ── */
@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.45s cubic-bezier(.36,.07,.19,.97) both; }

/* ── CORRECT FLASH (Richtig-Feedback) ── */
@keyframes correctFlash {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  50%  { box-shadow: 0 0 0 14px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.correct-flash { animation: correctFlash 0.5s ease forwards; }

/* ── TOAST ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

/* ── LEVEL-UP ── */
@keyframes levelUpAnim {
  0%   { opacity: 0; transform: scale(0.5);  }
  20%  { opacity: 1; transform: scale(1.2);  }
  50%  { opacity: 1; transform: scale(1);    }
  75%  { opacity: 1; transform: scale(1);    }
  100% { opacity: 0; transform: scale(1.4);  }
}

/* ── XP-BURST ── */
@keyframes xpBurst {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.4); }
}
.xp-burst {
  position: fixed;
  font-size: 1.1rem; font-weight: 800;
  color: var(--accent-gold);
  pointer-events: none; z-index: 500;
  animation: xpBurst 0.8s ease forwards;
}

/* ── STREAK FIRE ── */
@keyframes firePulse {
  0%, 100% { text-shadow: 0 0 6px rgba(251,146,60,0.5); }
  50%       { text-shadow: 0 0 20px rgba(251,146,60,0.9); }
}
.fire-active { animation: firePulse 1.2s ease-in-out infinite; }

/* ── PROGRESS FILL ── */
@keyframes progressFill {
  from { width: 0%; }
}
.progress-bar__fill { animation: progressFill 0.8s cubic-bezier(.34,1.56,.64,1) both; }

/* ── CARD HOVER GLOW ── */
.module-card:hover .module-card__glow {
  opacity: 0.18;
  transition: opacity 0.25s ease;
}

/* ── SPINNER ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── WORD REVEAL (Flashcard) ── */
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.word-revealed { animation: wordReveal 0.3s ease both; }

/* ── BOTTOM NAV TAP ── */
.bottom-nav__item:active { transform: scale(0.88); }
.bottom-nav__item { transition: color 0.15s, transform 0.1s; }

/* ── BENTO GRID STAGGER ── */
.bento-grid .module-card { animation: fadeIn 0.3s ease both; }
.bento-grid .module-card:nth-child(1) { animation-delay: 0.04s; }
.bento-grid .module-card:nth-child(2) { animation-delay: 0.08s; }
.bento-grid .module-card:nth-child(3) { animation-delay: 0.12s; }
.bento-grid .module-card:nth-child(4) { animation-delay: 0.16s; }
.bento-grid .module-card:nth-child(5) { animation-delay: 0.20s; }

/* ── ANSWER BUTTON PRESS ── */
@keyframes btnPress {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.btn-pressed { animation: btnPress 0.2s ease both; }

/* ── TOPIC CARD STAGGER ── */
.topic-card { animation: slideDown 0.25s ease both; }
.topic-card:nth-child(1) { animation-delay: 0.03s; }
.topic-card:nth-child(2) { animation-delay: 0.06s; }
.topic-card:nth-child(3) { animation-delay: 0.09s; }
.topic-card:nth-child(4) { animation-delay: 0.12s; }
.topic-card:nth-child(5) { animation-delay: 0.15s; }
.topic-card:nth-child(6) { animation-delay: 0.18s; }
.topic-card:nth-child(7) { animation-delay: 0.21s; }

/* ── RESULT EMOJI ── */
.result__emoji { animation: bounceIn 0.6s cubic-bezier(.34,1.56,.64,1) 0.15s both; }