/* ============================================================
   newpages.css · מערכת העיצוב של העמודים החדשים
   home1.html · course1.html
   ------------------------------------------------------------
   ⚠️ הקובץ הזה נטען **רק** בשני העמודים האלה. אף עמוד קיים באתר
   לא מקשר אליו, ולכן שינוי כאן לא יכול לשבור את הפרודקשן.
   כל המחלקות מתחילות ב-sp, ב-h1 או ב-c1, ואף אחת מהן לא קיימת
   ב-style.css ולא ב-newhome.html.

   הרעיון: קצב רקעים מתחלף. תצלום, צבע בהיר, וידאו, בהיר, תצלום.
   אף שתי רצועות סמוכות לא נראות אותו דבר.

   כתובות התמונות עצמן **אינן** כאן אלא ב-<style> של כל עמוד,
   כי הן שונות בין העמודים.
   ============================================================ */

/* ============================================================
   1 · ניווט הסקציות
   ------------------------------------------------------------
   ⚠️ זה לא ה-.nav של שאר האתר, ולכן הבלוק ב-site.js שמטפל
   ב-is-stuck וב-burger פשוט לא מוצא אותו ולא רץ. הלוגיקה
   עצמאית ויושבת בסוף כל עמוד.

   ⚠️ במובייל אין המבורגר בכוונה. הרשימה גוללת אופקית, כמו
   ב-sivanmovment.com. כל הסקציות נראות לעין ואפשר לקפוץ לכל
   אחת מהן בלחיצה אחת, בלי לפתוח שכבה מעל העמוד.
   ============================================================ */
.spnav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:60;
  background:rgb(var(--ink-rgb) / .82);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-block-end:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.spnav.is-stuck{
  background:rgb(var(--ink-rgb) / .96);
  border-block-end-color:var(--line);
  box-shadow:var(--sh-1);
}
.spnav__in{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
  padding-block:9px;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,26px);
}
.spnav__mark{
  flex:none;
  font-family:'Syne',sans-serif;
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  color:var(--paper);
}
.spnav__mark i{ font-style:normal; font-weight:400; color:var(--ember); }

/* ⚠️⚠️ **אין כאן גלילה אופקית ואין מסכה, בכוונה.**
   בגרסה הראשונה זה היה מסלול גולל עם `mask-image` שמדהה את הקצוות.
   שתי בעיות: עידו פסל את הרעיון ("התפריט במובייל כולם צריכים
   להפתח, לא שצריך לזוז שמאלה"), והמסכה גם **חתכה את הקישור הראשון
   בדסקטופ** אחרי שהכפתורים הפכו לטקסט ולא היה יותר מה לגלול.
   מה שיש עכשיו: הקישורים נשברים לשורה נוספת כשצריך, ואף פעם
   לא נחתכים ואף פעם לא מוסתרים. */
.spnav__scroll{
  flex:1;
  min-width:0;
}

/* ⚠️ בלי בועות. עידו הצביע על הרפרנס: "תעשה ככה בלי בועות מסביב".
   קישורי טקסט נקיים תופסים כשליש מהרוחב של כפתורים עם מסגרת וריפוד,
   וזה בדיוק מה שמאפשר לכל התפריט להיכנס בלי גלילה אופקית.
   הסימון של הסקציה הפעילה הוא צבע, משקל, וקו דק מתחת. */
.spnav__list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px clamp(13px,1.6vw,26px);
  margin:0;
  padding:3px 0;
  list-style:none;
}
.spnav__list a{
  display:block;
  position:relative;
  white-space:nowrap;
  padding-block:6px;
  font-family:'Heebo',sans-serif;
  font-size:.9rem;
  font-weight:400;
  line-height:1.4;
  color:var(--paper-2);
  transition:color .3s var(--ease);
}
/* הקו של הפעיל. `scale` ולא `width`, כדי שהמעבר יהיה על ה-GPU */
.spnav__list a::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  height:1px;
  background:var(--ember);
  scale:0 1;
  transition:scale .35s var(--ease);
}
.spnav__list a:hover{ color:var(--ember); }
.spnav__list a[aria-current="true"]{
  color:var(--ember);
  font-weight:600;
}
.spnav__list a[aria-current="true"]::after{ scale:1 1; }
.spnav__cta{ flex:none; }
.spnav__cta .btn{ padding-block:9px; padding-inline:18px; font-size:.85rem; }

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

   לכן במובייל הרשימה **נשברת לשורות** במקום לגלול. הכפתורים
   קטנים יותר כדי שהכל ייכנס בשתי שורות ולא בשלוש.
   ============================================================ */
