/* ============================================================================
   agent.digima.co.il, motion v3 (יניב, 23.10.2026). ראו docs/design/motion-v3.md.
   וניל: transform, opacity, translate, clip-path, filter (קטן) בלבד. אפס layout.
   מופעל רק כש-motion-v3.js הוסיף html.dga-motion (progressive enhancement:
   בלי JS הכל נראה, בלי תנועה). html.dga-rm = prefers-reduced-motion.
   טעינה: אחרי ה-CSS של הקיט ושל העמוד (Site Settings > Custom CSS, בסוף), או
   כקובץ נפרד ב-wp_enqueue_style עם priority מאוחר.
   ========================================================================== */

:root{
  /* קפיץ קריטי (damping 1.0, response ~0.4s) מתורגם ל-bezier: בלי overshoot */
  --dga-spring:cubic-bezier(.22,1,.36,1);
  /* UI מהיר: hover, כפתורים, לשוניות */
  --dga-ease-out:cubic-bezier(.23,1,.32,1);
  /* תנועה על המסך, crossfade */
  --dga-ease-io:cubic-bezier(.77,0,.175,1);
  --dga-t-reveal:720ms;   /* חשיפה בגלילה */
  --dga-t-hero:820ms;     /* כניסת ההירו */
  --dga-t-stage:1100ms;   /* הבמה מתיישבת */
  --dga-t-ui:180ms;       /* hover / כפתור */
  --dga-t-tab:220ms;      /* לשוניות ובוררים */
  --dga-t-top:360ms;      /* ההדר מחליף גוון */
  --dga-reveal-y:20px;
  --dga-reveal-blur:4px;
}

/* ----------------------------------------------------------------------------
   0. עקיפת מנגנון הכניסה של אלמנטור (Fade In Up + elementor-invisible).
   הווידג׳טים והקונטיינרים עם dga-fade עוברים לשליטה של motion-v3.
   -------------------------------------------------------------------------- */
html.dga-motion .elementor-invisible{visibility:visible!important}
html.dga-motion .dga-fade.animated,
html.dga-motion .dga-fade.fadeInUp{animation:none!important}

/* ----------------------------------------------------------------------------
   3. חשיפה אחידה לכל העמוד: translate + opacity + blur קל, transition (לא
   keyframes) כדי שניתן יהיה לקטוע ולהחזיר. ההשהיה --dga-d מחושבת ב-JS לפי
   המיקום במסך (0 עד 350ms, 70ms בין שכנים באותה שורה).
   -------------------------------------------------------------------------- */
html.dga-motion .dga-fade{
  opacity:0;
  transform:translateY(var(--dga-reveal-y));
  filter:blur(var(--dga-reveal-blur));
  will-change:transform,opacity,filter;
  transition:
    opacity var(--dga-t-reveal) var(--dga-spring) var(--dga-d,0ms),
    transform var(--dga-t-reveal) var(--dga-spring) var(--dga-d,0ms),
    filter var(--dga-t-reveal) var(--dga-spring) var(--dga-d,0ms);
}
/* מדיה גדולה: בלי blur (יקר ב-GPU על משטחים גדולים), רק תנועה ואטימות */
html.dga-motion .dga-stage.dga-fade,
html.dga-motion .dga-photo.dga-fade,
html.dga-motion .dga-frame.dga-fade,
html.dga-motion .dga-pframe.dga-fade,
html.dga-motion .dga-promo.dga-fade,
html.dga-motion .dga-receipt.dga-fade{filter:none;--dga-reveal-y:28px}
html.dga-motion .dga-fade.dga-in{opacity:1;transform:none;filter:none}
html.dga-motion .dga-fade.dga-done{will-change:auto}
/* אלמנטים שכבר מעל המסך בטעינה (קישור עמוק): בלי מעבר */
html.dga-motion .dga-fade.dga-now{transition:none}

