/*
 * 动态地图行动语法：
 * 1. 先显示出发点；2. 路线沿 SVG path 从起点生长；
 * 3. 路线抵达后才显示到达点；4. 最后显示状态变化。
 * 节点组的 SVG transform 承担地理定位，动画不得改写它。
 */

/* 静态默认态必须完整可读，不得在页面载入时偷播第五阶段。 */
.motion-ready.motion-static .stage-item {
  opacity: 1;
  filter: none;
}

.motion-ready.motion-static .stage-item [data-motion] {
  animation: none !important;
  opacity: 1;
  stroke-dashoffset: 0;
}

/* 播放时未到来的地点与行动完全隐藏，不用幽灵节点预告结果。 */
.motion-ready:not(.motion-static) .stage-item.is-future {
  opacity: 0;
  filter: none;
  transition: none;
}

.motion-ready:not(.motion-static) .stage-item.is-current [data-motion="origin"] {
  animation: motion-anchor-arrive 180ms cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms) both;
}

.motion-ready:not(.motion-static) .stage-item.is-current [data-motion="route"] {
  animation: motion-route-follow var(--motion-duration, 900ms) linear var(--motion-delay, 0ms) both;
}

.motion-ready:not(.motion-static) .stage-item.is-current [data-motion="arrival"] {
  animation: motion-anchor-arrive 200ms cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms) both;
}

.motion-ready:not(.motion-static) .stage-item.is-current [data-motion="result"] {
  animation: motion-result-arrive 260ms cubic-bezier(0.16, 1, 0.3, 1) var(--motion-delay, 0ms) both;
}

.motion-ready:not(.motion-static) .stage-item.is-current path[data-motion="route"] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.status-ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
}

@keyframes motion-anchor-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-route-follow {
  from {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes motion-result-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}