/* ============ 03 · הלופ ============
   Figma: desktop 277:430 (1280×2678) / mobile 286:152 (390×2158).

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

.s03{
  background:#fff;
  padding-block:var(--sec-y);
  position:relative;
}

/* ---------- כותרת ---------- */
.s03__title{
  width:min(var(--content), 100% - var(--margin) * 2);
  margin:0 auto;
  font-family:var(--f-head);font-weight:800;
  font-size:46px;line-height:59px;
  color:var(--ink);
  letter-spacing:-.01em;
  text-align:center;
}
/* שבירות השורה של הכותרת שונות בין הברייקפוינטים בפיגמה, ולכן הן
   מפורשות ולא נתונות לחישוב של הדפדפן: br-d חי רק בדסקטופ, br-m רק
   במובייל. אותו טקסט בדיוק, שבירה אחרת */
.br-m{display:none;}
/* רווח שקיים רק במובייל: כשמסתירים br-d שני חלקי המשפט נדבקים זה לזה,
   וסימן שנשען על השבירה - כמו מקף בסוף שורה - נשאר בלי אוויר אחריו */
.sp-m{display:none;}
/* רווח שקיים רק בדסקטופ: במובייל הכיתוב נשבר לשתי שורות
   ולכן הרווח בין שני החלקים מיותר ומייצר שורה שמתחילה ברווח */
.sp-d{display:inline;}

/* ---------- דיאגרמת הלופ ---------- */
.loop{
  position:relative;
  width:730px;height:730px;
  margin:58px auto 0;
}
.loop__ring,
.loop__core{
  position:absolute;inset:0;margin:auto;   /* מרכוז בלי transform, כדי
     שה-transform יישאר פנוי לאנימציית הפעימה */
  border-radius:50%;
}
.loop__ring{
  background:var(--sky);
  /* הטבעות שקופות בכוונה ולא בצבע מלא: הן מונחות זו על זו, והשכבות
     הן מה שיוצר את ההתעבות לכיוון המרכז */
  animation:loop-pulse 5.4s var(--ease) infinite;
  animation-delay:var(--rd,0s);
}
.loop__ring--1{width:662px;height:662px;--o:.10;--rd:0s;}
.loop__ring--2{width:540px;height:540px;--o:.14;--rd:.42s;}
.loop__ring--3{width:418px;height:418px;--o:.19;--rd:.84s;}
.loop__ring--4{width:296px;height:296px;--o:.26;--rd:1.26s;}
.loop__ring{opacity:var(--o);}

/* פעימה אחת על ארבע טבעות בהיסט. היא קיימת כי הסקשן נקרא "הלופ"
   והתנועה היא התוכן עצמו ולא קישוט. scale ו-opacity בלבד, כלומר
   בלי חישוב פריסה מחדש - הדפדפן מריץ את זה על ה-GPU */
@keyframes loop-pulse{
  0%,100%{transform:scale(1);   opacity:var(--o);}
  50%    {transform:scale(1.11);opacity:calc(var(--o) * 1.55);}
}
.loop.is-paused .loop__ring,
.loop.is-paused .loop__pills,
.loop.is-paused .loop__pill{animation-play-state:paused;}

.loop__core{
  width:208px;height:208px;
  background:var(--navy);
  box-shadow:0 10px 30px rgba(61,79,115,.30);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.loop__core span{
  font-family:var(--f-head);font-weight:800;
  font-size:28px;line-height:35px;
  color:#fff;text-align:center;
}

/* ---- הגלגל ----
   שכבת הפילים כולה מסתובבת סביב המרכז, וכל פיל מסתובב בדיוק באותו
   קצב לכיוון ההפוך - ולכן הוא נע במסלול מעגלי אבל הטקסט בתוכו נשאר
   ישר ונקרא בכל רגע. 96 שניות לסיבוב: תנועה שמרגישים רק אם עוצרים
   להסתכל, ולא כזו שמושכת את העין מהטקסט */
.loop__pills{
  position:absolute;inset:0;z-index:1;
  animation:loop-orbit 96s linear infinite;
}
/* כיוון השעון - אותו כיוון שבו נקראות הבועות */
@keyframes loop-orbit{to{transform:rotate(360deg);}}

/* ה-slot הוא נקודה בגודל אפס על ההיקף. --a היא הזווית שלו על המעגל,
   והסיבוב ההפוך שאחרי ההסטה מחזיר לו מערכת צירים ישרה, כך שהפיל
   שבתוכו לא צריך לדעת כלום על הזווית */
/* --rf נקבע לכל בועה בנפרד ב-HTML. בלעדיו כל שש הבועות יושבות על מעגל
   אחד בדיוק, וזה קורא כטבעת ולא כפיזור על פני שדה הפולס. מקדם שנע
   סביב 1 מוציא חלק מהן מעבר לטבעת החיצונית ומכניס חלק פנימה */
.loop__slot{
  position:absolute;left:50%;top:50%;
  width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r) * var(--rf, 1)))
            rotate(calc(-1 * var(--a)));
}
/* 390 הוא בדיוק רדיוס הטבעת החיצונית, ולכן הבועות יושבות עליה
   ולא מרחפות פנימה. המרווח בין שתי בועות שכנות שווה ל-R עצמו */
