/* ═══════════════════════════════════════════ */
/*  知几 · 卦象凝形加载动画 — 解读等待（2026-08-03 融合版）   */
/*  六爻逐爻画出 + 水滴心跳 + 双印封盘 / 败局卦散         */
/* ═══════════════════════════════════════════ */

/* 覆盖层 */
#loading-overlay{
  position:fixed;left:0;right:0;bottom:13vh;z-index:50;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  opacity:0;transition:opacity 0.35s ease;
}
#loading-overlay.active{opacity:1}

.loading-card{
  display:flex;flex-direction:column;align-items:center;
}

/* ── 卦盘（焦点层）── */
.hex-formation{
  position:relative;width:clamp(150px,62vw,210px);
  padding:20px 16px 18px;
  background:rgba(246,241,230,.55);
  border:1px solid rgba(139,115,85,.28);
  border-radius:12px;
  box-shadow:0 2px 16px rgba(122,92,53,.10);
  opacity:0;transition:opacity .5s ease;
}
.hex-formation.active{opacity:1}
/* column-reverse：JS 从初爻开始 append，首子自然落在最下方，爻自下而上 */
.hex-lines{display:flex;flex-direction:column-reverse;gap:13px}

/* 六爻：阳实阴断，笔触墨迹渐变两端渐隐 */
.hex-row{
  position:relative;display:flex;align-items:center;height:3px;
  opacity:0;transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .30s ease;
}
.hex-row.revealed{opacity:1;transform:scaleX(1)}
.hex-row .bar{
  flex:0 0 45.5%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(90,62,43,0),rgba(90,62,43,.92) 12%,rgba(90,62,43,.92) 88%,rgba(90,62,43,0));
}
.hex-row .bar.gap{flex:0 0 9%;background:none}   /* 阴爻断口（45.5+9+45.5=100% 阴阳等长） */
.hex-row.yang .bar{flex:0 0 100%}

/* 巡爻光带（事件驱动，gold 扫过当前爻） */
.hex-row::before{
  content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;border-radius:6px;
  background:linear-gradient(90deg,transparent,rgba(196,154,95,.40),rgba(196,154,95,.55),rgba(196,154,95,.40),transparent);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.hex-row.scan::before{opacity:1}

/* 动爻朱点（被巡到即常驻脉动，预告变卦） */
.hex-row.pulse::after{
  content:'';position:absolute;left:50%;top:-9px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:#A8422E;opacity:0;
  animation:yaoDot 2.8s ease-in-out infinite;
}
.hex-row.pulse .bar{
  background:linear-gradient(90deg,rgba(168,66,46,0),rgba(168,66,46,.88) 12%,rgba(168,66,46,.88) 88%,rgba(168,66,46,0));
}
@keyframes yaoDot{0%{opacity:0;transform:translateY(3px)}50%{opacity:.9}100%{opacity:0;transform:translateY(-3px)}}

/* ── 水滴心跳（11s 一滴，池心涟漪 CSS 动画零 rAF）── */
.hex-water{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.hex-drop{
  position:absolute;width:5px;height:7px;margin-left:-2.5px;
  border-radius:50%;opacity:0;
  background:radial-gradient(circle at 36% 30%,rgba(246,241,230,.95) 0%,rgba(214,206,186,.5) 45%,transparent 72%);
}
.hex-drop.falling{animation:dropFall .55s ease-in both}
@keyframes dropFall{
  0%{opacity:1;transform:translateY(-26px)}
  100%{opacity:0;transform:translateY(0)}
}
#hex-ripples{position:absolute;left:0;top:0}
#hex-ripples .ripple{
  position:absolute;left:0;top:0;width:6px;height:3px;
  border:1px solid rgba(230,220,200,.4);border-radius:50%;
  opacity:.45;
  animation:rippleGrow 1.9s ease-out both;
}
@keyframes rippleGrow{
  from{width:6px;height:3px;opacity:.45}
  to{width:70px;height:35px;opacity:0}
}

/* ── 朱文印（卦印 / 封印；临界阻尼下压，无弹跳——钤印是机械动作）── */
.hex-seal{
  position:absolute;left:-8px;top:-10px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1.6px solid #A8422E;border-radius:2px;
  color:#A8422E;background:rgba(168,66,46,.05);
  font-family:"Noto Serif SC",serif;font-size:1.0rem;font-weight:600;
  opacity:0;transform:scale(1.6);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),opacity .12s ease-out;
}
.hex-seal.pressed{opacity:1;transform:scale(1)}
.hex-seal.seal-final{
  left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;
  font-size:1.15rem;transform:scale(1.5) rotate(-2deg);   /* 落印微倾，器物真实感 */
  background:#A63A2B;border:none;color:#F6F1E6;
  box-shadow:0 0 0 1px rgba(168,66,46,.28),0 2px 6px rgba(120,40,26,.3);
}
.hex-seal.seal-final.pressed{transform:scale(1) rotate(-2deg)}

/* ── 候定暗化（120s 后：全卦退为背景，仅动爻朱点呼吸）── */
.hex-formation.settled .hex-row{opacity:.5;filter:saturate(.6);transition:opacity .8s ease,filter .8s ease}
.hex-formation.settled .hex-row.pulse{opacity:1;filter:none}

/* ── 败局卦散（自上而下快散，呼应「败局不落印」）── */
.hex-row.gone{opacity:0!important;transform:scaleX(0)!important;transition:opacity .22s ease,transform .22s ease}

/* ── 状态文字 ── */
#loading-status{
  font-family:"Noto Serif SC","SimSun",serif;
  font-size:0.88rem;font-weight:400;
  color:#6B5540;   /* 2026-08-03 审查修复：#6B5540 ≈5.9:1（3-5 分钟等待期唯一可读文本） */
  letter-spacing:0.14em;text-align:center;
  min-width:12em;min-height:1.4em;
  text-shadow:0 0 18px rgba(212,175,55,0.10);
  transition:opacity 0.45s ease;
  margin-top:.6rem;
}
#loading-status.fading{opacity:0.15}
#loading-status.seal-silent{opacity:0;transition:opacity .25s ease}

/* 已候时刻（安静计时，不刷读屏） */
.loading-hint{
  font-family:"Noto Serif SC",serif;
  font-size:.72rem;letter-spacing:.18em;
  color:rgba(107,85,64,.65);text-align:center;
  min-height:1.1em;margin-top:.2rem;
}

/* ── reduced-motion：无运动，信息照常（爻仍显形、文案仍推进）── */
@media (prefers-reduced-motion:reduce){
  .hex-row{transform:none!important;transition:opacity .4s ease}
  .hex-row::before{display:none}
  .hex-row.pulse::after{animation:none;opacity:.85}
  .hex-seal{transition:none}
  .hex-drop,.ripple{display:none}
  .hex-formation{transition:opacity .3s ease}
}