/* =========================================================
   לשונית כישורי פרזנטציה — הדף מצייר תשומת לב
   נוצר על ידי tools/make_pres.py · אין לערוך ידנית

   ⚠️ **ריסון הוא חלק מהטענה.** דף שמלמד פרזנטציה ונראה רועש סותר את
   עצמו. אלמנט אחד גדול, הרבה אוויר, צבע הדגשה אחד.
   ========================================================= */

/* ---------- השער: הכתב במרכז, החדר סביבו ---------- */
/* לא פיצול שמאל/ימין כמו בבית ובדאטה — הקורא עומד באמצע החדר. */
.ph{
  position:relative; overflow:hidden;
  min-height:clamp(30rem,78svh,44rem);
  display:flex; align-items:center;
  padding-block:clamp(3.5rem,8vw,5.5rem)!important;
}
.ph-in{position:relative; z-index:2; text-align:center}
.ph-in > *{margin-inline:auto}
.ph .kick{justify-content:center; margin-bottom:1.5rem}
/* ניגוד בקנה מידה — העיקרון של Reynolds, וגם מה שמלמדים בסדנה. */
.ph h1{
  max-width:19ch; margin-inline:auto;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:.94;
  /* מאזן את אורכי השורות במקום להשאיר מילה בודדת בשורה האחרונה.
     דפדפן שלא תומך פשוט מתעלם. */
  text-wrap:balance;
}
.ph h1 em{display:block}
.ph .lead{margin-top:1.75rem; max-width:40rem}
.ph .btn-row{margin-top:2.25rem; justify-content:center}

/* ההילה מאחורי הכתב: רדיאלית ומרוכזת, לא וילון מהצד. */
.ph::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(46% 52% at 50% 47%,
    rgba(13,25,38,.94) 0%, rgba(13,25,38,.86) 42%, rgba(13,25,38,0) 100%);
}

/* ---------- שדה המבטים ---------- */
.ph-field{position:absolute; inset:0; z-index:0; overflow:hidden}
.gaze{display:block; width:100%; height:100%}
/* ⚠️ שני viewBox שונים, לא הקטנה של אותו אחד. ראה `gaze_field()`. */
.gaze.is-narrow{display:none}
@media (max-width:61.99em){
  .gaze.is-wide{display:none}
  .gaze.is-narrow{display:block}
}
.gaze g.gz{
  fill:var(--ink-2); stroke:var(--ink-2);
  stroke-width:1.8; stroke-linecap:round;
}
.gaze .far{filter:blur(1.6px)}
/* ⚠️ צבע ההדגשה נשמר ל**שורה הראשונה** בלבד — הסימנים הקרובים לעוגן.
   הדגשה שמפוזרת על כל השדה מפסיקה להיות הדגשה. */
.gaze g.hot{fill:var(--orchid); stroke:var(--orchid)}

@media (max-width:61.99em){
  /* ⚠️ **קומפוזיציה אחרת, לא הקטנה.** במסך צר אין "מסביב" — יש
     "מעל". הכתב יורד לחצי התחתון, והשדה מקבל את כל החצי העליון:
     קהל שנשען מלמעלה אל הכותרת. השער גם גבוה יותר, כדי שיהיה
     לשדה מקום להיות שדה ולא פס. */
  /* ⚠️ **הכתב חוזר למרכז, והשדה עוטף אותו מכל צד — כמו בדסקטופ.**
     בגרסה הקודמת הורדתי את הכתב למטה ונתתי לשדה את החצי העליון,
     ואז מתחת לכותרת לא היה כלום. זו לא הייתה קומפוזיציה, זה היה
     חצי שדה. */
  .ph{
    min-height:clamp(34rem,88svh,48rem);
    padding-block:clamp(2.5rem,6vw,4rem)!important;
  }
  .ph-field{opacity:.92}
  /* הילה רדיאלית סביב הכתב, לא וילון מלמטה: היא מפנה מקום לכותרת
     ומשאירה את הסימנים נראים גם מתחתיה. */
  .ph::after{
    background:radial-gradient(58% 30% at 50% 47%,
      rgba(13,25,38,.95) 0%, rgba(13,25,38,.88) 44%,
      rgba(13,25,38,.55) 74%, rgba(13,25,38,.15) 100%);
  }
}

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

   מה שיש כאן: **המצגת עצמה כאובייקט.** שבעה מישורים בעומקים שונים,
   נעים כל אחד בקצב משלו, עם אור מאחור ואבק שנסחף. הכל CSS — התנועה
   רצה על ה-GPU, ואין קובץ מדיה בכלל.

   **המנגנון הוא עומק ופרלקסה**, ובזה הוא נבדל משער א׳ שכולו סיבוב
   במישור אחד. אותה שפה, מהלך אחר.
   ========================================================= */