/* ----------------------------------------------------------------------------
   1. ההירו: כניסה מבוימת. ה-JS נותן --dga-d לכל dga-fade בהירו לפי הסדר
   (0, 260, 340, 420, 500, 580ms) ומוסיף html.dga-go באותו פריים, אחרי שהגופנים
   נטענו. שתי שורות ה-H1 עולות מתוך מסכה ב-60 ו-140ms.
   -------------------------------------------------------------------------- */
html.dga-motion .dga-h1 .elementor-heading-title{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
html.dga-motion .dga-h1 .elementor-heading-title>span{display:block;transform:translateY(110%);animation:none}
html.dga-motion.dga-go .dga-h1 .elementor-heading-title>span{animation:dgaRise var(--dga-t-hero) var(--dga-spring) 60ms both}
html.dga-motion.dga-go .dga-h1 .elementor-heading-title>span:nth-child(2){animation-delay:140ms}
@keyframes dgaRise{from{transform:translateY(110%)}to{transform:none}}
/* בהירו: תנועה קצרה יותר ובלי blur על הטקסט (הטקסט צריך להיות חד מהפריים הראשון) */
html.dga-motion [data-dga-hero] .dga-fade{--dga-reveal-y:14px;--dga-reveal-blur:0px;transition-duration:var(--dga-t-hero)}

/* ----------------------------------------------------------------------------
   2. הבמה. (א) כניסה: הבמה עולה ומתיישבת (scale .985 אל 1), ואז הטלפון וחלון
   העוזרת נכנסים אחריה (120 / 220ms), כבדים יותר (56 / 40px). transform.
   (ב) פרלקס בגלילה על translate (מתחבר ל-transform בלי להתנגש): הרקע איטי
   מהבמה, החלון בקצב הבמה, הטלפון מהיר ממנה. (ג) התאורה (::before) נדלקת
   כשהבמה נכנסת. scroll-timeline למי שתומך, אחרת --dga-sp מה-JS.
   -------------------------------------------------------------------------- */
html.dga-motion .dga-stage.dga-fade{
  --dga-reveal-y:40px;
  transform:translateY(var(--dga-reveal-y)) scale(.985);
  transition-duration:var(--dga-t-stage)
}
html.dga-motion .dga-stage.dga-fade.dga-in{transform:none}
html.dga-motion .dga-stage .dga-phone,
html.dga-motion .dga-stage .dga-win{
  opacity:0;transform:translateY(56px);
  transition:opacity var(--dga-t-stage) var(--dga-spring) 120ms,transform var(--dga-t-stage) var(--dga-spring) 120ms
}
html.dga-motion .dga-stage .dga-win{transform:translateY(40px);transition-delay:220ms}
html.dga-motion .dga-stage.dga-in .dga-phone,
html.dga-motion .dga-stage.dga-in .dga-win{opacity:1;transform:none}

/* פרלקס: fallback עם המשתנה --dga-sp (0 = הבמה נכנסת מלמטה, 1 = יצאה למעלה) */
html.dga-motion .dga-stage{--dga-sp:.5}
html.dga-motion .dga-stage .elementor-background-video-container,
html.dga-motion .dga-stage .elementor-background-video-container video,
html.dga-motion .dga-stage>.dga-bg img{
  scale:1.12;
  translate:0 calc((var(--dga-sp) - .5) * 12%)
}
html.dga-motion .dga-stage .dga-phone{translate:0 calc((.5 - var(--dga-sp)) * 48px)}
html.dga-motion .dga-stage .dga-win{translate:0 calc((.5 - var(--dga-sp)) * 24px)}
html.dga-motion .dga-stage::before{opacity:calc(.55 + .45 * min(1, var(--dga-sp) * 2.2))}
/* scroll-driven animations: הדפדפן מניע, בלי JS */
@supports (animation-timeline:view()){
  html.dga-motion:not(.dga-rm) .dga-stage .elementor-background-video-container,
  html.dga-motion:not(.dga-rm) .dga-stage>.dga-bg img{animation:dgaParBg linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  html.dga-motion:not(.dga-rm) .dga-stage .dga-phone{animation:dgaParPhone linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  html.dga-motion:not(.dga-rm) .dga-stage .dga-win{animation:dgaParWin linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  html.dga-motion:not(.dga-rm) .dga-stage::before{animation:dgaLight linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
@keyframes dgaParBg{from{translate:0 -6%}to{translate:0 6%}}
@keyframes dgaParPhone{from{translate:0 24px}to{translate:0 -24px}}
@keyframes dgaParWin{from{translate:0 12px}to{translate:0 -12px}}
@keyframes dgaLight{from{opacity:.55}to{opacity:1}}
/* חשוב: overflow:hidden הופך את הבמה ל-scroll container, ואז view() נמדד מולה ונתקע.
   clip חותך בלי ליצור scroll container (build-laws §4). גובר על Layout > Overflow של אלמנטור. */
html.dga-motion .dga-stage{overflow:clip!important}

/* ----------------------------------------------------------------------------
   4. כרטיסים: הרמה עדינה (3px) והצל "מתחזק" דרך ::after (opacity, לא
   box-shadow), 220ms. רק עם עכבר אמיתי. לא scale.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html.dga-motion .dga-acard,
  html.dga-motion .dga-art,
  html.dga-motion .dga-plan,
  html.dga-motion .dga-frame,
  html.dga-motion .dga-step{position:relative;transition:transform 220ms var(--dga-ease-out)}
  html.dga-motion .dga-acard::after,
  html.dga-motion .dga-art::after,
  html.dga-motion .dga-plan::after,
  html.dga-motion .dga-frame::after,
  html.dga-motion .dga-step::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    box-shadow:0 1px 1px rgba(20,18,18,.04),0 28px 56px -26px rgba(20,18,18,.38),0 72px 130px -50px rgba(20,18,18,.28);
    opacity:0;transition:opacity 220ms var(--dga-ease-out)
  }
  html.dga-motion .dga-acard:hover,
  html.dga-motion .dga-art:hover,
  html.dga-motion .dga-plan:hover,
  html.dga-motion .dga-frame:hover,
  html.dga-motion .dga-step:hover{transform:translateY(-3px)}
  html.dga-motion .dga-acard:hover::after,
  html.dga-motion .dga-art:hover::after,
  html.dga-motion .dga-plan:hover::after,
  html.dga-motion .dga-frame:hover::after,
  html.dga-motion .dga-step:hover::after{opacity:1}
  /* הכרטיס המומלץ כבר מוזז -12px דרך ה-Transform של אלמנטור (משתנה): מרימים דרך אותו משתנה */
  html.dga-motion .dga-plan-hot{transition:transform 220ms var(--dga-ease-out)}
  html.dga-motion .dga-plan-hot:hover{--e-transform-translateY:-16px}
  /* למוקאפ (transform ישיר) */
  html.dga-motion .dga-plan-hot.plan:hover{transform:translateY(-16px)}
}

/* ----------------------------------------------------------------------------
   5. שורת המספרים: ספירה עולה פעם אחת (JS). כאן רק ספרות ברוחב קבוע כדי
   שהשורה לא תרעד בזמן הספירה.
   -------------------------------------------------------------------------- */
html.dga-motion .dga-knum .elementor-heading-title,
html.dga-motion .dga-count{font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------------------
   6. בוררים. (א) Nested Tabs (הבמה, חודשי/שנתי): הפאנל שנכנס נמוג פנימה
   220ms עם 6px עלייה. keyframes בכוונה: כל הפעלה מתחילה מאפס. (ב) בורר
   מוכר/מוכרת: מחלקת dga-xf על הטקסטים שמתחלפים, DGA.crossfade() ב-JS.
   -------------------------------------------------------------------------- */
html.dga-motion:not(.dga-rm) .e-n-tabs-content>.e-con.e-active,
html.dga-motion:not(.dga-rm) .e-n-tabs-content>.e-con.on{animation:dgaTabIn var(--dga-t-tab) var(--dga-ease-out) both}
@keyframes dgaTabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* בורר מוכר/מוכרת של ניר (dga-gswitch / dga-gbtn, טקסטים עם data-g): החלפה ב-DGA.crossfade, והלשונית הפעילה זזה ברקע */
html.dga-motion [data-g]{transition:opacity 120ms var(--dga-ease-io)}
html.dga-motion .dga-gbtn .elementor-button{transition:background-color var(--dga-t-tab) var(--dga-ease-out),color var(--dga-t-tab) var(--dga-ease-out)}
html.dga-motion .dga-xf{transition:opacity 120ms var(--dga-ease-io)}
html.dga-motion .dga-xf.dga-xf-out{opacity:0}
html.dga-motion .dga-xf.dga-xf-in{transition-duration:180ms}
/* הלשונית הפעילה בבוררים: המחוון זז (Elementor מצייר רקע לכל לשונית; המעבר על הרקע והצבע) */
html.dga-motion .e-n-tab-title{transition:background-color var(--dga-t-tab) var(--dga-ease-out),color var(--dga-t-tab) var(--dga-ease-out)}

/* ----------------------------------------------------------------------------
   7. ההדר הצף מחליף גוון מעל מקטעים כהים (html.dga-over-dark מה-JS, IO על
   רצועת ההדר). background-color / color / filter, 360ms.
   -------------------------------------------------------------------------- */
html.dga-motion .dga-top{transition:background-color var(--dga-t-top) var(--dga-ease-io),box-shadow var(--dga-t-top) var(--dga-ease-io)}
html.dga-motion .dga-top a,
html.dga-motion .dga-top .elementor-nav-menu a,
html.dga-motion .dga-top .elementor-button{transition:color var(--dga-t-top) var(--dga-ease-io),background-color var(--dga-t-top) var(--dga-ease-io)}
html.dga-motion .dga-lockup img,
html.dga-motion .dga-lockup span{transition:filter var(--dga-t-top) var(--dga-ease-io),color var(--dga-t-top) var(--dga-ease-io)}
html.dga-motion.dga-over-dark .dga-top{background-color:rgba(20,18,18,.62)!important;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 30px -18px rgba(0,0,0,.6)}
html.dga-motion.dga-over-dark .dga-top a,
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu a,
html.dga-motion.dga-over-dark .dga-top nav a{color:#fff}
/* ניר: ווידג׳ט התפריט של אלמנטור מגדיר צבע בספציפיות גבוהה יותר (.elementor-51 .elementor-element-… .elementor-item), לכן !important */
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--main .elementor-item{color:#fff!important}
/* ניר (דוד, מובייל): ההמבורגר והתפריט הנפתח במצב הכהה: עיגול בהיר-שקוף עם קווים לבנים, תפריט נפתח כהה עם טקסט לבן */
html.dga-motion.dga-over-dark .dga-top .elementor-menu-toggle{background-color:rgba(255,255,255,.16)!important;color:#fff!important}
html.dga-motion.dga-over-dark .dga-top .elementor-menu-toggle svg,
html.dga-motion.dga-over-dark .dga-top .elementor-menu-toggle svg *{fill:#fff!important}
html.dga-motion.dga-over-dark .dga-top .elementor-menu-toggle i{color:#fff!important}
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--dropdown{background-color:#1E1A1A!important}
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--dropdown .elementor-item{color:#fff!important}
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--dropdown .elementor-item:hover,
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--dropdown .elementor-item:focus-visible{color:#ff9095!important;background:rgba(255,255,255,.06)!important}
html.dga-motion .dga-top .elementor-menu-toggle{transition:background-color var(--dga-t-top) var(--dga-ease-io),color var(--dga-t-top) var(--dga-ease-io)}
html.dga-motion .dga-top .elementor-nav-menu--dropdown{transition:background-color var(--dga-t-top) var(--dga-ease-io)}
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--main .elementor-item:hover,
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu--main .elementor-item:focus-visible{color:#ff9095!important}
html.dga-motion.dga-over-dark .dga-top .elementor-nav-menu a:hover,
html.dga-motion.dga-over-dark .dga-top nav a:hover{color:#ff9095}
html.dga-motion.dga-over-dark .dga-lockup img{filter:invert(1)}
html.dga-motion.dga-over-dark .dga-lockup span{color:#fff}
html.dga-motion.dga-over-dark .dga-top .elementor-button,
html.dga-motion.dga-over-dark .dga-top .btn-primary{background-color:#fff!important;color:#141212!important}
html.dga-motion.dga-over-dark .dga-top .elementor-button .elementor-button-icon,
html.dga-motion.dga-over-dark .dga-top .btn-primary .dot{background:rgba(20,18,18,.08)}
html.dga-motion.dga-over-dark .dga-top .elementor-menu-toggle{color:#fff}

/* ----------------------------------------------------------------------------
   8. כפתור ראשי: hover: הרקע מתכהה 180ms והנקודה עם החץ זזה 2px (לא 3);
   active: scale .98 ב-100ms, הנקודה מתכווצת. פוקוס מקלדת: אותה תגובה כמו hover.
   -------------------------------------------------------------------------- */
html.dga-motion .elementor-button,
html.dga-motion .btn{transition:background-color var(--dga-t-ui) var(--dga-ease-out),color var(--dga-t-ui) var(--dga-ease-out),transform 100ms var(--dga-ease-out)}
html.dga-motion .elementor-button:active,
html.dga-motion .btn:active{transform:scale(.98)}
html.dga-motion .dga-btn-dot .elementor-button-icon,
html.dga-motion .dga-btn-dot .dot{transition:transform var(--dga-t-ui) var(--dga-ease-out),background-color var(--dga-t-ui) var(--dga-ease-out)}
@media (hover:hover) and (pointer:fine){
  html.dga-motion .dga-btn-dot:hover .elementor-button-icon,
  html.dga-motion .dga-btn-dot:hover .dot{transform:translateX(-2px)}
}
html.dga-motion .dga-btn-dot .elementor-button:focus-visible .elementor-button-icon,
html.dga-motion .dga-btn-dot:focus-visible .dot{transform:translateX(-2px)}
html.dga-motion .dga-btn-dot .elementor-button:active .elementor-button-icon,
html.dga-motion .dga-btn-dot:active .dot{transform:translateX(-2px) scale(.94)}

/* ----------------------------------------------------------------------------
   9. עוד שני פרטים. (א) הקבלה "מודפסת" פעם אחת בכניסה (clip-path מלמעלה
   למטה, 900ms), ממשיך את החתימה של סבב 1. (ב) הבועה הצפה של התוסף: נכנסת
   ויוצאת ב-scale .9 + 12px, 320ms, במקום display:none (ראו motion-v3.md 9).
   -------------------------------------------------------------------------- */
/* ה-clip על הילדים, לא על הקונטיינר הנצפה: clip-path על היעד עצמו מאפס את מלבן החיתוך של IntersectionObserver */
html.dga-motion:not(.dga-rm) .dga-receipt.dga-fade{--dga-reveal-y:0px;transform:none}
html.dga-motion:not(.dga-rm) .dga-receipt.dga-fade>*{clip-path:inset(0 0 100% 0)}
html.dga-motion:not(.dga-rm) .dga-receipt.dga-fade.dga-in>*{animation:dgaPrint 900ms var(--dga-spring) both}
@keyframes dgaPrint{from{clip-path:inset(0 0 100% 0);translate:0 -16px}to{clip-path:inset(0 0 -40px 0);translate:0 0}}
html.dga-motion .digisa-root:not(.digisa-inline) button.digisa-launcher,
html.dga-motion .digisa-root:not(.digisa-inline) .digisa-nudge{
  transition:opacity 240ms var(--dga-ease-out),transform 320ms var(--dga-spring),visibility 0s linear 0s
}
/* ניר: טאבלט בלבד (768 עד 1024). בדסקטופ הבועה תמיד מוצגת (דוד 23.10); במובייל הפס הדביק במקום */
@media (min-width:768px) and (max-width:1024px){
  html.dga-motion.dga-stage-on .digisa-root:not(.digisa-inline) button.digisa-launcher,
  html.dga-motion.dga-stage-on .digisa-root:not(.digisa-inline) .digisa-nudge{
    opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;visibility:hidden;
    transition:opacity 200ms var(--dga-ease-out),transform 240ms var(--dga-ease-out),visibility 0s linear 240ms
  }
}

/* ----------------------------------------------------------------------------
   תנועה מופחתת: fade בלבד (200ms), בלי תזוזה, blur, פרלקס, ספירה והדפסה.
   JS מוסיף html.dga-rm; ה-media query מכסה גם בלי JS.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.dga-motion .dga-fade,
  html.dga-motion [data-dga-hero] .dga-fade,
  html.dga-motion .dga-stage.dga-fade,
  html.dga-motion .dga-stage .dga-phone,
  html.dga-motion .dga-stage .dga-win{transform:none!important;translate:none!important;filter:none!important;transition:opacity 200ms ease!important;animation:none!important}
  html.dga-motion .dga-h1 .elementor-heading-title>span{transform:none!important;animation:none!important}
  html.dga-motion .dga-stage::before{opacity:1!important;animation:none!important}
  html.dga-motion .dga-stage .elementor-background-video-container,
  html.dga-motion .dga-stage>.dga-bg img{translate:none!important;scale:none!important;animation:none!important}
  html.dga-motion .dga-receipt.dga-fade>*{clip-path:none!important;animation:none!important}
  html.dga-motion .e-n-tabs-content>.e-con{animation:none!important}
  html.dga-motion .dga-acard:hover,
  html.dga-motion .dga-art:hover,
  html.dga-motion .dga-plan:hover,
  html.dga-motion .dga-frame:hover,
  html.dga-motion .dga-step:hover{transform:none}
  html.dga-motion .digisa-root:not(.digisa-inline) button.digisa-launcher{transform:none!important}
}
html.dga-rm .dga-fade,
html.dga-rm [data-dga-hero] .dga-fade,
html.dga-rm .dga-stage .dga-phone,
html.dga-rm .dga-stage .dga-win{transform:none!important;translate:none!important;filter:none!important;transition:opacity 200ms ease!important;animation:none!important}
html.dga-rm .dga-h1 .elementor-heading-title>span{transform:none!important;animation:none!important}
html.dga-rm .dga-stage::before{opacity:1!important}
html.dga-rm .dga-receipt.dga-fade>*{clip-path:none!important;animation:none!important}
@media (prefers-reduced-transparency:reduce){
  html.dga-motion .dga-top{background-color:#fff!important;backdrop-filter:none!important}
  html.dga-motion.dga-over-dark .dga-top{background-color:#141212!important}
}

/* ניר, אחרי דוח יעל (ביצועי מובייל): מתחת ל-768 החשיפה בלי blur, ובלי פרלקס מונע-גלילה בבמה */
@media (max-width:767px){
  html.dga-motion .dga-fade{filter:none!important;--dga-reveal-blur:0px}
  html.dga-motion .dga-stage .elementor-background-video-container,
  html.dga-motion .dga-stage>.dga-bg img,
  html.dga-motion .dga-stage .dga-phone,
  html.dga-motion .dga-stage .dga-win,
  html.dga-motion .dga-stage::before{animation:none!important;translate:none!important;scale:none!important;opacity:1}
}