/* Base screen container */
.screen {
    /* opacity: 0;
    transform: translateY(10px); */
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  /* Fade in */
  .fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Fade out */
  .fade-out {
    opacity: 0;
    transform: translateY(-10px);
  }
  
  /* Slide in from right */
  .slide-in-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  .slide-out-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  /* Scale in */
  .scale-in {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  .scale-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  /* Utility for delayed appearance */
  .delay-100 {
    transition-delay: 100ms;
  }
  .delay-200 {
    transition-delay: 200ms;
  }
  .delay-300 {
    transition-delay: 300ms;
  }