/* =============================================================================
   Screen Transition Styles
   ============================================================================= */

/* Base transition */
.screen {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Entering animation */
.screen.entering {
  animation: slideInRight 0.3s ease forwards;
}

/* Exiting animation */
.screen.exiting {
  animation: slideOutLeft 0.3s ease forwards;
}

/* Back navigation (reverse direction) */
.screen.entering-back {
  animation: slideInLeft 0.3s ease forwards;
}

.screen.exiting-back {
  animation: slideOutRight 0.3s ease forwards;
}

/* Direction-specific classes (used by Router) */
.screen.enter-right {
  animation: slideInRight 0.3s ease forwards;
}

.screen.enter-left {
  animation: slideInLeft 0.3s ease forwards;
}

.screen.exit-left {
  animation: slideOutLeft 0.3s ease forwards;
}

.screen.exit-right {
  animation: slideOutRight 0.3s ease forwards;
}

/* Keyframe animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen.entering,
  .screen.exiting,
  .screen.entering-back,
  .screen.exiting-back {
    animation: none;
    transition: opacity 0.15s ease;
  }

  .skeleton,
  .screen-loading::after {
    animation: none;
  }
}