.ink-reveal-intro {
  position: absolute;
  z-index: 18;
  inset: 0;
  overflow: hidden;
  background: #b8a57e;
  cursor: pointer;
  opacity: 1;
  touch-action: none;
  transition: opacity 260ms ease;
}

.ink-reveal-intro.is-ready {
  background: transparent;
}

.ink-reveal-intro[hidden] {
  display: none;
}

.ink-reveal-intro canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ink-reveal-original {
  z-index: 0;
}

.ink-reveal-wash {
  z-index: 1;
  mix-blend-mode: multiply;
}

.ink-reveal-intro.is-finishing {
  opacity: 0;
}

.topbar,
.utility-toolbar,
.route,
.gesture-tip,
.author-contact,
.guide-panel,
.quest-panel,
.quest-toast {
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

body.ink-intro-active .topbar,
body.ink-intro-active .utility-toolbar,
body.ink-intro-active .route,
body.ink-intro-active .gesture-tip,
body.ink-intro-active .author-contact,
body.ink-intro-active .guide-panel,
body.ink-intro-active .quest-panel,
body.ink-intro-active .quest-toast {
  opacity: 0;
  pointer-events: none;
}

body.ink-intro-active .topbar {
  transform: translateY(-8px);
}

body.ink-intro-active .utility-toolbar,
body.ink-intro-active .author-contact {
  transform: translateX(8px);
}

body.ink-intro-active .route,
body.ink-intro-active .gesture-tip,
body.ink-intro-active .guide-panel,
body.ink-intro-active .quest-panel,
body.ink-intro-active .quest-toast {
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .ink-reveal-intro {
    transition-duration: 300ms !important;
  }
}