/* ⚠️ **גיאומטריית הערימה היא משתנים, לא מספרים קשיחים.** היא צריכה
   להשתנות בין דסקטופ לטלפון — ברוחב צר סיבוב של 19° מראה בעיקר את
   **הקצוות** של המישורים, והערימה נקראת כקו אנכי אחד. עם משתנים,
   השבירה מחליפה חמישה ערכים במקום לשכפל סט keyframes שני. */
.ph-v{
  --deck-w:clamp(16rem,34vw,30rem);
  --ry:-19deg; --rx:7deg; --dz:-104px; --dy:11px; --dx:13px;
}

.deck{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  perspective:1500px; perspective-origin:38% 46%;
}

/* האור שמאחורי הערימה. בלי זה המישורים מרחפים על שחור ולא נמצאים
   בשום מקום. */
.deck-glow{
  /* ממורכז על הערימה, לא על חצי המסך — הילה רחבה ודלילה נבלעת
     ברקע ולא עושה כלום. */
  position:absolute; z-index:0; inset-block:8%;
  inset-inline-end:clamp(-2rem,7vw,6rem);
  width:min(40rem,54vw);
  background:radial-gradient(44% 42% at 52% 48%,
    color-mix(in srgb,var(--clay) 40%,transparent) 0%,
    color-mix(in srgb,var(--violet) 26%,transparent) 38%,
    color-mix(in srgb,var(--plum) 20%,transparent) 62%,
    transparent 78%);
  filter:blur(40px);
}

.deck-stack{
  position:absolute; z-index:1;
  inset-block-start:50%; inset-inline-end:clamp(1rem,13vw,11rem);
  width:var(--deck-w); aspect-ratio:16/10;
  transform:translateY(-50%);
  transform-style:preserve-3d;
}

/* ---------- מישור בודד ---------- */
.pl{
  position:absolute; inset:0;
  border:1px solid var(--line);
  border-radius:3px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--sand) 62%,transparent),
    color-mix(in srgb,var(--paper) 78%,transparent));
  box-shadow:0 22px 60px -28px rgba(0,0,0,.9);
  /* העומק, ההיסט והנטייה — כולם נגזרים מ-`--i`, ולכן שבעת המישורים
     הם כלל אחד ולא שבעה. */
  transform:
    rotateY(var(--ry)) rotateX(var(--rx))
    translateZ(calc(var(--i) * var(--dz)))
    translateY(calc(var(--i) * var(--dy)))
    translateX(calc(var(--i) * var(--dx)));
  opacity:calc(1 - var(--i) * 0.098);
}
/* הקרוב ביותר נושא את צבע ההדגשה — הוא "השקף שעל המסך עכשיו". */
.pl:first-child{
  border-color:color-mix(in srgb,var(--clay) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--clay) 14%,transparent),
             0 26px 70px -26px rgba(0,0,0,.95);
}

/* ---------- התוכן שעל השקף ---------- */
/* מופשט בכוונה: כותרת, שורות, גרף. מספיק כדי שייקרא כמצגת, ולא
   מספיק כדי שמישהו ינסה לקרוא אותו. */
.s-in{
  position:absolute; inset:14% 12%;
  display:flex; flex-direction:column; gap:.55rem; align-items:flex-start;
}
.s-bar{
  display:block; height:.42rem; width:52%; border-radius:2px;
  background:color-mix(in srgb,var(--ink) 42%,transparent);
}
.s-bar.sm{width:38%}
.s-l{
  display:block; height:.2rem; border-radius:2px;
  background:color-mix(in srgb,var(--ink-2) 30%,transparent);
}
.s-l.w1{width:88%} .s-l.w2{width:64%} .s-l.w3{width:76%} .s-l.w4{width:44%}
.s-ch{
  display:flex; align-items:flex-end; gap:.4rem;
  height:52%; width:66%; margin-top:auto;
}
.s-ch u{
  display:block; flex:1; height:var(--h);
  border:1px solid color-mix(in srgb,var(--ink-2) 34%,transparent);
  border-bottom:0; border-radius:2px 2px 0 0;
}
.s-ch u.hi{
  border-color:color-mix(in srgb,var(--orchid) 62%,transparent);
  background:color-mix(in srgb,var(--orchid) 12%,transparent);
}

