/* KeyCreator 分步交互引导 · 特效层
   2026-09-17 新增；2026-09-18 强化。
   只负责“视觉强调”，不含任何业务逻辑；与 key-creator.css 解耦，可单独下线。
   特效原型：呼吸描边 / 扩散光晕 / 脉冲光环 / 指针 / 序号徽标 / 引导气泡，统一使用小红书红。

   2026-09-18 强化的三个点：
     1) 主按钮本身是红色渐变（.primary = linear-gradient(#ff2e51,#ff785d)），
        红色描边直接贴在红底上几乎看不出来——这是原版“引导不够强”的根因。
        解决办法：在元素与描边之间垫一圈 2px 白色分隔环（box-shadow 第一层），
        白环之外再套红环与红柔光，这样红底按钮和白底卡片上都能看清。
     2) 发光从“单脉冲环”升级为“扩散光晕(kcgGlow) + 脉冲光环(kcgHalo)”双通道，
        描边由 2px 加粗到 3px，呼吸周期从 1.7s 收紧到 1.5s。
     3) 新增指针（.kcg-pointer）：成组卡片（人群 / 写作方向）无法判断“该点哪一张”，
        指针固定在首张卡外侧并指向它，解决指向不明确的问题。 */

.kcg-target {
  position: relative;
  z-index: 3;
  outline: 3px solid rgba(255, 36, 66, .95);
  outline-offset: 4px;
  border-radius: inherit;
  animation: kcgBreathe 1.5s ease-in-out infinite, kcgGlow 1.5s ease-in-out infinite;
}

/* 脉冲光环：用伪元素绘制，避免与元素自身的 box-shadow 打架。
   注意：input/textarea 是替换元素，不渲染伪元素，它们的发光只走 kcgGlow。 */
.kcg-target::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 36, 66, .9);
  animation: kcgHalo 1.5s cubic-bezier(.2, .6, .3, 1) infinite;
}

/* 高亮只使用 outline / box-shadow / 伪元素，三者都不改变元素的几何位置。
   2026-09-17：原先给按钮加过 translateY 浮动，实测会让元素 bounding box 持续变化，
   导致精确点击判定为“元素不稳定”而被拒绝，故移除全部位移类动画（指针本身位移不受影响）。 */

/* “可选项”级别的高亮（成组卡片）：描边细一档、只呼吸不爆闪，避免 4 张卡同时闪造成视觉噪音。 */
.kcg-soft-target {
  position: relative;
  z-index: 2;
  outline: 2px solid rgba(255, 36, 66, .55);
  outline-offset: 3px;
  border-radius: inherit;
  box-shadow: 0 0 14px 2px rgba(255, 36, 66, .16);
  animation: kcgBreatheSoft 1.9s ease-in-out infinite;
}

/* 指针所指的那一个：提到与 .kcg-target 同档的强度，形成“这一张是首选”的差异 */
.kcg-soft-target.kcg-lead,
.kcg-target.kcg-lead {
  z-index: 4;
  outline-width: 3px;
  outline-offset: 4px;
  animation: kcgBreathe 1.5s ease-in-out infinite, kcgGlow 1.5s ease-in-out infinite;
}

.kcg-lead::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 36, 66, .9);
  animation: kcgHalo 1.5s cubic-bezier(.2, .6, .3, 1) infinite;
}

/* 指针：指向“该点哪一个”。基础箭头朝上，方向由 JS 通过 rotate 独立属性旋转，
   位移动画走 transform，在旋转后的坐标系里生效，所以位移方向始终沿着箭头指向。 */
.kcg-pointer {
  position: absolute;
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(115deg, #ff2e51, #ff785d);
  box-shadow: 0 6px 16px rgba(255, 46, 81, .45), 0 0 0 3px rgba(255, 255, 255, .92);
  pointer-events: none;
  opacity: 0;
  transition: opacity .26s ease;
}

.kcg-pointer.is-in {
  opacity: 1;
  animation: kcgPoint 1.1s ease-in-out infinite;
}

/* 浏览器不支持 rotate 独立属性时，降级用 transform 旋转，并停掉位移动画（两者都占用 transform） */
.kcg-pointer.is-static {
  animation: none;
}

.kcg-pointer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #fff;
  transform: translate(-50%, -95%);
}

.kcg-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, 5%);
}

/* 引导气泡：pointer-events 关闭，绝不拦截用户点击 */
.kcg-bubble {
  position: absolute;
  z-index: 9;
  max-width: 264px;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 12px 9px 10px;
  border: 1px solid rgba(255, 36, 66, .3);
  border-radius: 10px;
  background: #fff;
  color: #241e21;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 10px 26px rgba(255, 36, 66, .14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .26s ease, transform .26s ease;
}

.kcg-bubble.is-in {
  opacity: 1;
  transform: translateY(0);
}

.kcg-bubble.is-above {
  transform: translateY(6px);
}

.kcg-bubble.is-above.is-in {
  transform: translateY(0);
}

/* 强提示态：用于“条件已满足、只差这一下点击”的时刻（例如主题填好后催你点分析） */
.kcg-bubble.is-strong {
  border-color: transparent;
  background: linear-gradient(115deg, #ff2e51, #ff785d);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(255, 46, 81, .35);
}

.kcg-bubble.is-strong .kcg-step {
  background: #fff;
  color: #ff2442;
}

.kcg-step {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--kcg-red, #ff2442);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

/* 描边呼吸：在“实心红”与“淡红”之间循环，形成闪烁带节奏的描边 */
@keyframes kcgBreathe {
  0%, 100% { outline-color: rgba(255, 36, 66, .98); }
  50%      { outline-color: rgba(255, 36, 66, .3); }
}

@keyframes kcgBreatheSoft {
  0%, 100% { outline-color: rgba(255, 36, 66, .78); }
  50%      { outline-color: rgba(255, 36, 66, .2); }
}

/* 扩散光晕：白环恒定（分隔用）+ 红色柔光的半径与浓度呼吸 */
@keyframes kcgGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 12px 2px rgba(255, 36, 66, .35); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 26px 9px rgba(255, 36, 66, .55); }
}

/* 脉冲光环：从元素边缘向外扩散并淡出 */
@keyframes kcgHalo {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.16); }
}

@keyframes kcgPoint {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .kcg-target,
  .kcg-target::after,
  .kcg-soft-target,
  .kcg-lead::after,
  .kcg-pointer.is-in {
    animation: none !important;
  }
  .kcg-target { outline-color: rgba(255, 36, 66, .95); }
  .kcg-soft-target { outline-color: rgba(255, 36, 66, .7); }
  .kcg-target::after,
  .kcg-lead::after { display: none; }
}

/* 字段被系统预填时的标识：淡底 + 说明小字，用户一输入即恢复常态 */
.field.is-prefilled textarea,
.field.is-prefilled input {
  background: #fff7f8;
  border-color: rgba(255, 36, 66, .28);
}

.field .kc-prefill-hint {
  display: block;
  margin-top: 6px;
  color: #b3414f;
  font-size: 11px;
  line-height: 1.5;
}