/* ═══════════════════════════════════════════════════════════════
   CSS Page Transitions
   ═══════════════════════════════════════════════════════════════ */

.page-fade-in {
  animation: pageFadeIn 200ms ease-in-out forwards;
}

.page-fade-out {
  animation: pageFadeOut 150ms ease-in-out forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-fade-in, .page-fade-out {
    animation: none !important;
  }
}