/* ---------- התנועה ---------- */
/* ⚠️ רק `transform` ו-`opacity` מונפשים — שניהם מורכבים ב-GPU ולא
   מפעילים פריסה מחדש. אנימציה של `top`/`height` על שבעה מישורים
   בתלת־ממד הייתה מרסקת את הפריים־רייט בטלפון. */
@keyframes deck-drift{
  from{
    transform:
      rotateY(var(--ry)) rotateX(var(--rx))
      translateZ(calc(var(--i) * var(--dz)))
      translateY(calc(var(--i) * var(--dy) - 14px))
      translateX(calc(var(--i) * var(--dx)));
  }
  to{
    transform:
      rotateY(calc(var(--ry) + 3.5deg)) rotateX(calc(var(--rx) - 2deg))
      translateZ(calc(var(--i) * var(--dz) + 26px))
      translateY(calc(var(--i) * var(--dy) + 16px))
      translateX(calc(var(--i) * var(--dx) - 10px));
  }
}
.anim-ready .pl{
  animation:deck-drift var(--dur) ease-in-out var(--del) infinite alternate;
}

/* ---------- אבק באור ---------- */
.motes{position:absolute; inset:0; z-index:2; pointer-events:none}
.motes i{
  position:absolute;
  inset-block-start:var(--my); inset-inline-end:var(--mx);
  width:calc(3px * var(--ms)); height:calc(3px * var(--ms));
  border-radius:50%; background:var(--clay-2);
  opacity:calc(.05 + .16 * var(--ms));
}
@keyframes mote{
  from{transform:translate3d(0,10px,0)}
  to{transform:translate3d(-14px,-18px,0)}
}
.anim-ready .motes i{
  animation:mote var(--mdur) ease-in-out var(--mdel) infinite alternate;
}

@media (prefers-reduced-motion:reduce){
  .pl,.motes i{animation:none!important}
}

/* ---------- הכתב ---------- */
/* כאן הוא מיושר לימין ולא ממורכז: יש לו שותף בפריים. */
.ph-v .ph-in{text-align:right}
.ph-v .ph-in > *{margin-inline:0}
.ph-v .kick{justify-content:flex-start}
.ph-v .btn-row{justify-content:flex-start}
.ph-v h1{max-width:14ch; margin-inline:0; font-size:clamp(2.35rem,5.3vw,4.2rem)}
.ph-v .lead{max-width:32rem}
@media (min-width:62em){
  /* הכתב נעצר לפני הערימה, אחרת השורות רצות מתחתיה. */
  .ph-v .ph-in{padding-inline-end:calc(var(--deck-w) + 6vw)}
}
/* וילון מצד הכתב בלבד — הערימה נשארת נקייה. */
.ph-v::after{
  background:linear-gradient(to left,
    rgba(13,25,38,.92) 0%, rgba(13,25,38,.74) 40%, rgba(13,25,38,.12) 74%,
    rgba(13,25,38,0) 100%);
}