.loop{--r:332px;}
.loop__pill{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-50%);
  animation:loop-orbit-rev 96s linear infinite;
  white-space:nowrap;
  background:#fff;
  border:1px solid #ebeef5;               /* פיגמה: #40589b ב-10% */
  border-radius:var(--r-pill);
  box-shadow:0 8px 22px rgba(20,31,61,.14);
  padding:13px 26px;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:29px;
  color:#272727;                          /* פיגמה: #141414 ב-92% */
}
/* הבועות מסתובבות נגד כיוון המסלול באותה מהירות, ולכן הטקסט נשאר
   ישר לגמרי לאורך כל הסיבוב */
@keyframes loop-orbit-rev{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to  {transform:translate(-50%,-50%) rotate(-360deg);}
}
@media (prefers-reduced-motion:reduce){
  .loop__pills,.loop__pill{animation:none;}
}

/* ---------- העמודה ---------- */
.s03__body{
  width:min(680px, 100% - var(--margin) * 2);
  margin:40px auto 0;
  display:flex;flex-direction:column;
  gap:40px;
  text-align:center;
}

/* כל שורה היא אלמנט בפני עצמו ולא שורה בתוך פסקה: בפיגמה המרווח בין
   השורות גדול מגובה השורה עצמה (45 מול 35), וזה בדיוק מה שנותן לבלוק
   את קצב הקריאה האיטי. עם line-height בלבד אי אפשר להפריד בין השניים */
.s03__lines{
  display:flex;flex-direction:column;
  gap:10px;
  margin:0;
}
.s03__lines span{
  display:block;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:35px;
  color:#353535;                          /* פיגמה: #141414 ב-86% */
}
/* השורה האחרונה בבלוק הראשון היא בצבע מלא בפיגמה - ההבטחה שנשברת */
.s03__lines span.is-full{color:var(--ink);}

.s03__turn{                               /* "ואז החיים קורים." */
  font-family:var(--f-body);font-weight:700;
  font-size:26px;line-height:41px;
  color:var(--sky-deep);
  margin:0 0 6px;
}

/* ---------- הציטוט ---------- */
.s03__quote{
  position:relative;
  background:var(--navy);
  border-radius:var(--r-card);
  box-shadow:0 16px 40px rgba(10,15,33,.28);
  min-height:264px;
  margin:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.s03__quote::before{                      /* הגרש הענק שברקע */
  content:"”";
  position:absolute;
  left:50%;top:-17px;transform:translateX(-50%);
  font-family:var(--f-head);font-weight:800;
  font-size:300px;line-height:1;
  color:var(--quote-behind);
  pointer-events:none;
}
.s03__quote p{
  position:relative;z-index:1;
  font-family:var(--f-body);font-weight:500;
  font-size:36px;line-height:50px;
  color:#fff;
  padding-inline:48px;
  margin:0;
}

/* ---- הקלדה ----
   .tw__g הוא הטקסט המלא. הוא תמיד שם ותופס בדיוק את המקום שלו, ולכן
   הכרטיס לא משנה גובה ולא מזיז את מה שמתחתיו תוך כדי ההקלדה.
   כשה-JS פעיל הוא נצבע שקוף ושכבת ההקלדה מונחת עליו; בלי JS הוא פשוט
   נשאר לבן והציטוט מופיע רגיל */
.tw{display:block;}
.tw__box{position:relative;display:inline-block;}
.tw__t{
  position:absolute;top:0;right:0;left:0;
  text-align:right;                       /* בעברית ההקלדה מתחילה מימין */
  white-space:pre;
}
.js .s03__quote[data-type] .tw__g{color:transparent;}
.tw__caret{
  display:inline-block;
  width:2px;height:.92em;
  margin-inline-start:2px;
  vertical-align:-.12em;
  background:var(--sky);
  animation:tw-blink 1s steps(1,end) infinite;
}
@keyframes tw-blink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}

/* ---------- המשפט שסוגר ---------- */
.s03__punch{
  /* לא h3: זו שורת סיום של סיפור, לא כותרת של תת-נושא. מבחינת מבנה
     הכותרות בעמוד לסקשן יש h2 אחד בלבד */
  font-family:var(--f-head);font-weight:800;
  font-size:40px;line-height:53px;
  color:var(--ink);
  letter-spacing:-.01em;
  margin:0;
}

