.mech-wrap{position:relative;justify-self:center;width:100%;max-width:446px}
.mech{width:100%;height:auto;display:block;
  --anim-line:#9FC4DC; --anim-soft:rgba(159,196,220,.42);
  --anim-fill:rgba(159,196,220,.14); --anim-seal:rgba(255,138,40,.78)}
.mech-cap{position:relative;margin-top:18px;min-height:64px}
.mech-cap .line{position:relative;min-height:56px}
.mech-cap .line span{position:absolute;inset-inline:0;top:0;text-align:center;
  color:#9FB6C7;line-height:1.5;font-size:16.8px;opacity:0}
.mech-cap b{display:block;font-size:18.6px;font-weight:700;color:#E7F0F7}
.mech-cap .fault b{color:#FFC48A}
.mech-cap .act b{color:#FF8A28;font-size:20px}
.mech-cap .c1{animation:cap1 19s ease-in-out infinite}
.mech-cap .c2{animation:cap2 19s ease-in-out infinite}
.mech-cap .f1{animation:f1cap 19s ease-in-out infinite}
.mech-cap .f2{animation:f2cap 19s ease-in-out infinite}
.mech-cap .f3{animation:f3cap 19s ease-in-out infinite}
.mech-cap .f4{animation:f4cap 19s ease-in-out infinite}
.mech-cap .a1{animation:actcap 19s ease-in-out infinite}

.mech .wall{animation:reveal 19s ease-in-out infinite}
.mech .scan{animation:scan 19s ease-in-out infinite;opacity:0}
.mech .behind{animation:behind 19s ease-in-out infinite}
.mech .water{transform-origin:74px 316px;animation:wlvl 19s cubic-bezier(.45,.05,.55,.95) infinite}
.mech .surface{animation:surf 19s cubic-bezier(.45,.05,.55,.95) infinite}
.mech .floatg{animation:flt 19s cubic-bezier(.45,.05,.55,.95) infinite}
.mech .press{animation:press 19s ease-in-out infinite;transform-origin:150px 73px}
.mech .trickle{animation:trickle 19s linear infinite;opacity:0}
.mech .drip{opacity:0}
.mech .leak .k1{animation:leak 19s linear infinite;opacity:0}
.mech .leak .k2{animation:leak 19s linear infinite;opacity:0;animation-delay:.55s}
.mech .fx{opacity:0}
.mech .fx1{animation:fx1 19s ease-in-out infinite}
.mech .fx2{animation:fx2 19s ease-in-out infinite}
.mech .fx3{animation:fx3 19s ease-in-out infinite}
.mech .fx4{animation:fx4 19s ease-in-out infinite}
.mech .cta{opacity:0;transform-origin:190px 212px;animation:ctain 19s ease-in-out infinite}
.mech .cta .pulse{transform-origin:190px 212px;animation:ctapulse 1.8s ease-out infinite}

/* מערכה 1 ו-2: הקיר אטום, ואז נחשף לאט */
@keyframes reveal{0%,9%{opacity:1} 20%,93%{opacity:.08} 98%,100%{opacity:1}}
@keyframes behind{0%,9%{opacity:.12} 20%,93%{opacity:1} 98%,100%{opacity:.12}}
@keyframes scan{0%,9%{opacity:0;transform:translateY(0)} 12%{opacity:1}
  18%{opacity:1;transform:translateY(600px)} 20%,100%{opacity:0;transform:translateY(600px)}}

/* סבב התקלות. טבעת אחת בכל רגע */
@keyframes fx1{0%,30%{opacity:0} 32%,42%{opacity:1} 44%,100%{opacity:0}}
@keyframes fx2{0%,43%{opacity:0} 45%,54%{opacity:1} 56%,100%{opacity:0}}
@keyframes fx3{0%,55%{opacity:0} 57%,66%{opacity:1} 68%,100%{opacity:0}}
@keyframes fx4{0%,67%{opacity:0} 69%,78%{opacity:1} 80%,100%{opacity:0}}

/* התסמין של כל תקלה */
/* 1. לוחצים, ושום דבר לא קורה. המים לא יורדים */
@keyframes press{0%,32%{transform:scale(1)} 34%{transform:scale(.93)} 37%{transform:scale(1)}
  56%,57%{transform:scale(1)} 59%,66%{transform:scale(.93)} 69%,100%{transform:scale(1)}}
/* 2. נזילה מתמדת לאסלה, והמפלס יורד לאט */
@keyframes trickle{0%,44%{opacity:0} 46%,54%{opacity:1} 56%,100%{opacity:0}}
@keyframes wlvl{0%,45%{transform:scaleY(1)} 54%{transform:scaleY(.84)}
  58%,100%{transform:scaleY(1)}}
@keyframes surf{0%,45%{transform:translateY(0)} 54%{transform:translateY(33px)}
  58%,100%{transform:translateY(0)}}
@keyframes flt{0%,45%{transform:translateY(0)} 54%{transform:translateY(33px)}
  58%,100%{transform:translateY(0)}}
/* 4. טיפות בחיבור הצנרת, הרעש שבתוך הקיר */
@keyframes leak{0%,68%{opacity:0;transform:translateY(0)}
  70%{opacity:1;transform:translateY(0)} 77%{opacity:0;transform:translateY(46px)}
  78%,100%{opacity:0;transform:translateY(0)}}

/* מערכה 5: מה עושים */
@keyframes ctain{0%,79%{opacity:0;transform:scale(.7)}
  83%,90%{opacity:1;transform:scale(1)} 93%,100%{opacity:0;transform:scale(.9)}}
@keyframes ctapulse{0%{transform:scale(.88);opacity:.6} 100%{transform:scale(1.18);opacity:0}}

/* כיתובים */
@keyframes cap1{0%,10%{opacity:1} 15%,95%{opacity:0} 99%,100%{opacity:1}}
@keyframes cap2{0%,17%{opacity:0} 21%,29%{opacity:1} 31%,100%{opacity:0}}
@keyframes f1cap{0%,30%{opacity:0} 32%,42%{opacity:1} 44%,100%{opacity:0}}
@keyframes f2cap{0%,43%{opacity:0} 45%,54%{opacity:1} 56%,100%{opacity:0}}
@keyframes f3cap{0%,55%{opacity:0} 57%,66%{opacity:1} 68%,100%{opacity:0}}
@keyframes f4cap{0%,67%{opacity:0} 69%,78%{opacity:1} 80%,100%{opacity:0}}
@keyframes actcap{0%,79%{opacity:0} 82%,91%{opacity:1} 93%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .mech .wall,.mech .scan,.mech .behind,.mech .water,.mech .surface,.mech .floatg,
  .mech .press,.mech .trickle,.mech .leak .k1,.mech .leak .k2,
  .mech .fx,.mech .cta,.mech .cta .pulse,.mech-cap span{animation:none}
  .mech .wall{opacity:.08}
  .mech .scan,.mech .trickle,.mech .leak,.mech .cta{display:none}
  .mech .fx{opacity:.85}
  .mech-cap .c2{opacity:1}
}


.hero-fig.anim{aspect-ratio:auto;height:auto;margin:0;background:linear-gradient(160deg,#0E1E2B,#132B3D);border-radius:24px;
  padding:clamp(20px,2.6vw,34px) clamp(16px,2.4vw,32px) clamp(18px,2.2vw,28px);
  box-shadow:0 24px 60px rgba(14,30,43,.28);overflow:hidden;position:relative}
.hero-fig.anim .mech-wrap{max-width:430px;margin-inline:auto}
.hero-grid .hero-fig.anim{aspect-ratio:auto;height:auto;min-height:0}