/* ============================================================
   UW HERO — קטע hero נשלט-גלילה להטמעה (scoped, prefix: uwhero-)
   כל הסלקטורים תחת .uwhero-* כדי לא להתנגש עם עיצוב האתר המארח.
   ============================================================ */

/* הבמה: גובה גדול = אורך הנעילה (כמה גוללים לפני שהתוכן ממשיך) */
.uwhero-stage { position: relative; width: 100%; }

/* האלמנט שנדבק (sticky) — זו ה"נעילה" בסגנון אפל */
.uwhero-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden; background: #000;
}
.uwhero-canvas { display: block; width: 100%; height: 100%; }

/* שכבת תמונת הרקע למובייל — מוסתרת בדסקטופ */
.uwhero-mobile { display: none; }

/* מובייל: וידאו ריבועי בראש המסך + תמונת רקע (cover) מאחוריו וממלאת מתחתיו.
   ה-breakpoint צריך להתאים ל-data-mobile-max ב-JS (ברירת מחדל 768). */
@media (max-width: 768px) {
  /* תמונת הרקע: ממלאת את כל ה-hero, מתחת לוידאו (z מתחת לקנבס) */
  .uwhero-mobile {
    display: block; position: absolute; inset: 0; z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  /* הוידאו: ריבוע בראש המסך (רוחב מלא, גובה = הרוחב) */
  .uwhero-canvas {
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100vw;
  }

  /* דסקטופ-בלבד: להסתיר לגמרי את ה-hero במובייל (בשילוב data-desktop-only="true",
     שגם גורם ל-JS לדלג על הטעינה — אפס הורדת פריימים במובייל). */
  .uwhero-stage[data-desktop-only="true"] { display: none; }
}

/* מסך טעינה — מכסה רק את אזור ה-hero (לא את כל העמוד) */
.uwhero-loader {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #000; transition: opacity .6s ease;
}
.uwhero-loader.uwhero-hidden { opacity: 0; pointer-events: none; }
.uwhero-track {
  width: 240px; height: 3px; background: #222;
  border-radius: 4px; overflow: hidden;
}
.uwhero-track > i {
  display: block; height: 100%; width: 0%;
  background: #fff; transition: width .15s linear;
}