/* ============================================================
   动效样式：只有 <html class="motion"> 时才生效（由 motion.js 加上）
   每个效果两种状态：.anim（初始）→ .anim.in（播放后）
   新效果照着下面的格式加一段即可
   ============================================================ */
:root{
  --m-dur:.7s;
  --m-ease:cubic-bezier(.2,.7,.2,1);
}

/* fade-up：淡入并上移 */
.motion [data-anim="fade-up"].anim{opacity:0;transform:translateY(18px);transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}
.motion [data-anim="fade-up"].anim.in{opacity:1;transform:none}

/* fade-in：淡入 */
.motion [data-anim="fade-in"].anim{opacity:0;transition:opacity var(--m-dur) var(--m-ease)}
.motion [data-anim="fade-in"].anim.in{opacity:1}

/* stagger：子元素依次出现 */
.motion [data-anim="stagger"].anim>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--m-ease),transform .55s var(--m-ease);transition-delay:calc(var(--i,0) * 90ms)}
.motion [data-anim="stagger"].anim.in>*{opacity:1;transform:none}

/* tracker：首屏订单进度依次点亮 + 盖章 */
.motion .tracker.play li{opacity:.35;transition:opacity .4s var(--m-ease)}
.motion .tracker.play li .dot{background:transparent;border-color:var(--steel);transition:background .3s,border-color .3s,transform .3s var(--m-ease)}
.motion .tracker.play li.lit{opacity:1}
.motion .tracker.play li.lit .dot{transform:scale(1.25)}
.motion .tracker.play li.done.lit .dot{background:var(--pass);border-color:var(--pass);transform:scale(1)}
.motion .tracker.play li.now.lit .dot{background:var(--tag);border-color:var(--tag);transform:scale(1)}
.motion .tracker.play li:not(.done):not(.now){opacity:.55}
.motion .tracker.play .stamp{opacity:0;transform:rotate(4deg) scale(1.5);transform-origin:100% 0;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.motion .tracker.play.stamped .stamp{opacity:1;transform:rotate(4deg) scale(1)}

@media (prefers-reduced-motion:reduce){
  .motion .anim,.motion .anim>*{opacity:1!important;transform:none!important;transition:none!important}
}