/* ============================================================
   「还在等」的完成反馈（C2.131 重做；C2.110 的金额弹跳版已废）
   ------------------------------------------------------------
   视觉语言要从「收钱」换成「蓄势 / 静候」，所以这一版没有任何金币、礼花、四溅
   粒子，也没有回弹过冲——那种弹性属于「拿到手了」，不属于「还在路上」。

   时间轴：0ms 暖雾浮起 + 两圈慢光环（雷达式回声）→ 120ms 徽章升起
           → 160ms 状态词 / 文案 / 三点跟上 → 1150ms 整体淡出 → 1600ms 移除
           （定时器在 ui/celebrate.js，这里只管画）
   层次：暖雾（底）→ 上浮光条 → 徽章（含光环、虚线目标线、三格流量柱）
         → 状态词 → 文案胶囊 → 等待三点
   颜色：全部走 theme.css 的 --wait-* token，浅/深色各一套，组件里不许写死。

   配色用意：
     · 待投流是「琥珀／暖黄」这一档（和矩阵里待投流的列头同一族），不是「金」
       ——金色会被读成钱，琥珀只会被读成「还没亮起来」。
     · 徽章底色用 --panel 实心：动效层没有遮罩，底色不实的话数字压在表格上看不清。
   ============================================================ */

.cw-layer {
  position: fixed;
  inset: 0;
  z-index: 110; /* 高于弹窗(100)，低于提示条(120)：反馈时不盖掉 toast */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 只是画，不接过任何点击 */
  overflow: hidden;
  animation: cw-out 380ms 1150ms ease-in forwards;
}

/* 聚光改成「状态卡」：一开始试过全屏白雾压淡背景，结果整块看板都糊了——
   为了让一行字看得清而牺牲上下文，不划算。改成一张紧凑卡片：内容自己带底，
   四周原样保留，还能一眼看出「这是提示，不是页面变了」。 */

/* 暖雾：一层几乎看不出来的热，慢慢亮到 55% 就停——像屋里开始有温度，还没开灯 */
.cw-haze {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--wait-glow) 0%, var(--wait-glow-soft) 42%, transparent 68%);
  animation: cw-haze 1200ms ease-out forwards;
}

/* 上浮光条：从地面往上飘、边飘边淡，像攒劲时冒的热气（与「四溅」正好相反） */
.cw-flow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: var(--h);
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--wait-line));
  opacity: 0;
  animation: cw-float var(--dur) var(--d) ease-out forwards;
}

/* 状态卡：内容自己带底，压在表格上也清楚；1px 琥珀描边把它归到「待投流」这一族 */
.cw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 15px 22px 13px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line-amber);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  animation: cw-core 420ms 120ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

/* ---------- 徽章：卡片里的一格小图表 ---------- */
.cw-glyph {
  position: relative;
  width: 58px;
  height: 52px;
  border-radius: 15px;
  border: 1px solid var(--line-amber);
  background: var(--amber-d);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 9px;
}

/* 两圈慢光环：从徽章边缘往外推，1.5 秒一趟、错开半拍，像在等回声 */
.cw-ping {
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  border: 1px solid var(--wait-line);
  opacity: 0;
  animation: cw-ping 1500ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.cw-ping.p2 {
  animation-delay: 480ms;
  border-color: var(--wait-line-soft);
}

/* 虚线目标线：满量/结算那条线还没够到——这一根比任何文案都直白 */
.cw-track {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 11px;
  height: 0;
  border-top: 1px dashed var(--wait-line-soft);
}

/* 三格流量柱：底对齐、逐级升高；空格 = 这一格流量还没开始投 */
.cw-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 30px;
}
.cw-bars i {
  width: 6px;
  border-radius: 2px;
  background: var(--wait-bar-dim);
  transform-origin: bottom center;
}
.cw-bars i:nth-child(1) {
  height: 11px;
}
.cw-bars i:nth-child(2) {
  height: 19px;
}
.cw-bars i:nth-child(3) {
  height: 27px;
}
.cw-bars i.on {
  background: var(--wait-bar);
  box-shadow: 0 0 8px var(--wait-glow);
}

/* 空格：低低地悬着、轻轻起伏 = 在酝酿但没起来，不是「没有数据」的空白 */
.cw-glyph.is-idle .cw-bars i {
  animation: cw-breathe 1100ms ease-in-out infinite alternate;
}
.cw-glyph.is-idle .cw-bars i:nth-child(2) {
  animation-delay: 140ms;
}
.cw-glyph.is-idle .cw-bars i:nth-child(3) {
  animation-delay: 280ms;
}
/* 亮起来的格子：一格一格往上长，涨的姿态 = 进度在推进 */
.cw-glyph.is-run .cw-bars i.on {
  animation: cw-grow 560ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.cw-glyph.is-run .cw-bars i.on:nth-child(2) {
  animation-delay: 90ms;
}
.cw-glyph.is-run .cw-bars i.on:nth-child(3) {
  animation-delay: 180ms;
}

/* ---------- 文字 ---------- */
/* 状态词：小、稳、字距略开——克制是这一版的重点，喊出来就又像报喜了 */
.cw-title {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--amber);
}

/* 副文案：只说明「去处」与「还没到手」，不再套胶囊（卡片本身已经是底了） */
.cw-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt2);
  white-space: nowrap;
  animation: cw-fade 380ms 220ms ease-out both;
}

/* 三点：依次亮一下再落下，「还在处理」的通用语汇 */
.cw-dots {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}
.cw-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wait-bar);
  opacity: 0.3;
  animation: cw-dot 900ms ease-in-out infinite;
}
.cw-dots i:nth-child(2) {
  animation-delay: 150ms;
}
.cw-dots i:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes cw-haze {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.62;
    transform: scale(1);
  }
}

@keyframes cw-float {
  0% {
    opacity: 0;
    transform: translate(var(--x), -14px) scaleY(0.7);
  }
  32% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), -82px) scaleY(1);
  }
}

@keyframes cw-core {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(-6px) scale(1);
  }
}

@keyframes cw-ping {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.15);
  }
}

@keyframes cw-breathe {
  from {
    transform: scaleY(0.58);
    opacity: 0.55;
  }
  to {
    transform: scaleY(0.82);
    opacity: 0.9;
  }
}

@keyframes cw-grow {
  from {
    transform: scaleY(0.2);
    opacity: 0.35;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes cw-fade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cw-dot {
  0%,
  100% {
    opacity: 0.28;
    transform: translateY(0) scale(0.86);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
  }
}

@keyframes cw-out {
  to {
    opacity: 0;
  }
}

/* 系统开了「减少动态效果」：不呼吸、不扩散、不上浮，只做一次 0.9 秒的静态确认 */
.cw-layer.is-quiet {
  animation: cw-quiet 880ms ease-out both;
}
.cw-layer.is-quiet .cw-card {
  animation: none;
  transform: translateY(-6px);
}
.cw-layer.is-quiet .cw-bars i {
  animation: none;
  opacity: 0.9;
}
@keyframes cw-quiet {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}