/* Lateral nav (index <-> contact <-> blog): directional horizontal slide.
   "Forward" = moving right through nav order, "backward" = moving left. */
@keyframes page-enter {
  from { transform: translateX(100vw); }
  to   { transform: translateX(0); }
}

@keyframes page-exit {
  from { transform: translateX(0); }
  to   { transform: translateX(-100vw); }
}

@keyframes page-enter-backward {
  from { transform: translateX(-100vw); }
  to   { transform: translateX(0); }
}

@keyframes page-exit-backward {
  from { transform: translateX(0); }
  to   { transform: translateX(100vw); }
}

/* Depth nav (any page <-> project.html): fade instead of slide. */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Default enter (forward-slide) — applies whenever no other enter class
   is added by JS, e.g. a direct/first visit. */
.page-content {
  animation: page-enter 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-content.enter-backward {
  animation: page-enter-backward 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-content.enter-fade {
  animation: page-fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-exiting {
  animation: page-exit 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-exiting-backward {
  animation: page-exit-backward 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-fading-out {
  animation: page-fade-out 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (max-width: 599px) {
  .page-content,
  .page-content.enter-backward {
    animation-duration: 250ms;
  }
  .page-exiting,
  .page-exiting-backward {
    animation-duration: 250ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-content,
  .page-content.enter-backward,
  .page-content.enter-fade,
  .page-exiting,
  .page-exiting-backward,
  .page-fading-out {
    animation: none;
  }
}