/* ============================================================
   Emo_Bar —— 「观心」状态条叠层
   样式基准：序章 CG_PRO_EMOBARS / cg_pro_observe_* 中美术画死的霓虹条
   定稿来源：docs/emo-bar-demo.html（经四轮用户确认）
   ============================================================ */

#ltc-emo-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:60;                 /* 在立绘之上、UI 之下 */
  overflow:hidden;
}

.ltc-emo-wrap{
  position:absolute;
  transform:translate(-50%, -50%);
  will-change:transform;
}
/* 被观察者不在画面上时的兜底：浮在画面上方居中 */
.ltc-emo-wrap.ltc-emo-float{
  transform:translate(-50%, -50%) scale(1.05);
}

/* ---------- 条本体 ---------- */
.emo-bar{
  position:relative;width:180px;height:22px;border-radius:999px;
  border:none;                                     /* 完全去掉描边 */
  background:rgba(6,8,12,.4);
  /* 多层柔光（再虚化 20%）：内暗角减弱，外圈柔晕增强，条与背景更柔和过渡 */
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.28),                /* 内暗角进一步减弱，轮廓更虚 */
    0 0 18px rgba(150,180,255,.17),               /* 近距柔光晕 +20% */
    0 0 36px rgba(150,180,255,.08);               /* 远距虚化晕 +20% */
  overflow:visible;                               /* 毛刺要探出条外，不能裁 */
  flex:none;
}
.emo-bar .seg{position:absolute;top:2px;bottom:2px;border-radius:999px}
/* 色条本体半透明：透出背景，辉光与端刺仍用实色保持霓虹锐利感 */
.seg.red{
  background:rgba(255,20,20,.6);
  box-shadow:0 0 12px var(--emo-red,#ff1414), 0 0 28px rgba(255,20,20,.55);
  left:2px; --c:var(--emo-red,#ff1414);
}
.seg.green{
  background:rgba(0,255,87,.6);
  box-shadow:0 0 12px var(--emo-green,#00ff57), 0 0 28px rgba(0,255,87,.5);
  left:2px; --c:var(--emo-green,#00ff57);
}
/* 纯色填充只留一层极淡顶部高光（序章 CG 里的斜向速度线已按用户要求去除） */
.emo-bar .seg::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,0) 62%);
}

/* ---------- 端部毛刺：动态端伸出的尖锐横条，外端渐隐虚化 ---------- */
.seg .spk{
  position:absolute;height:2px;background:var(--c);
  box-shadow:0 0 6px var(--c), 0 0 13px var(--c);
  opacity:.9;border-radius:0;
  transform-origin:right center;
  animation:spkPulse 1.4s ease-in-out infinite;
  /* 用 mask 而非 background 渐变：box-shadow 辉光不受 background 控制，
     只有 mask 能让实体与辉光一起由实到虚淡出 */
  -webkit-mask-image:var(--fade); mask-image:var(--fade);
}
/* 向右刺：外端在右 → 左实右虚 */
.seg .spk:not(.l){
  --fade:linear-gradient(to right, rgba(0,0,0,.92) 0 26%, rgba(0,0,0,.5) 58%, transparent 100%);
}
/* 向左刺：外端在左 → 右实左虚 */
.seg .spk.l{
  transform-origin:left center;
  --fade:linear-gradient(to left, rgba(0,0,0,.92) 0 26%, rgba(0,0,0,.5) 58%, transparent 100%);
}
/* 雾化尾：沿同方向再淡出一层模糊，与毛刺叠加出虚化效果 */
.seg .spk::after{
  content:'';position:absolute;top:-1.6px;bottom:-1.6px;left:0;right:-6px;
  background:var(--c);filter:blur(2.4px);opacity:.45;
  -webkit-mask-image:var(--fade); mask-image:var(--fade);
}
.seg .spk.l::after{left:-6px;right:0}
.seg .spk.thin{height:1.5px;opacity:.75}
.seg .spk.thin::after{top:-1.2px;bottom:-1.2px}
@keyframes spkPulse{
  0%,100%{transform:scaleX(1);opacity:.9}
  50%    {transform:scaleX(.35);opacity:.4}
}

/* ---------- 五种特效 ---------- */
.fx-flash .seg{animation:emoFlash .5s ease-in-out infinite}
@keyframes emoFlash{0%,100%{opacity:1}50%{opacity:.22}}

/* 拉扯：振幅 ±11%、周期 3.6s —— 慢到接近呼吸 */
.fx-oscillate .seg.red  {animation:oscR 3.6s ease-in-out infinite}
.fx-oscillate .seg.green{animation:oscG 3.6s ease-in-out infinite}
@keyframes oscR{0%,100%{width:39%}50%{width:61%}}
@keyframes oscG{0%,100%{left:39%;width:61%}50%{left:61%;width:39%}}

/* 抖动：不再是高频抖，改为 1.4s 缓慢横移呼吸 */
.fx-tremble{animation:emoTremble 1.4s ease-in-out infinite}
@keyframes emoTremble{
  0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}
}

/* 辉光呼吸：整条明暗，按用户要求不挂毛刺 */
.fx-glow{animation:emoGlow 2s ease-in-out infinite}
@keyframes emoGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(0,255,87,.55))}
  50%    {filter:drop-shadow(0 0 14px rgba(0,255,87,1))}
}

/* ---------- 小尺寸档（窄屏 / 并排多角色） ---------- */
.emo-bar.sm{width:132px;height:16px}
.emo-bar.sm .seg{top:1.5px;bottom:1.5px}

/* ---------- 竖屏 / 窄屏：缩小并抬高，避免压到立绘头部或文本框 ---------- */
@media (orientation:portrait){
  .emo-bar{width:132px;height:16px}
  .emo-bar .seg{top:1.5px;bottom:1.5px}
  .seg .spk{top:2px!important}
}