/* =========================================================
   לשונית ניהול פרויקטים — סריג תלויות ומסלול קריטי
   נוצר על ידי tools/make_proj.py · אין לערוך ידנית

   ⚠️ **המלכודת כאן היא גאנט.** תרשים גאנט או לוח קנבן הם הדימוי
   השחוק ביותר בתחום, וכל תבנית משתמשת בהם. במקומם: סריג של צמתים
   עם מסלול אחד מואר — **המסלול הקריטי**.

   **המנגנון הוא התקדמות לאורך מסלול**, ולא סיבוב (פרזנטציה) או
   התלכדות (דאטה). כלום לא זז ממקומו; אור עובר.
   ========================================================= */

.jh{
  position:relative; overflow:hidden;
  min-height:clamp(32rem,84svh,46rem);
  display:flex; align-items:flex-start;
  padding-block:clamp(3.5rem,8vw,5.5rem)!important;
}
.jh-in{position:relative; z-index:2; padding-block-start:clamp(.5rem,2vw,1.5rem)}
.jh-in > *{max-width:36rem}
.jh h1{max-width:15ch}
.jh h1 em{display:block}
.jh .lead{margin-top:1.5rem}
.jh .btn-row{margin-top:2.25rem}
.jh .kick{margin-bottom:1.4rem}

/* ההילה יושבת על הפינה שנושאת את הכתב בלבד — הסריג נשאר נקי. */
.jh::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 46% at 78% 26%,
    rgba(13,25,38,.95) 0%, rgba(13,25,38,.84) 46%, rgba(13,25,38,0) 100%);
}

/* ---------- השלד ---------- */
/* ⚠️ **הגרסה הקודמת נפסלה על דמיון, לא על רעיון.** היא הייתה סריג
   צמתים עם מסלול מואר — וזה **אותו מין יצור** כמו ענן הנקודות והעקומה
   בלשונית הדאטה: שדה + קו. הכלל שנשאר: *קרבה נמדדת בצורה, לא בכוונה.*
   לכן כאן זה לא שדה — זה **אובייקט אחד**: שלד איזומטרי שנבנה קומה
   אחרי קומה. */
.jh-lat{position:absolute; inset:0; z-index:0; overflow:hidden;
  display:flex; align-items:center; justify-content:flex-start}
.frm{display:block; width:100%; height:100%}
.frm.is-narrow{display:none}
@media (max-width:61.99em){
  .frm.is-wide{display:none}
  .frm.is-narrow{display:block}
  /* השלד יורד לתחתית ומתמרכז — הכתב מקבל את החלק העליון. */
  .jh-lat{align-items:flex-end; justify-content:center;
    padding-block-end:clamp(1rem,4vw,2.5rem)}
  .frm.is-narrow{width:min(100%,32rem); height:auto}
}

.frm line{
  fill:none; stroke:var(--line);
  stroke-width:calc(1px * var(--sw)); stroke-linecap:round;
}
.frm .beam{stroke:var(--ink-2)}
.frm .post{stroke:var(--ink-2); opacity:.75}
.frm .brace{stroke:var(--line); stroke-dasharray:4 6}
.frm .jt{fill:var(--clay); opacity:.8}

/* כל קומה היא שכבה משלה, וזה מה שמאפשר להדליק אותן בזו אחר זו. */
.frm .lvl{opacity:.62}
.frm .l0{opacity:.8}

