html { background-color: #000; }
html.page-leaving body {
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}
html.page-entering body { animation: page-enter 220ms ease-out both; }
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.page-leaving body { opacity: 1; transition: none; }
  html.page-entering body { animation: none; }
}

/* A page-to-page fade replaces the contact intro, rather than stacking them. */
html.page-intro-skipped .contact-page__hero,
html.page-intro-skipped .contact-page__card,
html.page-intro-skipped .contact-page__form-panel,
html.page-intro-skipped .contact-page__social,
html.page-intro-skipped .contact-page__footnote {
  animation: none !important;
}