/* ============ 06 · מה עובר לך בראש ============
   Figma: desktop 277:612 (1280×1130) / mobile 277:631 (390×920).

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

.s06{
  background:var(--cream);
  padding-block:var(--sec-y);
}
.s06__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
  text-align:center;
}
.s06__title{
  font-family:var(--f-head);font-weight:800;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);
  letter-spacing:-.015em;
  margin:0;
}

/* ---------- פיזור המחשבות ---------- */
.s06__scatter{
  position:relative;
  height:660px;
  margin-top:64px;
  list-style:none;
}
.s06__thought{
  position:absolute;
  /* right ולא left: בעברית הקצה הימני הוא ההתחלה של הבועה, ולכן הוא
     זה שצריך להיות נעול. הטקסט גדל שמאלה, כמו שהוא נקרא */
  right:var(--r);top:var(--t);
  background:#fff;
  border-radius:var(--r-card);
  box-shadow:0 6px 18px rgba(20,31,61,.10);
  padding:20px 32px;
  font-family:var(--f-body);font-weight:600;
  font-size:28px;line-height:38px;
  color:var(--ink);
  white-space:nowrap;
}
.s06__thought:nth-child(1){--r:1.39%; --t:0px;}
.s06__thought:nth-child(2){--r:61.1%; --t:110px;}
.s06__thought:nth-child(3){--r:20.1%; --t:224px;}
.s06__thought:nth-child(4){--r:59.4%; --t:338px;}
.s06__thought:nth-child(5){--r:6.48%; --t:452px;}
.s06__thought:nth-child(6){--r:59.7%; --t:566px;}

/* הבועות קופצות פנימה, אחת אחרי השנייה, בסדר שבו קוראים אותן. זו
   האנימציה היחידה בדף שיש בה חריגה קלה מעבר ליעד ואז חזרה - וזה
   מכוון: מחשבה טורדנית לא נכנסת לראש בהחלקה עדינה, היא קופצת. הגודל
   מתחיל ב-84% ולא ב-0 כדי שהקפיצה תיקרא כהופעה ולא כניפוח.
   ה-opacity מסתיים לפני התנועה, כך שהבועה כבר גלויה בזמן ההתייצבות */
.s06__scatter.reveal{opacity:1;transform:none;}
.s06__scatter .s06__thought{opacity:0;transform:scale(.84);}
.s06__scatter.is-in .s06__thought{
  opacity:1;transform:none;
  transition:opacity .26s var(--ease-out) var(--sd),
             transform .46s cubic-bezier(.34,1.5,.5,1) var(--sd);
}
.s06__thought:nth-child(1){--sd:0ms;}
.s06__thought:nth-child(2){--sd:130ms;}
.s06__thought:nth-child(3){--sd:260ms;}
.s06__thought:nth-child(4){--sd:390ms;}
.s06__thought:nth-child(5){--sd:520ms;}
.s06__thought:nth-child(6){--sd:650ms;}

/* ---------- הסגירה ---------- */
.s06__turn{
  margin-top:72px;
  font-family:var(--f-body);font-weight:400;
  font-size:32px;line-height:48px;
  color:var(--body);
}
.s06__punch{
  font-family:var(--f-head);font-weight:800;
  font-size:48px;line-height:60px;
  color:var(--sky-deep);
  letter-spacing:-.01em;
}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* מרווח מצומצם אל הסקשן הכחלחל שאחריו */
  .s06{padding-block:var(--sec-y) 10px;}
  .s06__title{font-size:26px;line-height:46px;}
  .s06__scatter{height:520px;margin-top:48px;}
  .s06__thought{
    padding:13px 18px;
    font-size:22px;line-height:29px;
    box-shadow:0 5px 14px rgba(20,31,61,.10);
  }
  .s06__thought:nth-child(1){--r:0;    --t:0px;}
  .s06__thought:nth-child(2){--r:26.0%;--t:86px;}
  .s06__thought:nth-child(3){--r:0;    --t:172px;}
  .s06__thought:nth-child(4){--r:10.5%;--t:258px;}
  .s06__thought:nth-child(5){--r:0.3%; --t:344px;}
  /* הבועה האחרונה נעולה על הקצה השמאלי ולא על הימני: היא קצרה בהרבה
     מכל השאר, וכשהיא נעולה מימין היא נגמרת באמצע ונראית תלויה באוויר.
     הנעילה משמאל מיישרת את הקצה השמאלי שלה לקצה של הבועות שמעליה */
  .s06__thought:nth-child(6){--r:auto;left:0;--t:430px;}
  .s06__turn{margin-top:56px;font-size:26px;line-height:40px;}
  .s06__punch{font-size:24px;line-height:44px;}
}

@media (prefers-reduced-motion:reduce){
  .s06__scatter .s06__thought{opacity:1;transform:none;}
}

