/* =========================================================
   SHELLY — motion.css
   אפקטי תנועה עדינים. פועלים רק כשיש JS (מחלקה .js על html),
   כך שבלי JS הכל נראה רגיל. מכבדים prefers-reduced-motion.
   ========================================================= */
:root{--ease:cubic-bezier(.22,.8,.24,1)}

/* ---------- הירו: כניסה מדורגת ---------- */
.js .hr > .logo-line,.js .hr h1 .l1,.js .hr > p,.js .hr > .pill,.js .me{opacity:0;transform:translateY(18px)}
.js .hr h1 .l2 .w{display:inline-block;opacity:0;transform:translateY(60%) rotate(2deg)}
.js .hr h1 .l2 .wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.loaded .hr > .logo-line{animation:up .7s var(--ease) .05s forwards}
.loaded .hr h1 .l1{animation:up .7s var(--ease) .15s forwards}
.loaded .hr h1 .l2 .w{animation:word .8s var(--ease) forwards;animation-delay:calc(.3s + var(--i) * .09s)}
.loaded .hr > p{animation:up .7s var(--ease) .65s forwards}
.loaded .hr > .pill{animation:up .7s var(--ease) .78s forwards}
.loaded .me{animation:pop .9s var(--ease) .55s forwards}
@keyframes up{to{opacity:1;transform:none}}
@keyframes word{to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}

/* ---------- גלילה: כניסה של אלמנטים ---------- */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-rv="fade"]{transform:none}
.js [data-rv="left"]{transform:translateX(-32px)}
.js [data-rv="right"]{transform:translateX(32px)}
.js [data-rv="zoom"]{transform:scale(.94)}
.js [data-rv].in{opacity:1;transform:none}

/* ---------- הדר: מתכווץ ומקבל צל בגלילה ---------- */
.v2 .header{transition:top .35s var(--ease),box-shadow .35s,background .35s}
.v2 .header .inner{transition:height .35s var(--ease)}
.scrolled.v2 .header{top:8px;background:rgba(251,247,240,.92);box-shadow:0 18px 36px -24px rgba(92,26,38,.55)}
.scrolled.v2 .header .inner{height:50px}

/* ---------- הירו: העיגול זז קצת בגלילה (פרלקסה) ---------- */
.me .cutout{transition:transform .1s linear}

/* ---------- כרטיסים: תגובה לעכבר ---------- */
.inc-card .ic{transition:transform .4s var(--ease),background .4s}
.inc-card:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--color-lilac)}
.st{transition:transform .4s var(--ease)}
.st:hover{transform:translateY(-6px)}
.meet-img img{transition:transform 1.2s var(--ease)}
.meet-img:hover img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .js .hr > .logo-line,.js .hr h1 .l1,.js .hr > p,.js .hr > .pill,.js .me,.js .hr h1 .l2 .w,.js [data-rv]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .band-in::after{animation:none;display:none}
}

/* ---------- קיר הודעות: כל בועה נכנסת מלמטה. בטלפון היא גם יוצאת כשגוללים חזרה למעלה ---------- */
.js .bub{opacity:0;transform:translateY(46px) rotate(var(--r)) scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 110ms)}
.js .bub.in{opacity:1;transform:rotate(var(--r))}
.js .bub.in:hover{transform:rotate(0) translateY(-4px);transition-delay:0s}
@media(max-width:767px){.js .bub{transition-delay:0s}}
@media (prefers-reduced-motion:reduce){.js .bub{opacity:1!important;transform:none!important;transition:none!important}}

/* קיר הודעות: הבועות נכנסות מהצדדים, אחת מימין ואחת משמאל, כמו הודעות בצ'אט */
.js .bub{transform:translateX(70px) rotate(var(--r)) scale(.97)}
.js .bub:nth-child(even){transform:translateX(-70px) rotate(var(--r)) scale(.97)}
.js .bub.in,.js .bub.in:nth-child(even){transform:rotate(var(--r))}
.js .bub{transition:opacity .55s var(--ease),transform .75s cubic-bezier(.2,.9,.25,1.05)}
@media(min-width:768px){.js .bub{transition-delay:calc(var(--d,0) * 140ms)}}
/* הבועות שמחכות בצד לא מרחיבות את העמוד (בלי גלילה הצידה בטלפון) */
#clients{overflow-x:clip}
body{overflow-x:clip}