@media (max-width:820px){
  .spnav__cta{ display:none; }

  /* שתי שורות, בדיוק כמו ברפרנס: הוורדמארק למעלה, וכל הקישורים
     בשורה אחת מתחתיו, פרוסים לרוחב המסך */
  .spnav__in{
    flex-wrap:wrap;
    gap:2px;
    padding-block:7px 6px;
    padding-inline:16px;
  }
  /* ⚠️ ממורכז, לא צמוד לימין. שורת הקישורים שמתחתיו ממורכזת, ולוגו
     בצד אחד מעל שורה ממורכזת נראה כמו שתי החלטות שונות */
  .spnav__mark{
    flex:1 0 100%;
    text-align:center;
    font-size:1rem;
    line-height:1.6;
  }
  .spnav__scroll{ flex:1 0 100%; }
  /* ⚠️ `flex-wrap` ולא שורה אחת קשיחה. נמדד: שמונה קישורים בעברית
     נכנסים לשורה אחת ברוחב 390 רק ב-0.61rem, שזה קטן מכדי לקרוא.
     עדיף שתי שורות קריאות מאשר שורה אחת שנחתכת בקצה, וזה גם מה
     שעידו ביקש: **שהכל ייכנס בלי להזיז ימינה או שמאלה** */
  .spnav__list{
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 18px;
    padding:0 0 2px;
  }
  .spnav__list a{ font-size:.84rem; padding-block:3px; }
}

@media (max-width:400px){
  .spnav__in{ padding-inline:12px; }
  .spnav__list{ gap:3px 14px; }
  .spnav__list a{ font-size:.8rem; }
}

/* ⚠️ הסרגל קבוע, ולכן כל עוגן חייב שוליים עליונים משלו, אחרת הכותרת
   מסתתרת מתחתיו אחרי לחיצה בתפריט. `--navh` נמדד ב-newpages.js
   בזמן אמת, כי הגובה משתנה: במובייל הרשימה נשברת לשתי שורות ואף
   לשלוש, ומספר קבוע היה מפספס */
section[id],header[id],div[id]{
  scroll-margin-block-start:calc(var(--navh, 68px) + 16px);
}

/* ============================================================
   2 · רצועות תצלום · שכבה חדה מעל שכבת טשטוש
   ------------------------------------------------------------
   ⚠️⚠️ כל התצלומים של מורן אנכיים. `background-size:cover` על
   רצועה רחבה בדסקטופ חתך אותה באמצע (נמדד: חיתוך 3:2 של
   "מספר 8" החזיר פנים וכפות ידיים בלבד, בלי מנח קריא).
   ⚠️⚠️⚠️ **שני פתרונות נפסלו על ידי עידו. אל תחזירו אותם:**
   1. שכבת בסיס של אותו תצלום מטושטש מתחת לתצלום החד.
      "מה זה כל הטשטוש הזה, זה לא נראה טוב בכלל"
   2. תצלום בגובה מלא בקצה, על שדה צבע, והטקסט בעמודה לצידו.
      "צריך להיות תמונה רחבה על כל המסך והטקסט באמצע, לא ככה"
   נוסו גם הרחבת קנבס במראה (משכפלת את מורן) והרחבה ברצועת רקע
   מרוצפת (דפוסי עצים חוזרים ביער). שניהם נפסלו בבדיקה.

   **מה שבתוקף: בדיוק הטיפול של המובייל, מורחב לרוחב.** תצלום
   במסך מלא ב-`cover`, החשכה מעליו, והטקסט ממורכז מעליה. זה מה
   שעידו אישר במובייל ("המובייל מושלם").

   ⚠️ המחיר, וצריך לדעת אותו: חיתוך 16:9 מתצלום אנכי מראה כ-38
   אחוז מגובהו, ומורן תופסת בו כ-70 אחוז. **בדסקטופ המנח נחתך,
   ואי אפשר אחרת.** לכן החיתוכים נבחרו ביד ב-`build-home1-wide.js`
   ולא דרך `sharp.strategy.attention`, שבוחר את הפנים ומחזיר את
   החיתוך הגרוע מכולם.
   ============================================================ */