/* התוויות — הן שהופכות מבנה מופשט לפרויקט. */
.frm .tag line{stroke:var(--line); stroke-width:calc(.8px * var(--sw))}
.frm .tag text{
  font-family:Heebo,system-ui,sans-serif; font-weight:700;
  font-size:calc(11px * var(--sw)); letter-spacing:.16em;
  /* ⚠️ **ללא `unicode-bidi:bidi-override`.** הוא היה כאן, והוא הפך את
     ארבע התוויות לכתב ראי: יפתח ראה בטלפון “םוזיי” במקום “ייזום”.
     המקור ב-HTML תקין לחלוטין (נמדדו ה-codepoints); מנוע ה-SVG של כרום
     מחיל את ה-override פעמיים על טקסט שכבר RTL מטבעו, והתוצאה היא היפוך.
     עברית טהורה לא צריכה override — אלגוריתם ה-bidi עושה את העבודה לבד. */
  /* ⚠️⚠️ **התוויות נפלטות ב-HTML הפוכות, וזה מכוון.**
     שני סבבי תיקון נכשלו כאן, כי שניהם ניסו לכוון את אלגוריתם ה-bidi:
     הסרת ה-override תיקנה את כרום, ו-`direction:ltr` תיקן את כרום שוב —
     ובאייפון של יפתח הכתב נשאר הפוך בשני המקרים. טקסט `<text>` ב-SVG
     הוא בדיוק המקום שבו המנועים לא מסכימים, ואין לי דרך לראות WebKit.

     לכן **מוציאים את ה-bidi מהמשוואה לגמרי**: המחרוזת נכתבת בסדר
     חזותי (`lab[k][::-1]`), ו-`ltr` + `bidi-override` אומרים למנוע
     "אל תסדר כלום, צייר משמאל לימין לפי הסדר שנתתי". זה דטרמיניסטי
     בכל מנוע, כי לא נשאר בו שיקול דעת.

     המחיר: תוכן ה-`<text>` אינו עברית תקינה לקריאת מכונה. הוא מקובל
     כאן ורק כאן — ה-SVG כולו `aria-hidden="true"`, כלומר מוסתר
     מקוראי מסך ממילא. **לא להעתיק את הדפוס הזה לטקסט שנקרא.** */
  fill:var(--ink-2); direction:ltr; unicode-bidi:bidi-override;
}
.frm .tag{opacity:.75}

/* ---------- התנועה: הקומות **מצטברות** ---------- */
/* ⚠️⚠️ **זה התיקון המהותי, והוא לא כיוונון.**
   בגרסה הקודמת כל קומה קיבלה את אותם keyframes עם `animation-delay`
   שונה — כלומר כל אחת נדלקה, **כבתה**, והבאה נדלקה במקומה. יפתח ראה
   שכבה אחת בהירה בכל רגע וחשב שזו תגובה לעכבר.

   מה שהוא ביקש, וזה גם מה שנכון לנושא: *"כל שכבה מתווספת לזאת שבאה
   לפניה ולא מחליפה אותה."* פרויקט לא מחליף שלב — הוא **בונה עליו**.

   ⚠️ ולמה זה מחייב ארבע קבוצות keyframes ולא אחת עם דיליי: כדי
   שקומה תישאר דולקת עד סוף המחזור, **אורך ההדלקה שלה שונה** מזו
   שאחריה. עם keyframes אחד ודיליי, הקומה הראשונה הייתה נכבית לפני
   שהאחרונה בכלל נדלקת. הבלוקים נוצרים בפייתון, לפי `LIT`. */
@keyframes lvl0{
  0%,8% {opacity:.2}
  15%,88% {opacity:1}
  100% {opacity:.2}
}
@keyframes tag0{
  0%,10% {opacity:.14}
  17%,88% {opacity:.95}
  100% {opacity:.14}
}
@keyframes beam0{
  0%,8% {stroke:var(--ink-2)}
  15%,21% {stroke:var(--clay)}
  30%,100% {stroke:var(--ink-2)}
}
@keyframes lvl1{
  0%,25% {opacity:.2}
  32%,88% {opacity:1}
  100% {opacity:.2}
}
@keyframes tag1{
  0%,27% {opacity:.14}
  34%,88% {opacity:.95}
  100% {opacity:.14}
}
@keyframes beam1{
  0%,25% {stroke:var(--ink-2)}
  32%,38% {stroke:var(--clay)}
  47%,100% {stroke:var(--ink-2)}
}
@keyframes lvl2{
  0%,42% {opacity:.2}
  49%,88% {opacity:1}
  100% {opacity:.2}
}
@keyframes tag2{
  0%,44% {opacity:.14}
  51%,88% {opacity:.95}
  100% {opacity:.14}
}
@keyframes beam2{
  0%,42% {stroke:var(--ink-2)}
  49%,55% {stroke:var(--clay)}
  64%,100% {stroke:var(--ink-2)}
}
@keyframes lvl3{
  0%,59% {opacity:.2}
  66%,88% {opacity:1}
  100% {opacity:.2}
}
@keyframes tag3{
  0%,61% {opacity:.14}
  68%,88% {opacity:.95}
  100% {opacity:.14}
}
@keyframes beam3{
  0%,59% {stroke:var(--ink-2)}
  66%,72% {stroke:var(--clay)}
  81%,100% {stroke:var(--ink-2)}
}
.anim-ready .frm .l0{animation:lvl0 5s ease-in-out infinite}
.anim-ready .frm .t0{animation:tag0 5s ease-in-out infinite}
.anim-ready .frm .l0 .beam{animation:beam0 5s ease-in-out infinite}
.anim-ready .frm .l1{animation:lvl1 5s ease-in-out infinite}
.anim-ready .frm .t1{animation:tag1 5s ease-in-out infinite}
.anim-ready .frm .l1 .beam{animation:beam1 5s ease-in-out infinite}
.anim-ready .frm .l2{animation:lvl2 5s ease-in-out infinite}
.anim-ready .frm .t2{animation:tag2 5s ease-in-out infinite}
.anim-ready .frm .l2 .beam{animation:beam2 5s ease-in-out infinite}
.anim-ready .frm .l3{animation:lvl3 5s ease-in-out infinite}
.anim-ready .frm .t3{animation:tag3 5s ease-in-out infinite}
.anim-ready .frm .l3 .beam{animation:beam3 5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .frm .lvl,.frm .tag,.frm .beam{animation:none!important}
  .frm .lvl{opacity:.6!important}
  .frm .tag{opacity:.8!important}
}

