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

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

/* האלמנט שנדבק (sticky) — זו ה"נעילה" בסגנון אפל */
.uwhero-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh; 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;
}

/* ===== לוגו טעינה — קו-מתאר לבן שמתמלא (fill) לפי אחוז הטעינה ===== */
.uwhero-logo { width: min(72vw, 480px); height: auto; display: block; overflow: visible; }
.uwhero-logo-outline { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .35; }
.uwhero-logo-fill { fill: #fff; }
/* ============================================================
   SCROLL SECTIONS — נועל קבוצת סקשנים (מאלמנטור) במסך מלא,
   וממיס ביניהם (crossfade) לפי הגלילה. כל סקשן = רקע-וידאו + טקסט משלו.
   דורש: scroll-sections.js (שם מגדירים את מזהי הסקשנים).
   ============================================================ */

/* נוצר ע"י ה-JS — הבמה שמספקת את אורך הגלילה */
.uwvs-stage { position: relative; width: 100%; }

/* אזור הנעילה — נקבע על המסך בזמן שגוללים דרך הבמה */
.uwvs-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh; width: 100%;
  overflow: hidden;
}

/* כל סקשן הופך לשכבה שממלאת את אזור הנעילה, מוערמות זו על זו */
.uwvs-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 0;
  will-change: opacity;
}

/* ---- אופציונלי: צל בצד ימין לקריאוּת הטקסט ----
   מומלץ להוסיף באלמנטור עצמו (Section → Style → Background Overlay → Gradient):
     linear-gradient(270deg, rgba(0,0,0,.6) 0%, transparent 62%)
   כי אז הצל יושב מתחת לטקסט. הכלל למטה הוא חלופה אם מוסיפים class="uwvs-shade" לסקשן. */
.uwvs-slide.uwvs-shade::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 30%, transparent 62%);
}



/* הבמה — מספקת את אורך הגלילה. הגובה נקבע ע"י ה-JS לפי מספר היחידות. */
.viv-stage { position: relative; width: 100%; }

/* אזור הנעילה — נדבק למסך בזמן שגוללים דרך הבמה */
.viv-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh; width: 100%;
  background: #000;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

/* כותרת עליונה קבועה */
.viv-eyebrow {
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 500;
  color: #f2f2f2;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: .5px;
  margin-bottom: clamp(10px, 2.2vh, 26px);
}

/* המילה (wordmark). כל יחידה = span/‏<g class="viv-unit">.
   ה-JS משנה color+glow לכל יחידה. currentColor מאפשר גם ל-SVG (fill) לעבוד. */
.viv-word {
  direction: ltr;
  display: flex; align-items: baseline; justify-content: center;
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(56px, 11vw, 150px);
  line-height: 1;
  letter-spacing: .01em;
  user-select: none;
}
.viv-word svg { display: block; height: clamp(60px, 12vw, 160px); width: auto; }

/* יחידת הארה — בסיס כהה; ה-JS מבהיר עד לבן + הילה */
.viv-unit {
  color: #2a2a2a;         /* מצב כבוי */
  fill: currentColor;      /* כדי שגם נתיבי SVG יידלקו יחד עם ה-color */
  transition: none;        /* התנועה נעשית ב-JS (rAF), לא ב-CSS */
  will-change: color, filter;
}
/* היחידה המעוצבת באמצע (VE) — נותנים לה מעט אוויר סביב אם צריך */
.viv-unit.viv-mark { font-style: italic; }

/* אזור הטקסט המתחלף מתחת למילה */
.viv-subs {
  position: relative;
  margin-top: clamp(16px, 3.5vh, 40px);
  width: min(90vw, 680px);
  height: clamp(64px, 12vh, 96px);
}
.viv-sub {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  opacity: 0;
  will-change: opacity, transform;
}
.viv-sub-title {
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: clamp(20px, 2.4vw, 30px);
  margin-bottom: 8px;
}
.viv-sub-desc {
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 400;
  color: #9a9a9a;
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: .2px;
}

/* ===== רמז גלילה ===== */
.scroll-hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);color: #fff;
  font-size: 12px; letter-spacing: 2px; opacity: .7; z-index: 1;
  pointer-events: none; text-transform: uppercase;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }


/* ===== מובייל: התאמות אופטימיזציה (Victor) — מניעת גלישה אופקית + התאמת wordmark ===== */
@media (max-width: 1024px) and (orientation: portrait) {
  .viv-word { max-width: 100vw; overflow: visible; }
  .viv-word svg, .viv-word-svg { width: 92vw; max-width: 640px; height: auto; }
  .uwtext-sticky, .uwtext-stage { overflow-x: clip; }
  .uwtext-line { max-width: 96vw; }
}


/* ===== מובייל: ביטול מוחלט של אנימציות כניסה של אלמנטור (fade/roll-in) — ללא כל אפקט ===== */
@media (max-width: 1024px) {
  /* אלמנטור מסתיר אלמנט לפני אנימציית כניסה עם .elementor-invisible (opacity:0) — מכריחים גלוי */
  .elementor-invisible { opacity: 1 !important; visibility: visible !important; }
  /* מבטלים את אנימציית הכניסה עצמה (fadeInUp / fadeInLeft וכו') בכל מקום */
  .animated,
  .elementor-widget.animated,
  .elementor-element.animated,
  .elementor-widget-container.animated {
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===== ביצועים: הסתרת סט הפרויקטים הלא-פעיל לפי מכשיר (מונע הורדת וידאו מיותר) ===== */
@media (min-width: 1025px), (orientation: landscape) {
  #sam1, #sam2, #sam3, #sam4 { display: none !important; }
}
@media (max-width: 1024px) and (orientation: portrait) {
  #sa1, #sa2, #sa3, #sa4 { display: none !important; }
}

/* ===== אחוז טעינה מספרי מתחת ללוגו (hero) ===== */
.uwhero-pct {
  position: absolute; left: 0; right: 0; bottom: 18%;
  text-align: center; color: #fff;
  font: 700 clamp(28px, 3.4vw, 46px)/1 'Heebo', system-ui, sans-serif;
  letter-spacing: 4px; opacity: .95; pointer-events: none;
}