omniai-web/src/styles/components/page-transition.css

.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);
  }
}

/* Directional page transitions */
.page-motion--enter.is-forward {
  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.page-motion--enter.is-backward {
  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.page-motion--exit.is-forward {
  animation: page-slide-out-forward 180ms ease both;
}

.page-motion--exit.is-backward {
  animation: page-slide-out-backward 180ms ease both;
}

@keyframes page-slide-in-forward {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes page-slide-in-backward {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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