/* ====================================================
   screen-slider.css — אנימציות המעבר בין מסכים
   ====================================================

   איך עובד מעבר בין מסכים?
   יש לנו "חלון" שדרכו רואים מסך אחד בכל פעם.
   כשעוברים למסך חדש — המסך הנוכחי "מחליק" החוצה
   והמסך החדש "מחליק" פנימה מהכיוון הנכון.

   ==================================================== */


/* ----------------------------------------------------
   מיכל המסכים — ה"חלון" שדרכו רואים את המסכים
   overflow:hidden = מה שמחוץ לחלון לא נראה
   ---------------------------------------------------- */
#screen-container {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

/* ====================================================
   הרצועה — מכילה את כל 5 המסכים בצמוד זה לזה
   ==================================================== */
#screen-strip {
    display    : flex;
    direction  : ltr;          /* כפיית LTR לפריסת הרצועה */
    height     : 100%;
    will-change: transform;
}


/* ====================================================
   מעבר שמאלה — עוברים למסך שנמצא יותר שמאל בסרגל
   (למשל: מחיים לתמר, או מתמר לבצלאל)
   ==================================================== */

/* המסך הנוכחי — יוצא שמאלה */
.exit-to-left {
    animation: exitToLeft 0.45s ease-in-out forwards;
}

/* המסך החדש — נכנס מהצד הימני */
.enter-from-right {
    animation: enterFromRight 0.45s ease-in-out forwards;
}


/* ====================================================
   מעבר ימינה — עוברים למסך שנמצא יותר ימין בסרגל
   (למשל: מתמר לחיים, או מבצלאל לתמר)
   ==================================================== */

/* המסך הנוכחי — יוצא ימינה */
.exit-to-right {
    animation: exitToRight 0.45s ease-in-out forwards;
}

/* המסך החדש — נכנס מהצד השמאלי */
.enter-from-left {
    animation: enterFromLeft 0.45s ease-in-out forwards;
}


/* ====================================================
   הגדרת הפריימים של כל אנימציה
   translateX = הזזה אופקית
   -100% = שמאלה מחוץ למסך
   +100% = ימינה מחוץ למסך
   ==================================================== */

@keyframes exitToLeft {
    from { transform: translateX(0);     }
    to   { transform: translateX(-100%); }
}

@keyframes enterFromRight {
    from { transform: translateX(100%);  }
    to   { transform: translateX(0);     }
}

@keyframes exitToRight {
    from { transform: translateX(0);     }
    to   { transform: translateX(100%);  }
}

@keyframes enterFromLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0);     }
}