/* The veil that joins two pages. It rises to cover the page being left and
   keeps rising on the page being entered, so the two documents read as one
   movement through a door rather than as a panel that swings back.

   Its resting state is COVERED. The leaving page starts it below the fold and
   lets it settle here; the entering page starts here and lets it climb away.
   Written that way round because the entering page must be able to paint the
   veil in its very first frame — a veil that starts uncovered would show the
   page bare for a moment before hiding it again. */

.page-veil {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--tobira-bg, #0b0b0b);
  transform: translateY(0);
  pointer-events: all;
  will-change: transform;
}
/* waiting below the fold: where the leaving page's veil starts */
.page-veil.is-below {
  transform: translateY(100%);
}
/* climbing out of frame: where the entering page's veil ends */
.page-veil.is-above {
  transform: translateY(-100%);
}
.page-veil.is-moving {
  transition: transform var(--veil-ms, 460ms) var(--veil-ease, cubic-bezier(.22, 1, .36, 1));
}

/* Soft edges. A flat panel sweeping past leaves a hard line across the page;
   these two strips sit just outside the veil so whichever edge is leading
   dissolves into the page instead of cutting it. */
.page-veil::before,
.page-veil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12vh;
  pointer-events: none;
}
.page-veil::before {
  bottom: 100%;
  background: linear-gradient(to top, var(--tobira-bg, #0b0b0b), transparent);
}
.page-veil::after {
  top: 100%;
  background: linear-gradient(to bottom, var(--tobira-bg, #0b0b0b), transparent);
}

.page-veil-mark {
  display: block;
  width: clamp(30px, 3.6vw, 44px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
/* the mark belongs to the covered moment: it arrives as the veil settles and
   is gone before the veil starts to climb, so it never rides off the screen */
.page-veil.is-marked .page-veil-mark {
  opacity: 1;
  transform: translateY(0);
}
.page-veil-mark svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: rgba(242, 239, 233, .42);
  fill: none;
}
.page-veil-mark circle {
  fill: var(--tobira-accent, #ff8068);
  stroke: none;
}

/* The veil is the animation; without motion there is nothing to show, and a
   panel appearing and disappearing without movement is just a flash. */
@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none; }
}