/* =========================================================
   MBTI 人格实验室 · animations.css
   关键帧动画与动效辅助类
   ========================================================= */

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes rippleAnim {
  to { transform: scale(3.2); opacity: 0; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(-12px) scale(0.94); }
}

@keyframes orbFloat1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, 8vh) scale(1.12); }
}

@keyframes orbFloat2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-8vw, -6vh) scale(1.08); }
}

@keyframes orbFloat3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4vw, -10vh) scale(1.15); }
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes progressSheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(0.82); opacity: 0.6; }
}

@keyframes dotJump {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-8px); opacity: 1; }
}

@keyframes letterPop {
  from { opacity: 0; transform: translateY(18px) scale(0.6) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

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

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 交互动效工具类 */
.float-anim { animation: floatY 5s ease-in-out infinite; }
.scale-in  { animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fade-in   { animation: fadeIn 0.6s ease both; }

/* 题目切换动画（配合 JS 重绘触发） */
.q-swap { animation: qSwap 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes qSwap {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}
.q-swap-back { animation: qSwapBack 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes qSwapBack {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: translateX(0); }
}