/**
 * Page Transition Animations
 * Overlay and transition keyframes for smooth page navigation
 */

/* ========================================
   Page Transition Overlay
   ======================================== */

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #1a4d2e 0%, #2d3436 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.page-transition-overlay.active {
  pointer-events: auto;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay {
    animation-duration: 100ms !important;
  }
}

/* ========================================
   Page Transition - Fade Animation
   ======================================== */

@keyframes pageTransitionIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.95;
  }
}

@keyframes pageTransitionOut {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   Page Transition - Slide Up Animation
   (Optional: Available for future use)
   ======================================== */

@keyframes slideUpIn {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 0.95;
  }
}

@keyframes slideUpOut {
  from {
    opacity: 0.95;
    transform: translateY(0);
  }
  to {
    transform: translateY(-100vh);
    opacity: 0;
  }
}

/* ========================================
   Internal Screen Transitions
   (For use with showScreen() in multi-step forms)
   ======================================== */

@keyframes screenTransitionIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.6;
  }
}

@keyframes screenTransitionOut {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   Content Fade-In Animation
   (Optional: Apply to page content after navigation)
   ======================================== */

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

/* ========================================
   Accessibility: Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay {
    animation: none;
  }

  @keyframes pageTransitionIn {
    from, to {
      opacity: 0.95;
    }
  }

  @keyframes pageTransitionOut {
    from, to {
      opacity: 0;
    }
  }

  @keyframes screenTransitionIn {
    from, to {
      opacity: 0.6;
    }
  }

  @keyframes screenTransitionOut {
    from, to {
      opacity: 0;
    }
  }
}