/* =====================================================================
   CAST — דמויות שחקני השטח הגזורות (media/cast/cNN.webp)
   הדמויות לא ממוסגרות: עומדות על קצוות, מציצות מאחורי כרטיסים וכפתורים,
   ומתחלפות בריחוף/גלילה. נטען אחרי updated-design.css. ההתנהגות ב-cast.js.
   כל הדמויות דקורטיביות (aria-hidden, alt="").
   ===================================================================== */
:root{
  --cast-pop:cubic-bezier(.34,1.45,.64,1);
}
/* קו ה"מדבקה" הלבן והצל אפויים בתוך קובצי ה-WebP עצמם (לא filter: drop-shadow ב-CSS) —
   פילטרים חיים על עשרות תמונות מונפשות מיצו את זיכרון ה-GPU ותמונות שלמות בעמוד נעלמו. */
.cast-img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}

/* ---------- 1. הצצה מאחורי קצה עליון (כרטיסים, רשתות, כפתורים) ----------
   חלון בגובה --h שיושב מעל הקצה; הדמות "עולה" מאחורי הקצה כשהאלמנט נכנס למסך
   (מחלקה .is-in מ-cast.js), ועולה עוד קצת בריחוף. */
.cast-peek{position:absolute;bottom:calc(100% + 1px);height:var(--h,130px);width:var(--w,auto);
  overflow:hidden;pointer-events:none;padding-top:8px;z-index:1}
.cast-peek .cast-img{height:calc(var(--h,130px) * var(--k,1.7));width:auto;margin-inline:auto;
  transform:translateY(calc(var(--h,130px) + 12px));transition:transform .7s var(--cast-pop) var(--d,0s)}
.cast-peek.swap .cast-img{position:absolute;top:8px;left:50%;margin:0;translate:-50% 0}
.cast-peek.swap .cast-img.b{opacity:0;transition:transform .7s var(--cast-pop) var(--d,0s),opacity .25s}
.is-in .cast-peek .cast-img,.cast-peek.is-in .cast-img{transform:translateY(var(--rest,22px))}
@media(hover:hover){
  .is-in:hover .cast-peek .cast-img{transform:translateY(0);transition-delay:0s;transition-duration:.4s}
  .is-in:hover .cast-peek.swap .a{opacity:0}
  .is-in:hover .cast-peek.swap .b{opacity:1}
}
/* במסכי מגע אין ריחוף — הדמות המתחלפת מתחלפת לבד כל כמה שניות */
@media(hover:none){
  .is-in .cast-peek.swap .a{animation:castSwapA 7s 1.5s infinite}
  .is-in .cast-peek.swap .b{animation:castSwapB 7s 1.5s infinite}
}
@keyframes castSwapA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes castSwapB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}

/* מקום לדמויות שמציצות מעל רשתות של כרטיסים */
.usecase,.fit-item,.video-grid,.faq-list,.values-strip,.btn-wa,.reel-stage{position:relative}
.usecase-grid.has-cast{margin-top:110px;row-gap:120px}
.fit-grid.has-cast{margin-top:100px}
.video-grid.has-cast{margin-top:120px}
.faq-list.has-cast{margin-top:120px}
.reel-stage{max-width:820px;margin:120px auto 0}
.reel-stage.wide{max-width:1040px}

/* ---------- 2. שורת השחקנים בכותרת עמוד שחקני שטח ---------- */
/* הדמויות עומדות בשורה מתחת לטקסט, על הקו התחתון של הכותרת — כמו קאסט על במה */
.page-hero.has-cast{padding-bottom:0}
.page-hero.has-cast::before,.page-hero.has-cast::after{display:none}
.page-hero.has-cast>:not(.cast-lineup){position:relative;z-index:2}
.cast-lineup{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;
  max-width:1180px;height:300px;margin:34px auto 0;pointer-events:none}
.cast-actor{position:relative;height:var(--h,280px);margin:0 -10px -3px;pointer-events:auto;
  translate:0 var(--py,0px);cursor:default}
.cast-actor .cast-img{height:100%;width:auto;transform:translateY(108%);
  transition:transform .9s var(--cast-pop) var(--d,0s)}
.cast-lineup.is-in .cast-actor .cast-img{transform:none}
.cast-actor.flip .cast-img{scale:-1 1}
@media(hover:hover){
  .cast-lineup.is-in .cast-actor:hover .cast-img{transform:translateY(-14px) rotate(-1.5deg);transition-duration:.35s;transition-delay:0s}
}
.cast-bubble{position:absolute;top:4%;width:max-content;max-width:220px;background:#fff;color:var(--navy);
  border:2px solid var(--navy);border-radius:18px;box-shadow:4px 4px 0 var(--navy);padding:8px 14px 6px;
  font-family:'Dana Yad',cursive;font-size:1.6rem;line-height:1.1;text-align:center;
  -webkit-text-stroke:.5px var(--navy);/* מעבה את כתב היד הדק כדי שיהיה קריא */
  opacity:0;scale:.6;transition:opacity .2s,scale .3s var(--cast-pop);pointer-events:none;z-index:3}