.h1shot{
  position:relative;
  display:grid;
  align-items:center;
  isolation:isolate;
  background:#16211E;
  color:var(--ink);
}
/* ⚠️ אסור transform / filter / backdrop-filter על .h1shot או על אב
   שלו. כל אחד מהם הופך אותו לבלוק מכיל ומשבש את הכפתורים הצפים */
/* ⚠️ שלוש שכבות ולא אחת, כדי שאפשר יהיה להזיז את התצלום בלי להזיז
   את ההחשכה שמעליו:
     .h1shot__bg          · המסגרת. חותכת את מה שגולש (overflow)
     .h1shot__bg::before  · התצלום עצמו. **זה מה שזז בגלילה**
     .h1shot__bg::after   · ההחשכה. קבועה, אחרת הטקסט היה מהבהב
   כתובות התמונות והגרדיאנטים יושבים ב-<style> של כל עמוד, על
   ::before ועל ::after בהתאמה. */
.h1shot__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.h1shot__bg::before{
  content:'';
  position:absolute;
  /* ⚠️ גבוה ב-20 אחוז מהמסגרת, עשרה לכל צד. זה המרווח שהפרלקסה
     נעה בתוכו. בלעדיו היה נראה פס ריק בקצה בזמן התנועה */
  inset:-10% 0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  /* ⚠️ `translate` ולא `transform`, כי על אותו אלמנט רץ גם זום
     ב-`scale`. שני מאפיינים נפרדים לא דורסים זה את זה, בעוד ששתי
     פונקציות בתוך transform אחד כן */
  translate:0 var(--par, 0px);
  will-change:translate;
}
.h1shot__bg::after{
  content:'';
  position:absolute;
  inset:0;
}

/* ---- זום איטי בהירו ----
   רק בהירו, ולא בכל רצועה. רקע שזז כל הזמן בכל העמוד מתיש, אבל
   בפריים הראשון הוא מה שמבדיל בין תצלום לבין עמוד חי */
.h1hero .h1shot__bg::before{
  animation:h1kenburns 32s var(--ease) infinite alternate;
}
@keyframes h1kenburns{
  from{ scale:1.02; }
  to  { scale:1.11; }
}
.h1shot__in{
  position:relative;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}
/* הטקסט ממורכז מעל התצלום, בדסקטופ ובמובייל אותו דבר.
   ⚠️⚠️ ב-style.css יש `p{max-width:62ch}` **בלי שוליים אוטומטיים**, ולכן
   כל פסקה בתוך בלוק ממורכז נצמדת לקצה ימין במקום להתמרכז. זה תפס גם את
   ה-eyebrow וגם את שורת "כבר מתאמנים כאן". **כל פסקה חדשה כאן חייבת
   `margin-inline:auto`**, אחרת היא תיראה מיושרת לימין בלי שום סיבה
   נראית לעין. */
