/*
 * 年轮章的「形成」（design.md §7.16）：全程不超过 900ms。
 * 年轮从缺口起依次画出（120–740ms，逐环错开 80ms）→ 图腾按自己的出场动作长出（160–800ms）
 * → 高光斜扫过珐琅面（380–900ms）→ 时间珠弹入缺口（480–820ms）。只动 dashoffset / transform / opacity。
 */
.medal { overflow: visible; }
.medal .m-totem, .medal .m-bead { transform-box: fill-box; transform-origin: center; }
.medal[data-motion="seed"] .m-totem { transform-origin: center bottom; }
.medal .m-glint { opacity: 0; }

.medal.is-pending .m-ring { stroke-dashoffset: var(--dash); }
.medal.is-pending .m-totem { opacity: 0; }
.medal.is-pending .m-bead { transform: scale(0); }

.medal.is-forming .m-ring { animation: m-draw 460ms cubic-bezier(0.3, 0.7, 0.2, 1) both; animation-delay: calc(120ms + var(--i) * 80ms); }
.medal.is-forming .m-totem { animation: m-grow 640ms 160ms cubic-bezier(0.33, 1, 0.68, 1) both; }
.medal.is-forming[data-motion="seed"] .m-totem { animation-name: m-seed; }
.medal.is-forming[data-motion="sail"] .m-totem { animation-name: m-sail; }
.medal.is-forming[data-motion="orbit"] .m-totem { animation-name: m-orbit; }
.medal.is-forming[data-motion="rings"] .m-totem { animation-name: m-rings; }
.medal.is-forming .m-glint { animation: m-glint 520ms 380ms ease-out both; }
.medal.is-forming .m-bead { animation: m-bead 340ms 480ms ease-out both; }

@keyframes m-draw { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }
@keyframes m-grow { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes m-seed { 0% { opacity: 0; transform: translateY(8px) scale(0.4); } 30% { opacity: 1; } 70% { transform: translateY(-1px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes m-sail { 0% { opacity: 0; transform: translateX(-14px) rotate(-6deg); } 35% { opacity: 1; } 65% { transform: translateX(2px) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes m-orbit { 0% { opacity: 0; transform: rotate(-140deg) scale(0.86); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes m-rings { 0% { opacity: 0; transform: scale(0.2); } 40% { opacity: 1; } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes m-glint { 0% { opacity: 0; transform: translateX(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(150px); } }
@keyframes m-bead { 0% { transform: scale(0); } 65% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* 减弱动态效果：不描线、不位移，只用 160ms 透明度显示最终状态 */
@media (prefers-reduced-motion: reduce) {
  .medal.is-forming .m-ring, .medal.is-forming .m-totem, .medal.is-forming .m-glint, .medal.is-forming .m-bead { animation: none; }
  .medal.is-forming { animation: m-fade 160ms ease-out both; }
  @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
}