/* ================================================
   PAGE TRANSITION — GPU-accelerated
   Pure content fade + slide on compositor layer.
   ================================================ */

/* Entrance: content starts invisible & 18px below */
.page-enter {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* JS adds this class on DOMContentLoaded */
.page-enter.page-entered {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: auto;
}

/* Exit: content lifts & fades before navigation */
.page-exiting {
  opacity: 0 !important;
  transform: translate3d(0, -12px, 0) !important;
  transition: opacity 0.24s ease, transform 0.24s ease !important;
  pointer-events: none;
}