/* ============================================================
   PAGE TRANSITION (drop-in component)

   To use on any site:
     1. Include this stylesheet
     2. Include js/page-transition.js
     3. Add <div class="page-transition"></div> just before </body>

   The overlay sits opaque on first paint, fades out once the
   page is in (the new page eases in instead of snapping in),
   and fades back to opaque before navigating to a new page.
   ============================================================ */

.page-transition {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.page-transition.is-loaded {
  opacity: 0;
}

.page-transition.is-leaving {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s ease;
}