.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  opacity: 1;
}

.intro-pending .intro,
.intro.is-leaving {
  display: block;
}

.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.intro__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

html.intro-pending {
  overflow: hidden;
}

.intro-pending .site-header,
.intro-pending .hero__canvas {
  opacity: 0;
}

.intro-skipped .site-header,
.intro-skipped .hero__canvas,
.intro-skipped .reveal {
  transition: none;
}