/* ---------- הקול הפנימי ---------- */
/* הרשימה עצמה לא נכנסת כגוש - היא רק הטריגר. מבטלים עליה את
   ההסתרה של .reveal, וכל בועה נכנסת בתורה */
.s03__voice{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
  opacity:1;transform:none;
}
/* ארבע מחשבות שעולות אחת אחרי השנייה, לא ארבע ביחד: ככה זה נשמע
   בראש - לא רשימה, אלא מחשבה שגוררת את הבאה */
.s03__voice li{opacity:0;transform:translateY(10px);}
.s03__voice.is-in li{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) var(--sd),
             transform .5s var(--ease-out) var(--sd);
}
.s03__voice li:nth-child(1){--sd:0ms;}
.s03__voice li:nth-child(2){--sd:260ms;}
.s03__voice li:nth-child(3){--sd:520ms;}
.s03__voice li:nth-child(4){--sd:780ms;}
@media (prefers-reduced-motion:reduce){
  .s03__voice li{opacity:1;transform:none;}
}
.s03__voice li{
  background:#fff;
  border:1px solid #e4e8f1;               /* פיגמה: #40589b ב-14% */
  /* פינה אחת קטנה מארבע - זו הפינה שהופכת מלבן לבועת דיבור.
     בעברית הזנב יושב מימין למעלה, ולכן דווקא TR הוא 6 */
  border-radius:24px 6px 24px 24px;
  box-shadow:0 5px 14px rgba(20,28,51,.07);
  padding:16px 30px;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:33px;
  color:#2b2b2b;                          /* פיגמה: #141414 ב-90% */
}

/* ============ mobile ============ */
@media (max-width:1199px){
  .br-d{display:none;}
  .br-m{display:inline;}
  .sp-m{display:inline;}
  .sp-d{display:none;}

  .s03__title{font-size:26px;line-height:34px;}

  /* המעגל מסתובב גם במובייל. שני תנאים קובעים כל מספר כאן: כל בועה
     חייבת להישאר על המסך בכל נקודה במסלול (R ועוד חצי רוחב הבועה קטן
     מ-185), וגם לא לבלוע את הליבה כשהיא עוברת בצד (R פחות חצי רוחב גדול
     מרדיוס הליבה). הבועה הרחבה ביותר היא 134 פיקסל, ולכן R נעול על 116
     והליבה על 88 - זה החלון היחיד שבו שני התנאים מתקיימים יחד. כל בועה
     רחבה יותר סוגרת את החלון לגמרי, ואז סיבוב הופך לבלתי אפשרי */
  .loop{
    /* יוצא ממגבלת הרוחב של העמוד: המעגל צריך את כל רוחב המסך */
    width:100vw;margin-inline:calc(50% - 50vw);
    max-width:none;height:336px;
    margin-top:56px;
    --r:121px;
  }
  /* הליבה מעל הבועות, כדי שהצללית של בועה שעוברת לא תיפול על הטקסט */
  .loop__core{z-index:2;}

  .loop__ring--1{width:284px;height:284px;}
  .loop__ring--2{width:230px;height:230px;}
  .loop__ring--3{width:178px;height:178px;}
  .loop__ring--4{width:128px;height:128px;}
  .loop__core{width:98px;height:98px;box-shadow:0 8px 22px rgba(61,79,115,.32);}
  .loop__core span{font-size:19px;line-height:24px;}

  .loop__pill{
    /* רצפת ה-22 של הדף חלה גם כאן. הפילים ירדו ל-19 רק כדי לשרוד מסלול
       מסתובב, ומשהמסלול קפא הסיבה להקטנה נעלמה */
    padding:9px 15px;
    font-size:20px;line-height:27px;
    white-space:nowrap;
    box-shadow:0 6px 18px rgba(20,31,61,.14);
  }

  .s03__body{
    width:min(342px, 100% - var(--margin) * 2);
    margin-top:70px;
    gap:34px;
  }
  .s03__lines{gap:8px;}
  .s03__turn{font-size:24px;line-height:38px;}

  .s03__quote{min-height:188px;}
  .s03__quote::before{font-size:200px;top:0;}   /* גבוה יותר, לא חוצה את הטקסט */
  .s03__quote p{font-size:26px;line-height:36px;padding-inline:26px;}

  .s03__punch{font-size:28px;line-height:37px;}

  .s03__voice{gap:12px;}
  .s03__voice li{
    border-radius:20px 6px 20px 20px;
    padding:13px 22px;
    line-height:29px;
  }
}

/* ---------- ללא אנימציה ---------- */
@media (prefers-reduced-motion:reduce){
  .loop__ring,
  .loop__pills,
  .loop__pill,
  .tw__caret{animation:none;}
  .js .s03__quote[data-type] .tw__g{color:#fff;}
  .tw__t{display:none;}
}