.h1shot__col{
  width:min(100%, 54rem);
  margin-inline:auto;
  text-align:center;
}
.h1shot__col .eyebrow{ justify-content:center; max-width:none; }
.h1shot__col p{ margin-inline:auto; }
.h1shot__col .btns{ justify-content:center; }
.h1shot h1,.h1shot h2,.h1shot h3,.h1shot p{ color:var(--ink); }
.h1shot .lead{ color:rgb(var(--ink-rgb) / .9); }
.h1shot .eyebrow{ color:rgb(var(--ink-rgb) / .92); }
.h1shot .eyebrow::after{
  background:linear-gradient(to left, rgb(var(--gold-rgb) / .85), rgb(var(--ink-rgb) / .22) 55%, transparent);
}
/* צל רך. ההבדל בין קריא לבין כמעט קריא כשהתצלום מתבהר מאחור */
.h1shot h1,.h1shot h2,.h1shot .lead,.h1shot .h1mark{
  text-shadow:0 1px 26px rgb(10 15 14 / .5), 0 1px 3px rgb(10 15 14 / .32);
}
.h1shot .btn--ghost{ color:var(--ink); border-color:rgb(var(--ink-rgb) / .55); }
.h1shot .btn--ghost::before{ background:var(--ink); }
.h1shot .btn--ghost:hover{ color:var(--forest); border-color:var(--ink); }

/* ---- ההירו ---- */
.h1hero{
  min-height:100vh;      /* נפילה לדפדפנים ישנים */
  min-height:100svh;     /* svh מתעלם משורת הכתובת הנעה במובייל */
  /* ⚠️ הריווח העליון נגזר מגובה הסרגל האמיתי ולא ממספר קבוע. במובייל
     הסרגל נשבר לשתי שורות, וריווח קבוע היה דוחף את הכותרת אל מתחתיו */
  padding-block:calc(var(--navh, 68px) + clamp(38px,7vh,104px)) clamp(96px,13vh,150px);
}
/* ⚠️ קטן מברירת המחדל של .d1. הכותרת יושבת בעמודה של 34rem לצד
   התצלום, ולא ברוחב מסך מלא, ובגודל המקורי היא נשברה לארבע שורות */
.h1hero .d1{ font-size:clamp(2.9rem, 6.4vw, 5.6rem); }
.h1mark{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:clamp(.9rem,1.5vw,1.1rem);
  font-weight:700;
  letter-spacing:.42em;
  text-transform:uppercase;
  margin-block-end:clamp(16px,2vw,24px);
}
.h1mark i{ font-style:normal; font-weight:400; color:var(--gold); }
.h1hero__sub{
  font-size:clamp(1.06rem,1.5vw,1.3rem);
  font-weight:300;
  line-height:1.62;
  max-width:40ch;
  margin-block:clamp(22px,2.6vw,32px) clamp(28px,3.2vw,40px);
  color:rgb(var(--ink-rgb) / .9);
}
.h1hero__note{
  margin-block-start:clamp(24px,3vw,32px);
  font-family:'Heebo',sans-serif;
  font-size:.86rem;
  color:rgb(var(--ink-rgb) / .74);
}
.h1hero__note a{
  color:var(--ink);
  border-block-end:1px solid rgb(var(--gold-rgb) / .8);
  padding-block-end:2px;
}
.h1hero__note a:hover{ border-block-end-color:var(--ink); }

.h1cue{
  position:absolute;
  inset-block-end:clamp(18px,3vh,34px);
  inset-inline:0;
  display:flex;
  justify-content:center;
  z-index:2;
}
.h1cue span{
  display:block;
  width:1px;
  height:clamp(32px,5vh,52px);
  background:linear-gradient(to bottom, transparent, rgb(var(--ink-rgb) / .8));
}

/* ---- רצועת תצלום פנימית ---- */
.h1band{ padding-block:clamp(110px,17vh,190px); }
.h1band .d2{ font-size:clamp(2.2rem, 4.6vw, 3.9rem); }

/* ============================================================
   3 · רצועה בהירה בשתי עמודות, בלי תמונה
   ------------------------------------------------------------
   הכותרת בעמודה צרה מימין והטקסט בעמודה רחבה משמאל. בלי זה
   הרצועה היא בלוק טקסט צר ליד חצי מסך ריק, ונראית כמו טעות
   ולא כמו החלטה.
   ============================================================ */