/* ============ 06ב · ההוכחה ל״הן״ ============
   שלוש התכתבויות בשורה אחת, בלי כותרת ובלי קישוט. הן יושבות צמוד
   למשפט שמעליהן כי הן ההוכחה שלו, ולא סקשן בפני עצמו - ולכן הריווח
   העליון קטן מהריווח התחתון. */
/* גובה מסך מלא: ההתכתבויות הן ההוכחה, וההוכחה צריכה לתפוס את כל המסך
   ברגע שמגיעים אליה - לא להיות רצועה שחולפת. min-height ולא height,
   כדי שבמסך נמוך התוכן ידחוף החוצה במקום להיחתך. התוכן ממורכז אנכית
   כך שהכרטיסים יושבים באמצע גם כשיש עודף מקום */
.s06b{
  background:var(--cream);
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:36px var(--sec-y);
}
/* הכותרת שירדה לכאן מסקשן ״ההבדל הוא בדרך״: היא השאלה שההתכתבויות
   עונות עליה, ולכן היא הכותרת שלהן ולא שורת הסיום של הסקשן שלפני */
.s06b__title{
  width:100%;max-width:var(--content);margin:0 auto 40px;
  font-family:var(--f-head);font-weight:700;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);text-align:center;text-wrap:balance;
}

/* חמישה כרטיסים ולא שלושה. grid של חמש עמודות היה מקטין כל צילום
   מסך ל-190 פיקסל, ואי אפשר לקרוא בו התכתבות. לכן flex-wrap עם רוחב
   של שליש: שלושה בשורה הראשונה, שניים ממורכזים בשנייה, והצילומים
   נשארים בגודל שאפשר לקרוא */
.s06b__row{
  width:100%;max-width:var(--content);margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:center;gap:24px;
  list-style:none;align-items:flex-start;
}
.s06b__card{flex:0 0 calc((100% - 48px) / 3);}
.s06b__card{
  aspect-ratio:9 / 16;
  border-radius:var(--r-media);
  overflow:hidden;
  background:var(--card-off);
}
.s06b__card img{width:100%;height:100%;object-fit:cover;object-position:top center;}

@media (max-width:1199px){
  /* במובייל הסקשן משתחרר מנעילת ה-100vh. הרצועה נמוכה בהרבה ממסך מלא,
     ומרכוז אנכי בתוך מסך מלא ייצר 66 פיקסל אוויר שרירותיים מעל התמונות -
     מרווח שלא תואם שום גבול אחר בעמוד. 60 למעלה זה בדיוק אותו מרווח
     שיש בין כל שני סקשנים אחרים במובייל */
  /* הכפתור הוא סוף הסקשן, ומתחתיו לא צריך אוויר של סקשן שלם:
     הכותרת שאחריו נקראת כהמשך ישיר של הכפתור. אותו מרווח בדיוק
     שיש מעל הכפתור למשפט שמעליו */
  .s06b{
    min-height:0;justify-content:flex-start;
    padding-block:60px 14px;
  }
  .s06b__title{
    max-width:none;margin-bottom:28px;
    padding-inline:var(--margin);
  }
  /* במובייל שלוש כאלה בטור זה קיר. גלילה אופקית שומרת על הקצב של הדף
     ומשאירה את ההוכחה נגישה למי שרוצה אותה */
  /* אחת מתחת לשנייה ולא רצועה נגללת: גלילה אופקית דורשת מהגולשת
     לגלות שיש עוד, והרוב פשוט ממשיכים לגלול למטה ומפספסים שתיים
     משלוש ההתכתבויות. טור אנכי מציג את שלושתן בלי שום פעולה */
  .s06b__row{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    overflow-x:visible;
    /* בלי זה overflow-y מחושב ל-auto בעצמו, והתזוזה של 14 פיקסל
       שהכרטיסים נכנסים ממנה הופכת לגלילה אנכית בתוך הרצועה */
    overflow-y:hidden;
    padding-inline:24px;
    max-width:none;
  }
  /* גובה שנגזר מהמסך ולא מספר קבוע: את ההתכתבות צריך לראות במלואה
     ברגע שהיא מגיעה למסך, בלי לגלול את הדף למעלה ולמטה כדי להשלים
     אותה. הרוחב נגזר מהגובה לפי היחס של צילום מסך בטלפון */
  .s06b__card{
    flex:0 0 auto;width:100%;max-width:var(--content);height:auto;
    /* 66% מגובה המסך משאיר בדיוק מקום לחצים ולמרווחים בתוך המסך המלא.
       svh ולא vh: בטלפון שורת הכתובת של הדפדפן אוכלת גובה, ו-vh לא
       יודע על זה - הכרטיס היה נחתך למטה */
    aspect-ratio:9 / 16;
  }
}

/* החצים הוסרו: במובייל שלוש ההתכתבויות מוצגות בטור אנכי מלא
   ולכן אין לאן לנווט */
.s06b__nav{display:none;}

/* המרווח מעל הכפתור שווה למרווח שמתחתיו לכותרת של הסקשן הבא */
.s06b__cta{margin-top:calc(var(--sec-cta) - 10px);}