/* Page Transition Animation */
.page-transition {
  opacity: 0;
  /* Initial state for the slide-in animation */
  transform: translateY(20px);
  animation: slideFadeIn 0.5s ease-out forwards;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Slide up to final position */
  }
}

/* Body transition handling */
body {
  /* Transition both opacity and transform */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

body.fade-out {
  opacity: 0;
  /* Add a slight slide down on exit */
  transform: translateY(20px);
}