@keyframes bubblePop {
  0%   { opacity: 0; transform: scale(0.3) translateY(30px); }
  50%  { opacity: 1; transform: scale(1.05) translateY(-4px); }
  70%  { transform: scale(0.97) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes slideFromLeft {
  0%   { opacity: 0; transform: translateX(-40px) scale(0.95); }
  60%  { opacity: 1; transform: translateX(6px) scale(1.01); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes endCardReveal {
  0%   { opacity: 0; transform: scale(0.8) translateY(40px); }
  40%  { opacity: 1; transform: scale(1.04) translateY(-8px); }
  70%  { transform: scale(0.98) translateY(2px); }
  85%  { transform: scale(1.01) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes btnPop {
  0%   { opacity: 0; transform: scale(0) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(2deg); }
  80%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes selectPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}
@keyframes shrinkFade {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0.55; transform: scale(0.95); }
}

.anim-bubble { animation: bubblePop 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-info { animation: slideFromLeft 0.5s cubic-bezier(0.34,1.2,0.64,1) both; }
.anim-end { animation: endCardReveal 0.7s cubic-bezier(0.34,1.4,0.64,1) both; }

.anim-selected-pulse { animation: selectPulse 0.35s ease both; }

/* Antwoordknoppen: entree-animatie met per-knop vertraging (--btn-delay via app.js) */
.anim-btn-pop { animation: btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1) var(--btn-delay, 0s) both; }
.anim-btn-shrink-fade { animation: shrinkFade 0.3s ease both; }