/* ============================================================
   默契问答 · Motion
   Signature: two rings drift together on load (sync moment).
   Kept to one orchestrated entrance + light micro-interactions.
   Respects prefers-reduced-motion throughout.
   ============================================================ */

@keyframes ringDriftA {
  0%   { transform: translateX(-14px); }
  60%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes ringDriftB {
  0%   { transform: translateX(14px); }
  60%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dashReveal {
  from { stroke-dashoffset: var(--dash-start); }
  to   { stroke-dashoffset: var(--dash-end); }
}

.ring-a { animation: ringDriftA .6s cubic-bezier(.2,0,0,1) both; }
.ring-b { animation: ringDriftB .6s cubic-bezier(.2,0,0,1) both; }

.fade-up { animation: fadeUp .5s ease both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .12s; }
.fade-up-3 { animation-delay: .19s; }
.fade-up-4 { animation-delay: .26s; }

.pop-in { animation: popIn .3s cubic-bezier(.2,0,0,1) both; }

.score-ring-progress {
  animation: dashReveal 1s cubic-bezier(.2,0,0,1) both .15s;
}

@media (prefers-reduced-motion: reduce) {
  .ring-a, .ring-b, .fade-up, .pop-in, .score-ring-progress {
    animation: none !important;
  }
}