/* ============================================================
   page-transition.css —— 页面之间的过渡（纸面溶解）
   1. 每个页面载入时从纸色轻轻淡入
   2. 站内跳转时先淡出到纸色遮罩，再进入下一页
   3. 尊重 prefers-reduced-motion
   ============================================================ */

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 新页面入场：从纸色淡入（所有页面统一） */
body {
  animation: pageFadeIn .5s cubic-bezier(.22, .61, .36, 1) both;
}

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: #f6f5f1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s cubic-bezier(.4, 0, .2, 1);
}

body.is-leaving .page-veil {
  opacity: 1;
  pointer-events: auto;
}

.page-veil__mark {
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(20, 23, 26, .3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease .05s, transform .45s cubic-bezier(.22, .61, .36, 1) .05s;
}

body.is-leaving .page-veil__mark {
  opacity: 1;
  transform: none;
}

/* 细纸纹，让遮罩不是一块死白 */
.page-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(255, 255, 255, .5), rgba(246, 245, 241, 0) 70%),
    repeating-linear-gradient(0deg, rgba(20, 23, 26, .012) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

/* 系统“减少动态效果”时只缩短时长，不做成硬切（页面间淡入淡出不引起眩晕） */
@media (prefers-reduced-motion: reduce) {
  body { animation-duration: .45s; }
  .page-veil { transition-duration: .24s; }
}