/* ============================================================
   交制作成功的完成反馈动效（C2.110）
   ------------------------------------------------------------
   时间轴：0ms 中心闪光 + 光波扩散 → 60ms 金额弹起回弹 → 90ms 粒子四溅
           → 920ms 整体淡出 → 1180ms 移除（由 ui/celebrate.js 的定时器负责）
   层次：底层径向闪光 → 两圈光波 → 12 颗粒子 → 最上层金额与文案。
   全部 pointer-events:none：动效期间该点哪还能点哪，不挡关键信息。
   ============================================================ */

.cb-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: cb-out 260ms 920ms ease-in forwards;
}

/* 中心闪光：像盒子打开那一刻的火花，短、亮、不过曝 */
.cb-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 140, 0.5), rgba(255, 178, 40, 0.12) 46%, transparent 70%);
  animation: cb-flash 340ms ease-out forwards;
}

/* 两圈光波：第一圈金色、第二圈白色稍晚一拍，扩散时有"duang"的层次 */
.cb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 2px solid rgba(255, 198, 60, 0.9);
  box-shadow: 0 0 24px rgba(255, 190, 50, 0.5), inset 0 0 24px rgba(255, 190, 50, 0.32);
  animation: cb-ring 660ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.cb-ring.r2 {
  animation-delay: 120ms;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.34);
}

.cb-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transform: translateY(-4px);
}

/* 金额：金色渐变字 + 光晕，从模糊放大到清晰，中段过冲到 1.16 再落回 1 */
.cb-amount {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fffbe6, #ffd35c 48%, #ff9f1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(255, 170, 30, 0.5));
  animation: cb-pop 760ms cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
}

/* 胶囊文案：晚 200ms 上来，把"钱还没到"说清楚，别让人误以为已结算 */
.cb-label {
  font-size: 13px;
  font-weight: 600;
  color: #5a3a00;
  background: rgba(255, 246, 220, 0.94);
  border: 1px solid rgba(255, 196, 60, 0.85);
  border-radius: 999px;
  padding: 4px 13px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(90, 58, 0, 0.18);
  animation: cb-label 420ms 200ms ease-out both;
}

/* 粒子：从中心沿各自角度飞出并缩小消失，随机延迟 0~70ms 才有"溅开"的散乱感 */
.cb-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd25a 55%, #ff9d00 100%);
  box-shadow: 0 0 8px rgba(255, 190, 60, 0.9);
  animation: cb-spark 780ms var(--d) cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes cb-flash {
  0% {
    opacity: 0.92;
    transform: scale(0.34);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes cb-ring {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.3);
  }
  75% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.85);
  }
}

@keyframes cb-pop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.5);
    filter: blur(8px);
  }
  45% {
    opacity: 1;
    transform: translateY(0) scale(1.16);
    filter: blur(0);
  }
  62% {
    transform: translateY(0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cb-label {
  0% {
    opacity: 0;
    transform: translateY(9px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes cb-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2);
  }
}

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

/* 系统开了「减少动态效果」：不发粒子、不缩放，只做一次 0.6 秒的静态确认 */
.cb-layer.is-quiet {
  animation: cb-quiet 640ms ease-out both;
}
.cb-layer.is-quiet .cb-amount,
.cb-layer.is-quiet .cb-label {
  animation: none;
}
@keyframes cb-quiet {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 深色主题：金额与胶囊已经自带光，这里只把胶囊底色压暗一档，免得在深底上刺眼 */
html[data-theme="dark"] .cb-label {
  color: #ffe9b0;
  background: rgba(58, 41, 12, 0.92);
  border-color: rgba(255, 196, 60, 0.6);
}