/* =============================================================================
   PAGE LOAD
   Fades main and footer in on page load, and out when navigating to a new page.

   JS (page-load.js) adds .page-exit to targets on internal link click.
   To extend to other elements: add selectors to PAGE_EXIT_TARGETS in page-load.js

   Entry: .page-enter class added by JS on DOMContentLoaded, transition handles fade in.
   Exit:  .page-exit class added by JS on link click, transition handles fade out.
   ============================================================================= */

body {
  transition: background-color var(--duration-page) var(--ease-default);
}

main,
footer {
  opacity: 0;
  transition:
    opacity var(--duration-page) var(--ease-default),
    transform var(--duration-nav) var(--ease-nav);
}

main.page-enter,
footer.page-enter {
  opacity: 1;
}

main.page-exit,
footer.page-exit {
  opacity: 0;
}