@media (max-width:61.99em){
  /* ⚠️ קומפוזיציה אחרת, לא הקטנה. בעמודה צרה הערימה לא יכולה לשבת
     לצד הכתב, ולכן היא עוברת **מאחוריו** — גדולה, ממורכזת ומעומעמת,
     כטקסטורה. אותו לקח שנלמד בלשונית הדאטה, ובלי לחזור על הסבבים. */
  .ph-v .ph-in{text-align:center}
  .ph-v .ph-in > *{margin-inline:auto}
  .ph-v .kick,.ph-v .btn-row{justify-content:center}
  .ph-v h1{max-width:17ch; margin-inline:auto}
  /* ⚠️ הערימה יורדת מטה ויוצאת מתחת לבלוק הטקסט, במקום להסתתר
     בדיוק מאחוריו. בגרסה הראשונה היא ישבה במרכז — שם הווילון הכי
     חזק — ופשוט לא נראתה כלום. */
  .ph-v{--ry:-6deg; --rx:4deg; --dz:-62px; --dy:9px; --dx:6px}
  .deck{perspective-origin:50% 66%; opacity:.78}
  .pl:first-child{box-shadow:none}
  /* ⚠️ **`translate` הוא פיזי, `inset-inline-end` הוא לוגי.** הצירוף
     ‎inset-inline-end:50%‎ עם ‎translateX(50%)‎ דחף את הערימה אל מחוץ
     למסך מימין, ונראה רק קו אנכי אחד. מרכוז בלי translate כלל:
     ‎inset-inline:0‎ עם ‎margin-inline:auto‎. */
  .deck-stack{
    inset-block-start:76%; inset-inline:0;
    width:min(24rem,88vw); margin-inline:auto;
    transform:translateY(-50%);
  }
  .deck-glow{inset-block:34% -6%; inset-inline-end:-14%; width:128%}
  /* וילון חזק היכן שהכתב, ומשחרר למטה כדי שהערימה תיראה. */
  .ph-v::after{
    background:linear-gradient(to bottom,
      rgba(13,25,38,.86) 0%, rgba(13,25,38,.90) 42%,
      rgba(13,25,38,.55) 72%, rgba(13,25,38,.2) 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)}

/* ---------- מקטע הפוקוס ---------- */
/* ⚠️ המקטע **מדגים את עצמו**: פריט אחד חד, השאר מטושטשים. זו הטענה
   של התחום — העין תופסת דבר אחד — ולכן ההתנהגות היא התוכן, לא קישוט.
   בלי `.anim-ready` (‎?static‎ / reduced-motion) הכל חד וגלוי. */
.rack{list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0; display:grid; gap:0}
.rack > li{
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-top:1px solid var(--line);
  display:grid; gap:.35rem 2rem; align-items:baseline;
}
.rack > li:last-child{border-bottom:1px solid var(--line)}
@media (min-width:52em){
  .rack > li{grid-template-columns:4.5rem minmax(0,16rem) minmax(0,1fr)}
}
.rack .n{
  font-family:var(--font-display); font-weight:900; font-size:1.75rem;
  line-height:1; color:var(--violet);
}
.rack h3{margin:0; font-size:clamp(1.15rem,2.4vw,1.5rem)}
.rack p{margin:0; font-size:1rem; line-height:1.8; color:var(--ink-2)}

.anim-ready .rack > li{
  transition:filter .55s var(--ease), opacity .55s var(--ease);
  filter:blur(3.5px); opacity:.32;
}
.anim-ready .rack > li.is-on{filter:blur(0); opacity:1}
@media (prefers-reduced-motion:reduce){
  .rack > li{filter:none!important; opacity:1!important}
}

/* ---------- שני החריגים ---------- */

/* ---------- AI Present ---------- */
/* שכבות: שלושה מישורים מוזזים זה מעל זה — שני עולמות שמונחים יחד. */
.present-sec{padding-block:clamp(3rem,6vw,4.5rem)!important}
.present{
  position:relative; display:grid; gap:2.5rem;
  padding:clamp(1.75rem,4vw,3rem);
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--plum) 84%,transparent),
    color-mix(in srgb,var(--sand) 55%,transparent));
  border:1px solid var(--line); border-top:2px solid var(--orchid);
  border-radius:2px; overflow:hidden;
}
@media (min-width:62em){
  .present{grid-template-columns:minmax(0,1fr) 15rem; gap:3.5rem; align-items:center}
}
.present h2{margin:.9rem 0 0}
.present .lead{margin-top:1.1rem; max-width:38rem}
.present .btn-row{margin-top:1.75rem}

.pr-art{position:relative; min-height:11rem}
.pr-art .pl{
  position:absolute; display:block;
  border:1px solid var(--line); border-radius:2px;
  background:color-mix(in srgb,var(--paper) 70%,transparent);
}
.pr-art .pl-1{inset-block-start:0; inset-inline-start:0; width:74%; aspect-ratio:16/10;
  border-color:var(--violet); opacity:.5}
.pr-art .pl-2{inset-block-start:1.6rem; inset-inline-start:2.4rem; width:74%; aspect-ratio:16/10;
  border-color:var(--clay); opacity:.7}
.pr-art .pl-3{inset-block-start:3.2rem; inset-inline-start:4.8rem; width:74%; aspect-ratio:16/10;
  border-color:var(--orchid)}
@media (max-width:61.99em){
  .pr-art{min-height:9rem; max-width:18rem}
}