.page-transition {
  position: relative;
  flex: 1;
  min-height: 0;
  animation: page-fade-in 150ms ease-out both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Exit: fade + directional slide */
.page-motion--exit {
  animation: page-out 180ms ease forwards;
  pointer-events: none;
}

.page-motion--exit.is-forward {
  animation: page-slide-out-forward 180ms ease forwards;
  pointer-events: none;
}

.page-motion--exit.is-backward {
  animation: page-slide-out-backward 180ms ease forwards;
  pointer-events: none;
}

/* Cancel child's own entrance animation during exit */
.page-motion--exit .page-motion {
  animation: none !important;
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes page-slide-out-forward {
  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}

@keyframes page-slide-out-backward {
  to {
    opacity: 0;
    transform: translateX(16px);
  }
}