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

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

.s06{
  background:var(--cream);
  padding-block:80px;
}
.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:56px;line-height:66px;
  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:60px;}
  .s06__title{font-size:38px;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:34px;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 80px;
}
.s06b__row{
  width:100%;max-width:var(--content);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  list-style:none;align-items:start;
}
.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;}
/* עד שהחומר יגיע מטל - סימון גלוי, לא תמונה ממוצאת */
.s06b__card--todo{
  display:flex;align-items:center;justify-content:center;
  background:var(--placeholder);
  padding:24px;
}
.s06b__card--todo p{
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--sky-deep);text-align:center;
}

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

/* ---------- החצים ---------- */
.s06b__nav{display:none;}
@media (max-width:1199px){
  .s06b__nav{
    display:flex;justify-content:center;gap:16px;
    margin-top:20px;
  }
  .s06b__arrow{
    width:56px;height:56px;border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--navy);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .25s var(--ease), opacity .25s var(--ease);
  }
  .s06b__arrow svg{width:26px;height:26px;}
  .s06b__arrow:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}
  /* חץ שאין לאן ללחוץ בו נשאר גלוי אבל מכובה: היעלמות של כפתור מזיזה
     את זה שלידו ומבלבלת.

     78% ולא 35%, לפי רצפת האטימות של הפרויקט. כדי שהוא עדיין ייקרא
     כמכובה ולא כפעיל, ההבדל נעשה בצבע ולא בשקיפות: הרקע יורד לגוון
     בהיר יותר. אטימות נמוכה מדי הופכת אותו לכתם אפרפר שקשה לזהות
     בכלל, במיוחד בשמש על מסך טלפון */
  .s06b__arrow[disabled]{
    opacity:.78;
    background:var(--sky-tint);
    color:var(--muted);
    cursor:default;
  }
  /* פס הגלילה של הדפדפן יורד - החצים הם הניווט */
  .s06b__row{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;}
  .s06b__row::-webkit-scrollbar{display:none;}
}