/* ═══════════════════════════════════════════════════
   Učim Nemački – animations.css
═══════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0);    }
  30%       { transform: translateY(-14px); }
  60%       { transform: translateY(-6px);  }
}
@keyframes pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.06); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0);   }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px);  }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px);  }
}
@keyframes rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-12px); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1);  }
}
@keyframes zoomOut {
  from { opacity: 1; transform: scale(1);  }
  to   { opacity: 0; transform: scale(.7); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1);   }
  14%       { transform: scale(1.2); }
  28%       { transform: scale(1);   }
  42%       { transform: scale(1.15); }
  70%       { transform: scale(1);   }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0);    }
  25%       { transform: rotate(-8deg); }
  75%       { transform: rotate(8deg);  }
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}
@keyframes correctPulse {
  0%   { box-shadow: 0 0 0 0   rgba(22,163,74,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(22,163,74,0);  }
  100% { box-shadow: 0 0 0 0   rgba(22,163,74,0);   }
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0);    background: #FEE2E2; }
  25%       { transform: translateX(-10px); }
  75%       { transform: translateX(10px);  }
}
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress, 100%); }
}
@keyframes starPop {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);       opacity: 1; }
}
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0);    opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}
@keyframes parrotFly {
  0%   { transform: translateY(0)    rotate(-4deg); }
  25%  { transform: translateY(-16px) rotate(4deg);  }
  50%  { transform: translateY(-8px)  rotate(-2deg); }
  75%  { transform: translateY(-20px) rotate(6deg);  }
  100% { transform: translateY(0)    rotate(-4deg); }
}
@keyframes spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes scoreReveal {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(5deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0);     opacity: 1; }
}
@keyframes badgeEarn {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  80%  { transform: scale(.95);              }
  100% { transform: scale(1);               opacity: 1; }
}

/* ── Utility animation classes ────────────────────── */
.animate-fade-in    { animation: fadeIn    .4s ease both; }
.animate-fade-out   { animation: fadeOut   .3s ease both; }
.animate-slide-up   { animation: slideUp   .5s ease both; }
.animate-slide-down { animation: slideDown .5s ease both; }
.animate-slide-right{ animation: slideInRight .4s ease both; }
.animate-slide-left { animation: slideInLeft  .4s ease both; }
.animate-bounce     { animation: bounce    .7s ease; }
.animate-pulse      { animation: pulse     1.2s ease infinite; }
.animate-shake      { animation: shake     .4s ease; }
.animate-rotate     { animation: rotate    1.5s linear infinite; }
.animate-float      { animation: float     3s ease-in-out infinite; }
.animate-zoom-in    { animation: zoomIn    .4s cubic-bezier(.34,1.56,.64,1) both; }
.animate-heartbeat  { animation: heartbeat 1.2s ease; }
.animate-wiggle     { animation: wiggle    .5s ease; }

/* Delay helpers */
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }
.delay-7 { animation-delay: .7s; }
.delay-8 { animation-delay: .8s; }

/* ── Quiz feedback animations ────────────────────── */
.option-btn.correct {
  animation: correctPulse .6s ease forwards;
}
.option-btn.wrong {
  animation: wrongShake .4s ease;
}

/* ── Parrot animations ───────────────────────────── */
.parrot-fly {
  animation: parrotFly 2.4s ease-in-out infinite;
}
.parrot-bounce {
  animation: bounce 1s ease-in-out infinite;
}
.parrot-logo {
  animation: float 4s ease-in-out infinite;
}

/* ── Loading spinner ─────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(107,33,168,.15);
  border-top-color: #6B21A8;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
}
.spinner-sm { width: 20px; height: 20px; border-width: 3px; }
.spinner-lg { width: 60px; height: 60px; border-width: 5px; }

.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(255,255,255,.85);
  z-index: 4000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
}
.loading-text { font-weight: 700; color: #6B21A8; }

/* ── Progress bar animation ──────────────────────── */
.progress-fill.animated {
  animation: progressFill 1.2s cubic-bezier(.4,0,.2,1) forwards;
  width: 0 !important;
}

/* ── Score reveal ────────────────────────────────── */
.score-circle.reveal {
  animation: scoreReveal .7s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Achievement badge earn ──────────────────────── */
.achievement-badge.earn {
  animation: badgeEarn .6s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Star rating ─────────────────────────────────── */
.star-pop {
  display: inline-block;
  animation: starPop .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Confetti pieces (CSS-only) ──────────────────── */
.confetti-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5000; overflow: hidden;
}
.confetti-piece {
  position: absolute; width: 10px; height: 10px; border-radius: 2px;
  animation: confettiFall linear forwards;
  opacity: 0;
}
.confetti-piece:nth-child(odd)  { border-radius: 50%; }
/* Individual positions & colors generated by JS */

/* ── Page transition ─────────────────────────────── */
.page-transition-enter {
  animation: fadeIn .3s ease both;
}

/* ── Hover glow (cards) ──────────────────────────── */
.hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(147,51,234,.3), 0 12px 40px rgba(107,33,168,.18);
  transition: box-shadow .25s;
}

/* ── Number count-up animation class ────────────── */
.count-up {
  display: inline-block;
  animation: zoomIn .5s cubic-bezier(.34,1.56,.64,1) both;
}