.cast-bubble::after{content:"";position:absolute;bottom:-9px;width:14px;height:14px;background:#fff;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy)}
/* הבועה בצד שפונה למרכז העמוד */
.cast-actor.r .cast-bubble{right:70%;transform-origin:100% 100%}
.cast-actor.r .cast-bubble::after{right:18px;rotate:45deg}
.cast-actor.l .cast-bubble{left:70%;transform-origin:0 100%}
.cast-actor.l .cast-bubble::after{left:18px;rotate:45deg}
.cast-actor.talk .cast-bubble{opacity:1;scale:1}
@media(hover:hover){.cast-actor:hover .cast-bubble{opacity:1;scale:1}}
/* הדמות שמדברת קופצת לחזית — אחרת הבועה שלה נבלעת מאחורי השכנות (כל figure הוא stacking context) */
.cast-actor{z-index:1}
.cast-actor.talk{z-index:6}
@media(hover:hover){.cast-actor:hover{z-index:7}}

@media(max-width:1100px){.cast-lineup{height:250px}.cast-actor{height:calc(var(--h) * .84)}}
@media(max-width:920px){
  /* z-index 3: הבועות עולות מעל שורות הפסקה שמעל השורה */
  .cast-lineup{justify-content:center;height:165px;margin:96px 0 0;z-index:3}
  .cast-actor{height:calc(var(--h) * .5);margin:0 -9px -3px}
  .cast-actor.desk{display:none}
  /* הבועה מעל הראש (לא מכסה את הפנים) ונצמדת לצד הפנימי של המסך כדי לא להיחתך בקצוות */
  .cast-actor .cast-bubble{top:auto;bottom:calc(100% - 10px);max-width:160px;font-size:1.3rem}
  .cast-actor.r .cast-bubble{left:auto;right:-6px}
  .cast-actor.l .cast-bubble{right:auto;left:-6px}
  .cast-actor.r .cast-bubble::after{left:auto;right:26px}
  .cast-actor.l .cast-bubble::after{right:auto;left:26px}
}

/* ---------- 3. כרטיסי "עבודות שעשינו": דמות מציצה ומתחלפת ---------- */
.portfolio-grid.has-cast{margin-top:120px;row-gap:140px}
.portfolio .case-card{overflow:visible}
.portfolio .case-card>img,.portfolio .case-card .overlay{border-radius:16px}
.portfolio .case-card>img{transition:filter .3s}
.portfolio .case-card:hover>img{transform:none;filter:brightness(.78)}
.portfolio .case-card .cast-peek .cast-img{width:auto;height:calc(var(--h,130px) * var(--k,1.7));object-fit:contain;transition:transform .7s var(--cast-pop) var(--d,0s),opacity .25s}
.portfolio .case-card:hover .cast-peek .cast-img{transition-duration:.4s,.25s}

/* ---------- 4. דף הבית: "החלפת תחפושת" בכרטיס שחקני שטח ---------- */
.cat .cast-change{position:absolute;bottom:0;left:2%;width:54%;height:68%;pointer-events:none}
.cast-change .cast-img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:125%;object-fit:contain;object-position:bottom;
  opacity:0;translate:-50% 0;animation:castCostume 9s infinite}
.cast-change .cast-img:nth-child(2){animation-delay:3s}
.cast-change .cast-img:nth-child(3){animation-delay:6s}
@keyframes castCostume{
  0%{opacity:0;transform:translateY(10%) scale(.94)}
  5%,30%{opacity:1;transform:none}
  35%,100%{opacity:0;transform:translateY(4%) scale(.97)}
}

/* ---------- 5. קריאה לפעולה: דמות שמצביעה על הכפתור ---------- */
.cta .side.cast-side{position:relative;align-self:stretch;width:240px;padding:0}
.cast-side .cast-img{position:absolute;bottom:-82px;right:0;height:min(380px,118%);width:auto}
.cast-side.flip .cast-img{scale:-1 1}
/* שופר שקופץ מאחורי כפתור הוואטסאפ בריחוף (במגע: כשהכפתור נכנס למסך) */
.btn-peek{left:10%;--h:84px;--k:1.25;--rest:84px}
@media(hover:hover){.btn-wa:hover .btn-peek .cast-img{transform:translateY(0)}}
@media(hover:none){.btn-wa.is-in .btn-peek .cast-img{transform:translateY(8px)}}

/* ---------- 6. כפתור הוואטסאפ הצף: ראש שמציץ אחרי גלילה ---------- */
/* אלמנט fixed נפרד מתחת לכפתור (z-index 59 < 60): חלון ברוחב הכפתור שתחתיתו במרכז
   העיגול — כך קו החיתוך של הדמות מוסתר מאחורי הכפתור. המיקום מחושב ב-cast.js. */
.wa-peek{position:fixed;--h:74px;--k:1.75;--rest:6px;z-index:59;padding-top:6px}
/* absolute + left:50% — בלי זה, ב-RTL תמונה רחבה מהחלון גולשת שמאלה ונחתכת */
.wa-peek .cast-img{position:absolute;top:6px;left:50%;margin:0;translate:-50% 0;transition-duration:.55s}

