/* ============================================================
   页面过场动画 —— 红光扫描 + 黑底

   机制:
     1. 遮罩只在**导航栏以下**的区域进行 —— 导航永远可见,
        作为转场的"参考系"(城主要求)
     2. 红光从上往下扫,黑底跟着红光往下盖住旧页面
     3. Logo 在黑底上浮现
     4. 跳转后,黑底从下往上退,红光跟着退,露出新页面

   ⭐ 三个东西必须严格同步(否则红光会脱离黑底边缘):
     黑底 / 红光 / 刀口 —— 同样的 duration + 同样的缓动 + 同样的 top 百分比体系
   ============================================================ */

.page-veil {
  position: fixed;
  left: 0;
  right: 0;
  /* ⭐ 从导航栏下边缘开始 —— 导航不被遮盖 */
  top: var(--nav-h, 68px);
  bottom: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .1s linear;
}
.page-veil.armed { opacity: 1; }

/* ═══════════ 黑底 ═══════════ */
/* z-index 2 —— 盖住正在切换的页面内容 */
.page-veil .veil-black {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100%;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 22%, #14101a 0%, #07060a 62%);
}

/* ═══════════ 黑底的"刀口" ═══════════ */
/* 和红光完全同位 —— 黑底的下边缘 */
.page-veil .veil-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 32, 46, .6) 18%,
    rgba(255, 220, 215, .95) 50%,
    rgba(184, 32, 46, .6) 82%,
    transparent 100%
  );
  box-shadow: 0 0 16px 4px rgba(184, 32, 46, .5);
  opacity: 0;
}

/* ═══════════ 红光扫描线 ═══════════ */
.page-veil .veil-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  margin-top: -1.5px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 32, 46, .5) 10%,
    rgba(255, 120, 120, .9) 34%,
    rgba(255, 225, 220, .98) 48%,
    rgba(255, 150, 140, .92) 54%,
    rgba(184, 32, 46, .6) 68%,
    transparent 100%
  );
  box-shadow:
    0 0 18px 5px rgba(184, 32, 46, .45),
    0 0 54px 16px rgba(184, 32, 46, .22);
  opacity: 0;
}

/* ═══════════ Logo ═══════════ */
.page-veil .veil-brand {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.page-veil .veil-brand span {
  position: relative;
  font-size: clamp(24px, 5.2vw, 50px);
  font-weight: 800;
  letter-spacing: .3em;
  /* ⭐ 纯白亮字 —— 黑底上必须一眼读到 */
  color: #ffffff;
  white-space: nowrap;
  text-shadow:
    -1px 0 rgba(184, 32, 46, .95),
    1px 0 rgba(201, 160, 95, .85),
    -3px 0 rgba(184, 32, 46, .55),
    3px 0 rgba(201, 160, 95, .45),
    0 0 22px rgba(184, 32, 46, .5),
    0 0 54px rgba(184, 32, 46, .32);
}
/* logo 下方一道细金线 */
.page-veil .veil-brand span::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(201, 160, 95, .9), transparent);
}

/* ═══════════════════════════════════════════════════════
   出场:红光从上往下,黑底跟着红光往下盖

   ⭐ 方向修正(城主反馈"红线从上往下滑,黑底却从下往上滑"):
     黑底 top: -100% → 0% —— 整块黑底从上方压下来
     红光 top: 0% → 100% —— 就是黑底的**下边缘**(top + height)
     两者同步推进 → 红光永远压在黑底下边缘,一起往下走
   ═══════════════════════════════════════════════════════ */
html.js body.page-leaving .page-veil .veil-black {
  animation: blackDown .72s cubic-bezier(.55, 0, .3, 1) forwards;
}
@keyframes blackDown {
  from { top: -100%; }
  to   { top: 0%; }
}

html.js body.page-leaving .page-veil .veil-scan,
html.js body.page-leaving .page-veil .veil-edge {
  animation: scanDown .72s cubic-bezier(.55, 0, .3, 1) forwards;
}
@keyframes scanDown {
  from { top: 0%; opacity: 0; }
  6%   { opacity: 1; }
  to   { top: 100%; opacity: 1; }
}

/* Logo:红光扫到中间时浮现 */
html.js body.page-leaving .page-veil .veil-brand {
  animation: brandIn .38s ease .28s forwards;
}
@keyframes brandIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   入场:红光从下往上闪回来,黑底跟着退去
   ═══════════════════════════════════════════════════════ */
html.js body.page-entering .page-veil .veil-black {
  animation: blackUp .72s cubic-bezier(.55, 0, .3, 1) forwards;
}
/* 黑底整体上移退出 → 新页面从下方露出 */
@keyframes blackUp {
  from { top: 0%; }
  to   { top: -100%; }
}

html.js body.page-entering .page-veil .veil-scan,
html.js body.page-entering .page-veil .veil-edge {
  animation: scanUp .72s cubic-bezier(.55, 0, .3, 1) forwards;
}
/* 红光跟着黑底的下边缘(top + height) */
@keyframes scanUp {
  from { top: 100%; opacity: 1; }
  94%  { opacity: 1; }
  to   { top: 0%; opacity: 0; }
}

/* Logo:退场时淡出 */
html.js body.page-entering .page-veil .veil-brand {
  animation: brandOut .3s ease forwards;
}
@keyframes brandOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ═══════════ 无障碍 ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none; }
}

/* ═══════════ 移动端 ═══════════ */
@media (max-width: 760px) {
  .page-veil .veil-brand span { letter-spacing: .2em; }
}