/* css/views/seal.css — 屏上「封缄印章」组件(FU-SEAL-ON-SCREEN)。owner: FU-SEAL-ON-SCREEN。
 * 选择器前缀 .seal-* / .seal--*;颜色 / 间距用 var(--*) 令牌。
 *
 * 视觉配方搬自 audview_chain.css 的 print-only .verify-report-seal,按 DESIGN §9e 白底
 * 「鎏金档案馆」重映射:
 *   - 金是线:黄铜环 / 1px 金链走 --color-accent-bright(走 border / background,非 color:,
 *     守 check-admin-teal 不变量② brass 仅非文字);
 *   - 橙是蜡:朱橙内印 --color-seal(封)/ 篡改绯红 --color-tamper(断)走 color:(令牌,合规);
 *   - 白纸:disc 底 --color-surface,朱橙 + 金 on 白读作蜡 / 印泥落纸。
 *
 * 三重编码(§7 灰度红线):环型(双环 / 破环 / 点环)+ 字形(封 / 断 / UNSEALED)+ 文字标签
 * (墨字恒可读)。色仅辅助。
 *
 * 动效红线(§0.9 / §9b):唯一获批 600ms 一次性入场,reduced-motion 直接终态;只动
 * transform / opacity,绝不循环、绝不动 box-shadow / filter。 */

.seal {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* ---- 钢印圆章(环 + 字 + 金链) ---- */
.seal-stamp {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.seal-disc {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);   /* 白纸盖印:朱橙 + 金 on 白 = 蜡 / 印泥落纸(§9e) */
  transform: rotate(-8deg);           /* 手盖钢印的微斜(配方搬自 print .verify-report-seal) */
}

.seal-glyph {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

/* idle:灰石「UNSEALED」轮廓字(诚实标尚无印,非假章) */
.seal-unsealed {
  font-family: var(--font-mono-tabular);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
}

/* 环型 = 非色编码:验真 = 实线双环;篡改 = 虚线破环;未封 = 点线轮廓。 */
.seal--ok .seal-disc {
  border: 3px double var(--color-accent-bright);   /* 黄铜实双环(金=线) */
}
.seal--ok .seal-glyph {
  color: var(--color-seal);                        /* 朱橙蜡「封」 */
}
.seal--tamper .seal-disc {
  border: 3px dashed var(--color-tamper);          /* 绯红破环 */
}
.seal--tamper .seal-glyph {
  color: var(--color-tamper);                      /* 「断」 */
}
.seal--idle .seal-disc {
  border: 2px dotted var(--color-dormant);         /* 暖石点环(休眠 / 未封) */
}

/* 1px 金链(仅验真通过):细金线哈希链母题,disc 下画一道(§9e「金是线」) */
.seal-chain {
  width: 56px;
  height: 0;
  border-top: 1px solid var(--color-accent-bright);
  transform-origin: left center;
}

/* ---- 结论文本 ---- */
.seal-body {
  min-width: 0;
  padding-top: 2px;
}
.seal-headline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.seal-mark {
  flex: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.seal--ok .seal-mark {
  color: var(--color-verify);    /* 森玉绿 ✓ */
}
.seal--tamper .seal-mark {
  color: var(--color-tamper);    /* 绯红 ✗ */
}
.seal-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);      /* 墨字:验真 / 篡改的色信号交给环 + 字形 + ✓/✗,标题恒可读 */
}
.seal-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  word-break: break-word;
}
.seal-cert {
  margin-top: var(--space-2);
  display: inline-block;
  font-family: var(--font-mono-tabular);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}
.seal--tamper .seal-cert {
  color: var(--color-tamper);    /* 断点位置 = 取证锚,加重绯红 */
}

/* ============================================================
 * 一次性入场动画(JS 加 .seal--sealing;reduced-motion 不加 + 下方 @media 兜底)
 * 无 fill-mode:动画外恒显终态(resting),故延迟 / 后台标签页绝不留半成品 / 空印。
 * ============================================================ */

/* 验真:环 scale 1.06→1(ease-out 落定,无回弹)+ 蜡压入 + 金链画下,皆 600ms 并发 */
@keyframes seal-press {
  from { transform: rotate(-8deg) scale(1.06); }
  to   { transform: rotate(-8deg) scale(1); }
}
@keyframes seal-wax-in {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes seal-chain-draw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
/* 篡改:破环淡入,无 scale 回弹(诚实「断」,不庆祝) */
@keyframes seal-break-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.seal--ok.seal--sealing .seal-disc {
  animation: seal-press 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
.seal--ok.seal--sealing .seal-glyph {
  animation: seal-wax-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
.seal--ok.seal--sealing .seal-chain {
  animation: seal-chain-draw 600ms ease 1;
}
.seal--tamper.seal--sealing {
  animation: seal-break-in 280ms ease 1;
}

@media (prefers-reduced-motion: reduce) {
  .seal--sealing .seal-disc,
  .seal--sealing .seal-glyph,
  .seal--sealing .seal-chain,
  .seal--sealing {
    animation: none !important;
  }
}