:root {
  --memory-transition-paper: #eee2ce;
  --memory-transition-ink: #2f3935;
  --memory-transition-time: 220ms;
  --memory-page-turn-time: 340ms;
}

html.memory-transition::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, .38), transparent 36%),
    linear-gradient(145deg, #f5ecde 0%, var(--memory-transition-paper) 58%, #e5d5bd 100%);
  transition:
    opacity var(--memory-transition-time) cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear var(--memory-transition-time);
}

html.memory-transition.memory-arrived::after {
  opacity: 0;
  visibility: hidden;
}

html.memory-transition.memory-leaving::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 180ms cubic-bezier(.4, 0, .2, 1),
    visibility 0s;
}

html.memory-transition.memory-leaving body {
  pointer-events: none;
}

.page.memory-chapter-enter > .intro,
.page.memory-chapter-enter > .spread,
.page.memory-chapter-enter > .ending,
.page.memory-chapter-enter > .paper-copy,
.page.memory-chapter-enter > .reflection-inner,
.page.memory-chapter-enter > .closing-inner,
.reflection.memory-chapter-enter > .reflection-inner,
.closing.memory-chapter-enter > .closing-inner {
  animation: memory-focus-in var(--memory-page-turn-time) cubic-bezier(.22, 1, .36, 1) both;
}

.book .page {
  transition-duration: var(--memory-page-turn-time) !important;
}

@keyframes memory-focus-in {
  from {
    opacity: .68;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  :root {
    --memory-transition-time: 180ms;
    --memory-page-turn-time: 280ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --memory-transition-time: 1ms;
    --memory-page-turn-time: 1ms;
  }

  html.memory-transition::after,
  html.memory-transition.memory-leaving::after {
    transition-duration: 1ms, 0s;
  }

  .page.memory-chapter-enter > .intro,
  .page.memory-chapter-enter > .spread,
  .page.memory-chapter-enter > .ending,
  .page.memory-chapter-enter > .paper-copy,
  .page.memory-chapter-enter > .reflection-inner,
  .page.memory-chapter-enter > .closing-inner,
  .reflection.memory-chapter-enter > .reflection-inner,
  .closing.memory-chapter-enter > .closing-inner {
    animation: none;
  }
}