@media (max-width:61.99em){
  /* קומפוזיציה אחרת: הכתב במרכז-מעלה, והסריג נפרש מתחתיו. */
  .jh{align-items:flex-start; min-height:clamp(34rem,88svh,48rem)}
  .jh-in{text-align:center}
  .jh-in > *{margin-inline:auto}
  .jh .kick,.jh .btn-row{justify-content:center}
  .jh h1{max-width:17ch}
  .jh::after{
    background:linear-gradient(to bottom,
      rgba(13,25,38,.94) 0%, rgba(13,25,38,.90) 40%,
      rgba(13,25,38,.35) 72%, rgba(13,25,38,0) 100%);
  }
}

/* ---------- התגית ---------- */
.kick{
  display:flex; align-items:center; gap:.85rem; margin:0;
  font-size:.75rem; font-weight:700; letter-spacing:.2em; color:var(--orchid);
  flex-wrap:wrap;
}
.kick i{flex:0 0 auto; width:2.5rem; height:1px; background:var(--line)}

/* ---------- הסילבוס כפירוק ---------- */
/* ⚠️ WBS הוא התוצר האופייני של התחום אחרי גאנט, והוא **לא** שחוק —
   כי כמעט אף אתר לא טורח לצייר אותו באמת. כאן הסילבוס עצמו מצויר
   כפירוק: שלב, ותחתיו מה שהוא מכיל, עם קווי חיבור אמיתיים. */
.wbs{list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0; display:grid; gap:0}
.wbs > li{
  position:relative;
  padding:clamp(1.5rem,3vw,2.25rem) 0 clamp(1.5rem,3vw,2.25rem) 0;
  border-top:1px solid var(--line);
  display:grid; gap:.5rem 2rem;
}
.wbs > li:last-child{border-bottom:1px solid var(--line)}
@media (min-width:56em){
  .wbs > li{grid-template-columns:4.5rem minmax(0,17rem) minmax(0,1fr); align-items:start}
}
.wbs .n{
  font-family:var(--font-display); font-weight:900; font-size:1.75rem;
  line-height:1; color:var(--violet);
}
.wbs h3{margin:0; font-size:clamp(1.125rem,2.2vw,1.4rem)}

.leaf{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.leaf li{
  position:relative; padding-inline-start:1.4rem;
  font-size:.9375rem; line-height:1.7; color:var(--ink-2);
}
/* קו החיבור של הפירוק. ⚠️ ב-RTL `inset-inline-start` הוא **ימין** —
   וזה בדיוק הצד שממנו הענף יוצא בעברית. */
.leaf li::before{
  content:""; position:absolute; inset-block-start:.62em;
  inset-inline-start:0; width:.85rem; height:1px; background:var(--line);
}
.leaf li::after{
  content:""; position:absolute; inset-block:-.55rem .62em;
  inset-inline-start:.85rem; width:1px; background:var(--line);
}
.leaf li:first-child::after{inset-block-start:0}
.wbs > li:hover .leaf li::before,
.wbs > li:hover .leaf li::after{background:var(--violet)}

/* ---------- למי זה מתאים ---------- */
.who-sec{padding-block:clamp(3rem,6vw,4.5rem)!important}
.who{
  padding:clamp(1.75rem,4vw,2.75rem);
  border:1px solid var(--line); border-top:2px solid var(--orchid);
  border-radius:2px;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--plum) 80%,transparent),
    color-mix(in srgb,var(--sand) 52%,transparent));
}
.who h2{margin:0 0 1rem; font-size:clamp(1.5rem,3vw,2.1rem)}
.who p{margin:0; max-width:44rem; font-size:1.0625rem; line-height:1.8;
  color:var(--ink-2)}