/* ⚠️ העמודה הימנית לא צרה מ-0.9fr. ב-0.72 הכותרת של course1
   ("נמתחתם שנים, והגעתם לאותה נקודה") נשברה לארבע שורות */
.h1about{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(26px,4vw,72px);
  align-items:start;
}
.h1about h2{ margin-block-end:0; }
.h1about__body > p:first-child{ margin-block-start:0; }

@media (max-width:900px){
  .h1about{ grid-template-columns:1fr; gap:clamp(18px,3vw,28px); }
}

/* ============================================================
   4 · רצועת הווידאו במסך מלא
   ------------------------------------------------------------
   ⚠️ ה-src לא יושב ב-HTML אלא נבחר ב-JS לפי רוחב המסך, כי
   `media` על <source> בתוך <video> לא נתמך בכרום. בלי זה
   המובייל היה מוריד גם את קובץ הדסקטופ.
   ⚠️ הקבצים נבנו בלי ערוץ שמע בכלל (-an). muted בתגית לבדו
   לא מספיק בחלק מהמכשירים כדי ש-autoplay יעבור.
   ============================================================ */
.h1vid{
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
  min-height:clamp(560px, 88svh, 900px);
  padding-block:clamp(96px,14vh,150px);
  background:#16211E;
  color:var(--ink);
  overflow:hidden;
}
.h1vid__media{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  /* ⚠️ בלי זה כרום מצייר קו לבן של פיקסל אחד בקצה בזמן הגלילה */
  transform:translateZ(0);
}
.h1vid__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom,
      rgb(12 18 16 / .62) 0%,
      rgb(12 18 16 / .40) 40%,
      rgb(12 18 16 / .70) 100%);
}
.h1vid__in{
  position:relative;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
  text-align:center;
}
.h1vid h2,.h1vid p{ color:var(--ink); }
/* ⚠️ ב-style.css יש `p{max-width:62ch}`, וה-eyebrow הוא <p>. בתוך בלוק
   ממורכז זה מקבע אותו לרוחב 62ch ודוחף אותו לקצה ימין במקום למרכז.
   נמדד: רוחב 398px בקצה ימני, במקום ממורכז. לכן max-width:none */
.h1vid .eyebrow{
  color:rgb(var(--ink-rgb) / .92);
  max-width:none;
  justify-content:center;
}
.h1vid h2,.h1vid .lead{
  text-shadow:0 1px 26px rgb(10 15 14 / .55), 0 1px 3px rgb(10 15 14 / .35);
}
.h1vid .lead{
  color:rgb(var(--ink-rgb) / .92);
  max-width:52ch;
  margin-inline:auto;
  margin-block-start:clamp(22px,2.6vw,32px);
}
.h1vid__note{
  margin-block-start:clamp(14px,1.8vw,20px);
  margin-inline:auto;
  max-width:52ch;
  color:rgb(var(--ink-rgb) / .82);
}
.h1vid .btns{ justify-content:center; margin-block-start:clamp(28px,3.4vw,42px); }
.h1vid .btn--ghost{ color:var(--ink); border-color:rgb(var(--ink-rgb) / .55); }
.h1vid .btn--ghost::before{ background:var(--ink); }
.h1vid .btn--ghost:hover{ color:var(--forest); border-color:var(--ink); }

/* ============================================================
   5 · רצועה בהירה עם מדיה בצד
   משמשת גם לתצלום (h1course) וגם ללוח וידאו אנכי (c1clip)
   ============================================================ */
