/* ============================================================
 *  跨模块过渡覆盖层 —— 文章 ↔ 漏洞档案
 *  与欢迎页同源的品牌质感（bg-body + logo + 0/1 等宽标签）
 * ============================================================ */
.xtrans {
  position: fixed;
  inset: 0;
  /* 低于导航栏(z50)：菜单栏背景不透明，会盖在过渡层上方，始终可见；过渡只覆盖内容区 */
  z-index: 48;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 300ms;
}

/* 覆盖态：出场时 300ms 淡入 */
.xtrans.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 入场态：首帧前由内联脚本置入，立即覆盖、无淡入（避免内容闪现） */
.xtrans.is-enter {
  transition: none;
  opacity: 1;
  visibility: visible;
}

/* 揭开：淡出还原页面（比淡入略慢，更柔和） */
.xtrans.is-leaving {
  opacity: 0;
  visibility: hidden;
  transition: opacity 460ms cubic-bezier(0.4, 0, 0.2, 1), visibility 460ms;
}

.xtrans__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  transform: translateY(0);
}

.xtrans__logo {
  width: 92px;
  height: auto;
  animation: xtrans-pulse 1.5s ease-in-out infinite;
}

.xtrans__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-secondary);
  min-height: 1.2em;
  line-height: 1.2;
}

.xtrans__bar {
  width: 150px;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.xtrans__bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--text-heading);
  transition: width 540ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes xtrans-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.07); opacity: 1; }
}

/* 进入新页面后，主内容轻微上浮，呼应揭开动作 */
@keyframes xtrans-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
body.xtrans-in #workspace,
body.xtrans-in .vwall {
  animation: xtrans-rise 580ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .xtrans__logo { animation: none; }
  body.xtrans-in #workspace,
  body.xtrans-in .vwall { animation: none; }
}