/* ============ 11 · גם אני הייתי שם ============
   Figma: desktop 278:282 (1280×1530) / mobile 278:314 (390×1931).

   הסקשן הארוך ביותר בדף מבחינת טקסט, וזה בכוונה: זה הסיפור האישי של טל,
   והוא צריך להיקרא כמו סיפור ולא כמו רשימת נקודות. הקצב נשמר על ידי שני
   סוגי מרווח בלבד - 14 בתוך קבוצה, 36 בין קבוצות - וכל מקום שבו הקצב
   נעצר הוא משפט מודגש בפני עצמו. */

.s11{
  background:var(--cream);
  padding-block:80px;
}
.s11__wrap{
  width:100%;max-width:680px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:36px;
  text-align:center;
}

.s11__title{
  font-family:var(--f-head);font-weight:700;
  font-size:44px;line-height:55px;
  color:var(--ink);
  letter-spacing:-.01em;
}

.s11__group{
  display:flex;flex-direction:column;gap:14px;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:33px;
  color:#3e3e3e;                     /* פיגמה: #141414 ב-82% */
}
.s11__group .em{color:var(--sky-deep);font-weight:700;}

/* שלוש התחנות שבהן הסיפור עוצר. הן לא כותרות - הן משפטים שהעין
   נתקלת בהם בגלל המשקל והגודל, ולכן הם p ולא h */
.s11__beat{
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:39px;
  color:var(--ink);
}
.s11__beat .em{color:var(--sky-deep);font-weight:700;}

.s11__close{
  font-family:var(--f-head);font-weight:700;
  font-size:28px;line-height:39px;
  color:var(--ink);
  letter-spacing:-.01em;
}

.s11__cta{margin-top:0;}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s11{padding-block:60px;}
  .s11__wrap{gap:30px;}
  .s11__title{font-size:30px;line-height:38px;}
  .s11__group{gap:12px;}
}

/* ============ לפני ואחרי של טל בצדדים ============
   הטור המרכזי נשאר 680 ובאמצע. שתי התמונות יושבות מחוצה לו, כל אחת
   בצד שלה, ומעוגנות לתחתית הסקשן. הן נכנסות מהצד שלהן פנימה ברגע
   שהסקשן נכנס למסך - התנועה היחידה כאן, והיא מספרת בדיוק את מה
   שהטקסט מספר: אותו אדם, שני מצבים.

   .reveal מאפס transform, ולכן שתי התיבות האלה מנטרלות את עצמן
   מהמנגנון הכללי ומריצות תנועה משלהן. */
.s11{position:relative;overflow:hidden;}
/* בדסקטופ העטיפה לא קיימת בכלל: היא רק כלי לסידור במובייל, וכאן היא
   הייתה מוסיפה עוד מרווח לטור המרכזי */
.s11__tal{display:contents;}
/* התמונות עלו לחלק העליון של הסקשן וגדלו: הן הראיה שטל באמת היה שם,
   והן צריכות להיקרא יחד עם הכותרת ולא להתחבא בתחתית */
.s11__before,.s11__after{
  position:absolute;top:0;
  width:290px;
  opacity:0;
  transition:transform .8s var(--ease-out), opacity .8s var(--ease-out);
  pointer-events:none;
}
.s11__before{right:40px;transform:translateX(120px);}
.s11__after {left:40px; transform:translateX(-120px);}
.s11__before.is-in,.s11__after.is-in{opacity:1;transform:translateX(0);}
.s11__before img,.s11__after img{
  width:100%;height:auto;display:block;
  object-fit:contain;object-position:bottom;
}

/* מתחת ל-1280 אין מספיק מקום בצדדים בלי להתנגש בטקסט, ולכן שתי
   התמונות יורדות אל מתחת לסיפור, זו לצד זו, ממש לפני הכפתור.
   row ולא row-reverse: בעמוד RTL הילד הראשון בשורה רגילה יושב מימין,
   ו-״לפני״ הוא הראשון, ולכן ציר הזמן רץ בכיוון הקריאה */
@media (max-width:1279px){
  .s11__tal{
    display:flex;flex-direction:row;
    align-items:flex-start;justify-content:center;
    gap:0;width:100%;max-width:420px;
    position:relative;
    /* התמונות עולות מיד אחרי הכותרת ולפני הסיפור: ההוכחה שטל באמת היה
       שם צריכה להתקבל לפני שקוראים את הווידוי, לא אחריו. בתחתית הן
       הגיעו אחרי שכבר החלטת אם להאמין לו */
    order:-1;
  }
  .s11__title{order:-2;}
  .s11__before,.s11__after{
    position:static;width:auto;flex:1 1 0;
    /* גובה זהה לשתי התיבות והתמונה נצמדת לראש התיבה: שני הראשים
       מתחילים באותו קו עליון, בלי לחתוך אף אחת מהתמונות */
    height:520px;
    transform:translateY(20px);
  }
  .s11__before.is-in,.s11__after.is-in{transform:translateY(0);}
  .s11__before img,.s11__after img{
    height:100%;object-fit:contain;object-position:top center;
  }

  /* הקו החוצץ קיים במובייל בלבד. בדסקטופ שתי התמונות רחוקות זו מזו
     בשני צידי העמודה ואין מה לחצוץ. במובייל הן נוגעות, וקו אנכי דק
     הוא מה שאומר ״שני מצבים של אותו אדם״ ולא ״תמונה רחבה אחת״ */
  .s11__tal::before{
    content:"";position:absolute;
    top:0;bottom:0;left:50%;
    width:1px;margin-left:-.5px;
    background:var(--ink);
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .s11__before,.s11__after{transition:none;opacity:1;transform:none;}
}