.h1course{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4.4vw,72px);
  align-items:center;
}
.h1course__media{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-2);
  aspect-ratio:4/5;
}
.h1course__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.h1course__media:hover img{ transform:scale(1.035); }
.h1course__facts{
  margin:clamp(26px,3vw,34px) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.h1course__facts li{ display:flex; gap:11px; align-items:flex-start; color:var(--paper-2); }
.h1course__facts li::before{
  content:'';
  flex:none;
  width:6px;
  height:6px;
  margin-block-start:.62em;
  border-radius:50%;
  background:var(--gold);
}

/* ---- לוח וידאו אנכי ----
   ⚠️ המקור של קליפ הסטודיו הוא 1080x1920. כל חיתוך 16:9 ממנו הוא
   1080x608 ולא יותר, ונמדד בפועל שהוא מחזיר פלג גוף בלי מנח קריא.
   לכן בעמוד הקורס הווידאו אינו רקע במסך מלא אלא לוח 9:16 לצד
   הטקסט, וקובץ אחד משרת גם דסקטופ וגם מובייל */
.c1clip{
  margin:0;
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-2);
  aspect-ratio:9/16;
  background:#16211E;
  max-height:78svh;
  /* ⚠️ בגלל max-height הלוח צר מהעמודה שהוא יושב בה, ובלי המירכוז
     הוא נצמד לקצה ההתחלה ומשאיר חור בקצה השני של המסך */
  margin-inline:auto;
}
.c1clip video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.c1clip figcaption{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  padding:clamp(30px,3vw,42px) clamp(18px,2vw,26px) clamp(16px,1.8vw,22px);
  font-family:'Heebo',sans-serif;
  font-size:.86rem;
  color:rgb(var(--ink-rgb) / .92);
  background:linear-gradient(to top, rgb(10 15 14 / .74), transparent);
}

/* ============================================================
   6 · רספונסיביות משותפת
   ============================================================ */
@media (max-width:900px){
  .h1course{ grid-template-columns:1fr; }
  .h1course__media{ order:-1; max-height:64svh; }
  .c1clip{ order:-1; max-height:70svh; margin-inline:auto; }
}

@media (max-width:820px){
  /* ⚠️ במובייל החיתוך הוא 2:3 ייעודי (`-m.jpg`) ולא החיתוך הרחב.
     שם המסך אנכי, ולכן המנח נראה במלואו. זו הגרסה שעידו אישר */
  .h1shot__bg{ background-position:center top; }
  .h1vid{ min-height:clamp(520px, 84svh, 760px); }
}

/* ============================================================
   7 · כניסת התמונות בגלילה
   ------------------------------------------------------------
   התצלום נכנס מוגדל קלות ונרגע למקומו, במקום להופיע מוכן.
   ⚠️ `scale` כמאפיין נפרד ולא בתוך `transform`, כי ב-style.css
   יש כבר `.frame:hover img{transform:scale(1.04)}`. שני מאפיינים
   נפרדים מתרכבים, בעוד ששני transform דורסים זה את זה והריחוף
   היה מבטל את הכניסה.
   ⚠️ הטריגר הוא `.in`, אותה מחלקה שה-IntersectionObserver
   ב-site.js כבר מוסיף, ולכן זה עובד גם בדסקטופ וגם במובייל
   באותה מכניקה, בלי תלות בריחוף.
   ============================================================ */
.item .frame img,
.h1course__media img,
.c1clip video{
  scale:1.09;
  opacity:0;
  transition:scale 1.5s var(--ease-out), opacity 1s var(--ease-out);
}
.item.in .frame img,
.h1course__media.in img,
.c1clip.in video{
  scale:1;
  opacity:1;
}
/* ⚠️ רשת ביטחון: אם התמונה לא נכנסה למסך אף פעם (או שה-observer
   נפל), היא חייבת בכל זאת להיראות. הכלל:
   memory/reveal-on-scroll-needs-a-fallback */
.frame.is-empty img{ scale:1; opacity:1; }

@media (prefers-reduced-motion:reduce){
  .h1course__media img{ transition:none; }
  /* בלי תנועה: הכל מגיע מוכן, ואף רקע לא זז */
  .item .frame img,
  .h1course__media img,
  .c1clip video{ scale:1; opacity:1; transition:none; }
  .h1hero .h1shot__bg::before{ animation:none; }
  .h1shot__bg::before{ translate:0; will-change:auto; }
}