/* 全站页面转场：转场只负责方向感，不替代内容本身。 */
.page-transition-layer {
  --page-origin-x: 50vw;
  --page-origin-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  pointer-events: none;
  background: #17150f;
  clip-path: circle(0 at var(--page-origin-x) var(--page-origin-y));
  will-change: clip-path;
}

.page-transition-layer::before,
.page-transition-layer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* 纸页边线在离场时先经过一次，给方向变化一个可读的锚点。 */
.page-transition-layer::before {
  top: 0;
  bottom: 0;
  left: 12%;
  width: 1px;
  background: rgba(246, 241, 232, .42);
  transform: translateX(-8vw);
}

.page-transition-layer::after {
  left: 0;
  right: 0;
  top: 16%;
  height: 1px;
  background: rgba(246, 241, 232, .22);
  transform: translateY(-6vh);
}

.page-transition-layer.is-leaving {
  pointer-events: auto;
  clip-path: circle(150% at var(--page-origin-x) var(--page-origin-y));
  transition: clip-path .46s cubic-bezier(.22, 1, .36, 1);
}

.page-transition-layer.is-leaving::before,
.page-transition-layer.is-leaving::after {
  opacity: 1;
  transition: opacity .12s ease-out, transform .46s cubic-bezier(.22, 1, .36, 1);
}

.page-transition-layer.is-leaving::before { transform: translateX(0); }
.page-transition-layer.is-leaving::after { transform: translateY(0); }

.page-transition-layer.is-entering {
  clip-path: circle(150% at var(--page-origin-x) var(--page-origin-y));
}

.page-transition-layer.is-entering.is-settled {
  clip-path: circle(0 at var(--page-origin-x) var(--page-origin-y));
  transition: clip-path .56s cubic-bezier(.22, 1, .36, 1);
}

/* 首页揭页使用墨色；内容索引进入身份页时改用松绿纸色，保持层级差异。 */
.page-transition-layer[data-transition="index-about"],
.page-transition-layer[data-transition="about-index"] {
  background: #163c29;
}

.page-transition-layer[data-transition="book-index"]::after,
.page-transition-layer[data-transition="index-about"]::after {
  top: 70%;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-layer.is-leaving,
  .page-transition-layer.is-entering.is-settled {
    transition-duration: .01ms;
  }
  .page-transition-layer.is-leaving::before,
  .page-transition-layer.is-leaving::after {
    transition-duration: .01ms;
  }
}