/* ── Forward: next question ──────────────────────── */
.field-item.enter {
  animation: slideInUp var(--transition) forwards;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

.field-item.exit {
  animation: slideOutUp var(--transition) forwards;
}

@keyframes slideOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-48px); }
}

/* ── Backward: previous question ────────────────── */
.field-item.enter-reverse {
  animation: slideInDown var(--transition) forwards;
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-48px); }
  to   { opacity: 1; transform: translateY(0); }
}

.field-item.exit-reverse {
  animation: slideOutDown var(--transition) forwards;
}

@keyframes slideOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(48px); }
}

/* ── Shake on validation error ───────────────────── */
.field-item.shake {
  animation: shake 320ms ease;
}

@keyframes shake {
  0%,  100% { transform: translateX(0); }
  20%        { transform: translateX(-10px); }
  40%        { transform: translateX(10px); }
  60%        { transform: translateX(-7px); }
  80%        { transform: translateX(7px); }
}

/* ── End screen entry ────────────────────────────── */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Choice option pop-in ────────────────────────── */
.choice-option {
  animation: optionIn 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.choice-option:nth-child(1) { animation-delay: 60ms; }
.choice-option:nth-child(2) { animation-delay: 100ms; }
.choice-option:nth-child(3) { animation-delay: 140ms; }
.choice-option:nth-child(4) { animation-delay: 180ms; }

@keyframes optionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}