/* ══════════════════════════════════════════
   PAGE TRANSITIONS
   Soft fade + gentle lift on enter/exit
══════════════════════════════════════════ */

/* ── OVERLAY ── */
#page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #0f0802;
  opacity: 1;
  transition: opacity 0s;
}

/* ── ENTER: overlay fades out, content rises ── */
body.page-entering {
  overflow: hidden;
}
body.page-entering #page-overlay {
  opacity: 1;
}
body.page-entering main,
body.page-entering .topbar,
body.page-entering .mobile-bottom-nav {
  opacity: 0;
  transform: translateY(18px);
}

body.page-entered #page-overlay {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
body.page-entered main,
body.page-entered .topbar,
body.page-entered .mobile-bottom-nav {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger topbar slightly ahead of main */
body.page-entered .topbar {
  transition-delay: 0s;
}
body.page-entered main {
  transition-delay: 0.06s;
}
body.page-entered .mobile-bottom-nav {
  transition-delay: 0.1s;
}

/* ── EXIT: content fades + sinks slightly ── */
body.page-exiting main,
body.page-exiting .topbar,
body.page-exiting .mobile-bottom-nav {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.38s cubic-bezier(0.4, 0, 1, 1),
    transform 0.38s cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}
body.page-exiting #page-overlay {
  opacity: 1;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 1, 1);
}

/* ── INITIAL STATE for all elements ── */
main,
.topbar,
.mobile-bottom-nav {
  will-change: opacity, transform;
}

/* Remove old page-transition class animation since we handle it now */
.page-transition {
  animation: none !important;
}