/* ---------- 7. עמוד 404 ---------- */
.lost{min-height:70vh;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;padding:60px 5vw;background:var(--sky);text-align:center}
.lost .cast-img{height:min(420px,52vh);width:auto;animation:castLost 3.5s ease-in-out infinite}
.lost h1{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--navy);margin-bottom:12px}
.lost p{font-family:'Dana Yad',cursive;font-size:1.7rem;color:#405266;margin-bottom:26px}
.lost .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lost .btns a{background:var(--navy);color:#fff;border-radius:999px;padding:12px 28px;font-weight:700}
.lost .btns a.alt{background:transparent;color:var(--navy);border:2px solid var(--navy)}
@keyframes castLost{0%,100%{rotate:-2deg}50%{rotate:2deg}}

/* ---------- 8. הזמנה לקבוצת הוואטסאפ (assets/js/wa-popup.js) ----------
   כרטיס לא-חוסם שעולה מעל כפתור הוואטסאפ הצף, עם השופר מציץ מעליו. */
.wa-pop{position:fixed;left:22px;bottom:96px;z-index:140;width:min(340px,calc(100vw - 24px));
  background:#fffaf0;color:var(--navy);border:2px solid var(--navy);border-radius:16px;
  box-shadow:7px 7px 0 var(--teal);padding:22px 22px 16px;text-align:right;
  opacity:0;translate:0 24px;scale:.96;transform-origin:15% 100%;visibility:hidden;
  transition:opacity .3s,translate .45s var(--cast-pop),scale .45s var(--cast-pop),visibility 0s .45s}
.wa-pop.open{opacity:1;translate:0 0;scale:1;visibility:visible;transition-delay:0s}
.wa-pop-char{position:absolute;bottom:calc(100% - 4px);left:18px;height:118px;width:auto;pointer-events:none}
.wa-pop-x{position:absolute;top:8px;left:10px;width:34px;height:34px;border-radius:50%;font-size:1.6rem;line-height:1;color:var(--navy)}
.wa-pop-x:hover{background:rgba(14,24,48,.08)}
.wa-pop-kicker{font-size:.8rem;font-weight:800;color:var(--teal-dark);margin-bottom:4px}
.wa-pop h2{font-size:1.45rem;line-height:1.15;margin-bottom:8px;color:var(--navy)}
.wa-pop-text{font-size:.95rem;line-height:1.55;color:#354b5e;margin-bottom:14px}
.wa-pop .btn-wa{width:100%;justify-content:center;font-size:1rem;padding:12px 18px}
.wa-pop-later{display:block;margin:8px auto 0;font-size:.88rem;color:#526273;text-decoration:underline;padding:4px 8px}
@media(max-width:800px){.wa-pop{left:12px;right:12px;width:auto;bottom:84px}}
@media(prefers-reduced-motion:reduce){.wa-pop{transition:opacity .2s,visibility 0s .2s;translate:none;scale:none}}
html.a11y-reduce-motion .wa-pop{transition:opacity .2s,visibility 0s .2s;translate:none;scale:none}
@media print{.wa-pop{display:none!important}}

/* ---------- מובייל ---------- */
@media(max-width:800px){
  .usecase-grid.has-cast{margin-top:90px;row-gap:100px}
  .usecase .cast-peek{--h:96px}
  .portfolio-grid.has-cast{row-gap:120px}
  .fit-grid.has-cast{row-gap:100px}
  .cat .cast-change{position:relative;left:auto;width:100%;height:260px;margin-top:18px}
  .reel-stage{margin-top:100px}
}

/* ---------- הפחתת תנועה (מערכת או תפריט הנגישות): הכל סטטי וגלוי ---------- */
@media(prefers-reduced-motion:reduce){
  .cast-peek .cast-img,.cast-actor .cast-img{transform:translateY(var(--rest,0))!important;transition:none!important}
  .cast-actor .cast-img{transform:none!important}
  .cast-change .cast-img,.cast-peek.swap .cast-img,.lost .cast-img{animation:none!important}
  .cast-change .cast-img:first-child{opacity:1}
  .wa-peek{display:none}
}
html.a11y-reduce-motion .cast-peek .cast-img{transform:translateY(var(--rest,0))!important;transition:none!important}
html.a11y-reduce-motion .cast-actor .cast-img{transform:none!important;transition:none!important}
html.a11y-reduce-motion .cast-actor{translate:none}
html.a11y-reduce-motion .cast-change .cast-img,html.a11y-reduce-motion .cast-peek.swap .cast-img,html.a11y-reduce-motion .lost .cast-img{animation:none!important}
html.a11y-reduce-motion .cast-change .cast-img:first-child{opacity:1}
html.a11y-reduce-motion .wa-peek{display:none}
@media print{.cast-peek,.cast-lineup,.cast-change,.cast-side .cast-img,.wa-peek{display:none!important}}