/* ==========================================================================
   BE CLEAN — שכבת התנועה
   כל האנימציות כאן עובדות על transform ו-opacity בלבד, ולכן הן יוצאות
   מה-main thread ולא מייצרות layout. שלושה כללים שמנחים את הקובץ:
   1. תנועה שמסבירה, לא מקשטת: כל אפקט עונה על "מה קרה עכשיו" או "מה נקי כאן".
   2. קצר. כניסה 0.5s, מעבר UI 0.2s. אף אנימציה של ממשק לא עוברת 0.9s.
   3. אפשר לכבות. prefers-reduced-motion וגם מתג "עצירת אנימציות" בווידג'ט
      הנגישות (html.a11y-no-motion) מבטלים את הכול.
   ========================================================================== */

/* ====================== 1. נצנוץ הזכוכית שעל הטופס ======================
   הניצוץ הזה יושב על כרטיסי הטופס בלבד — לא על ההירו ולא על פסי המותג.
   על רקע גדול הוא נקרא כקישוט; על הכרטיס שבו מבקשים מהלקוח למלא פרטים
   הוא נקרא כמה שהוא באמת: הברק של משטח נקי. שלושה כללים:
   1. צורת ברק, לא צורת כוכב. שמונה קרני מחט דקות — ארבע ארוכות וארבע
      קצרות באלכסון — כמו נצנוץ שנתפס בעדשה, ולא כוכב מצויר.
   2. בלי ריחוף. הניצוץ נדלק ונכבה באותה נקודה, פחות משנייה בכל פעם.
   3. מעטים בו-זמנית. ההשהיות פרוסות על כל המחזור, ולכן דולקים אחד-שניים.
   הצבע מגיע מ---spark, ולכן אותו ניצוץ יוצא לבן על הזכוכית של ההירו
   וטורקיז חיוור על כרטיס לבן. נבנה ב-JS ונשתל כילד הראשון של הכרטיס. */
.bc-sparks{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  border-radius:inherit}
.bc-sparks i{
  position:absolute;
  inset-block-start:var(--y);inset-inline-start:var(--x);
  width:calc(20px * var(--s,1));aspect-ratio:1;opacity:0;
  /* הנקודה שב---x/--y היא מרכז הניצוץ ולא הפינה שלו. */
  margin:calc(-10px * var(--s,1));
  background:var(--spark,#fff);
  -webkit-mask:var(--spark-shape) center/100% 100% no-repeat;
          mask:var(--spark-shape) center/100% 100% no-repeat;
  filter:drop-shadow(0 0 3px var(--spark-glow,rgba(255,255,255,.6)));
  /* בלי will-change: אלה תריסר אלמנטים שרצים בלולאה, ושכבת compositor
     קבועה לכל אחד מהם עולה יותר ממה שהיא חוסכת. האנימציה מקדמת אותם
     לשכבה בזמן שהיא רצה וזה מספיק. */
  animation:bc-glint var(--d,8s) linear var(--t,0s) infinite;
}
/* רצים כברירת מחדל, ונעצרים רק כשה-JS מסמן שהכרטיס יצא מהמסך. הכיוון
   הזה חשוב: אם ה-JS לא רץ, מגיע ממטמון ישן או נופל — הניצוצות ממשיכים
   לעבוד. ברירת מחדל "עצור" הופכת כל תקלה קטנה לאתר בלי אנימציה. */
.bc-sparks.is-idle i{animation-play-state:paused}
:root{
  --spark-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Cpath d='M50 2Q51 40 52 48Q60 49 98 50Q60 51 52 52Q51 60 50 98Q49 60 48 52Q40 51 2 50Q40 49 48 48Q49 40 50 2Z'/%3E%3Cpath transform='rotate(45 50 50)' d='M50 22Q50.7 41 51.4 48.6Q59 49.3 78 50Q59 50.7 51.4 51.4Q50.7 59 50 78Q49.3 59 48.6 51.4Q41 50.7 22 50Q41 49.3 48.6 48.6Q49.3 41 50 22Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* 18% מהמחזור באוויר, 82% כבוי. הכניסה מהירה מהיציאה, כמו הבזק אמיתי. */
@keyframes bc-glint{
  0%   {opacity:0;transform:scale(.14) rotate(-12deg)}
  3%   {opacity:1;transform:scale(1) rotate(0deg)}
  13%  {opacity:1;transform:scale(1) rotate(0deg)}
  18%  {opacity:0;transform:scale(.14) rotate(12deg)}
  100% {opacity:0;transform:scale(.14) rotate(12deg)}
}
/* הכרטיס מקבל הקשר ערימה משלו, והתוכן שלו נשאר מעל הניצוצות. */
.quotebar-card,.side-card{position:relative;isolation:isolate}
.quotebar-card>:not(.bc-sparks),.side-card>:not(.bc-sparks){position:relative;z-index:1}
/* לבן על הזכוכית של ההירו, טורקיז מרוסן על כרטיס לבן. */
.hero .quotebar-card{--spark:#fff;--spark-glow:rgba(214,241,244,.8)}
.side-card{--spark:var(--b-300);--spark-glow:rgba(111,203,212,.45)}
.side-card .bc-sparks{opacity:.55}
/* ברגע שמתחילים למלא את הטופס הניצוצות נעלמים. נצנוץ ליד שדה שמקלידים
   בו מושך את העין החוצה בדיוק ברגע שבו היא צריכה להישאר במקום. */
.bc-sparks{transition:opacity .35s var(--ease-out)}
.quotebar-card:focus-within .bc-sparks,.side-card:focus-within .bc-sparks{opacity:0}

/* ========================== 2. כניסת ההירו ==========================
   הכותרת עולה בלי fade. אלמנט שלא נצבע בכלל דוחה את מדד ה-LCP,
   ולכן הכותרת הראשית זזה בלבד, והשורות שאחריה נכנסות עם שקיפות. */
/* מדרגות של 60ms ומשך 0.45s: כל ארבע השורות בפנים תוך פחות מ-0.65s.
   כניסה שנמשכת יותר מזה נקראת כהמתנה, לא כתנועה. */
.hero h1{animation:bc-rise-t .45s var(--ease-out) both}
.hero-sub{animation:bc-rise .45s var(--ease-out) .06s both}
.hero .hero-cta{animation:bc-rise .45s var(--ease-out) .12s both}
.hero .quotebar{animation:bc-rise .5s var(--ease-out) .18s both}
@keyframes bc-rise-t{from{transform:translate3d(0,16px,0)}to{transform:none}}
@keyframes bc-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

/* הדגשת הכותרת נמתחת כמו קו טוש, מימין לשמאל כמו כיוון הקריאה. */
.hero h1 .hl{background-image:none}
.hero h1 .hl::before{
  content:"";position:absolute;z-index:-1;
  /* אותם גבולות בדיוק של ההדגשה הסטטית שהייתה כאן: 62%-92% מגובה תיבת
     האות, כלומר הפס חוצה את תחתית הגליפים ולא יושב מתחתיהם. */
  inset-inline:-.08em;top:62%;height:30%;border-radius:3px;
  background:rgba(27,195,214,.45);
  transform:scaleX(0);transform-origin:100% 50%;
  animation:bc-draw .55s var(--ease-out) .34s both;
}
@keyframes bc-draw{to{transform:scaleX(1)}}

/* ====================== 3. הכפתור הראשי ======================
   כאן הייתה הברקה אלכסונית ב-hover. היא ירדה: אותו אידיום של "פס אור"
   חזר שלוש פעמים בעמוד — כפתור, תמונת שירות וכרטיס טופס — וכשאותו
   רמז חוזר שלוש פעמים הוא מפסיק לסמן משהו. הוא נשאר בשני המקומות
   שבהם יש לו משמעות (משטח שנוקה, כרטיס שהוא היעד), והכפתור מסתפק
   בשינוי הרקע ובלחיצה שמרגישה — שני דברים שהמשתמש באמת יזם. */
.btn{position:relative}

/* ==================== 4. מגב על תמונת כרטיס שירות ====================
   בריחוף עובר על התצלום פס אור, כמו העברה של מגב על זכוכית.
   התמונה עצמה כבר מתקרבת מעט, והפס מוסיף את הרגע של "נוקה עכשיו". */
/* ::before ולא ::after: ה-::after של .mcard-img כבר תפוס ב-sections.css
   בשביל הכהות שמתחת למספר הכרטיס. z-index:2 מציב את פס האור מעל
   הכהות ומעל המספר, כלומר הוא עובר על כל מה שרואים. */
.mcard-img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
}
@media (hover:hover) and (pointer:fine){
  .mcard:hover .mcard-img::before,.mcard:focus-visible .mcard-img::before{
    animation:bc-wipe .9s var(--ease-out) 1}
}
@keyframes bc-wipe{
  0%{opacity:0;transform:translate3d(-105%,0,0)}
  15%{opacity:1}
  100%{opacity:0;transform:translate3d(105%,0,0)}
}

/* ================= 5. מעבר אור על כרטיס הטופס =================
   פעם אחת, כשהכרטיס נכנס לתמונה. מסמן את הכרטיס כיעד של העמוד
   בלי חץ, בלי טקסט ובלי צבע נוסף. */
[data-shine]{position:relative;overflow:hidden}
[data-shine]::before{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;
  z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 48%,transparent);
  transform:skewX(-16deg);
}
[data-shine].is-lit::before{animation:bc-sweep 1.15s var(--ease-out) .45s 1}
@keyframes bc-sweep{
  0%{opacity:0;transform:translateX(0) skewX(-16deg)}
  14%{opacity:1}
  100%{opacity:0;transform:translateX(420%) skewX(-16deg)}
}
/* הכרטיס עצמו מגיב להקלדה: מסגרת מותג וצל עמוק יותר כל עוד יש פוקוס בפנים. */
.quotebar-card,.side-card{
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.quotebar-card:focus-within,.side-card:focus-within{
  border-color:var(--b-300);box-shadow:var(--sh-3)}

/* ======================= 6. מצבי הטופס =======================
   שליחה: הכפתור מקבל ספינר במקום רק להחליף טקסט.
   הצלחה: וי שנפתח בקפיצה קצרה לצד ההודעה. */
.btn.is-busy{pointer-events:none;opacity:.92}
.btn.is-busy::before{
  content:"";width:1em;height:1em;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:bc-spin .68s linear infinite;
}
@keyframes bc-spin{to{transform:rotate(360deg)}}
.bc-form-status.is-ok{display:flex;align-items:center;gap:.55rem}
.bc-form-status.is-ok::before{
  content:"";flex:none;width:23px;height:23px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  animation:bc-pop .46s var(--ease-out) both;
}
@keyframes bc-pop{
  0%{opacity:0;transform:scale(.4)}
  60%{opacity:1;transform:scale(1.12)}
  100%{opacity:1;transform:scale(1)}
}
/* שדה שנפסל מקבל רעד קצר אחד. ברור, לא דרמטי. */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  animation:bc-nudge .3s var(--ease-out) 1}
@keyframes bc-nudge{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(4px)}
  62%{transform:translateX(-3px)}
}

/* ================== 7. ליטושים קטנים בממשק ==================
   דברים שלא שמים לב אליהם אחד-אחד, ומצטברים לתחושה שהאתר חי. */
.trust-item svg,.checks svg{transition:transform var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .trust-row:hover .trust-item svg{transform:translateY(-1px)}
}
.nav a,.hdr-tel{transition:color var(--dur) var(--ease),background var(--dur) var(--ease),
  transform var(--dur-fast) var(--ease)}
.nav a:active,.hdr-tel:active{transform:translateY(1px)}
.acc-q{transition:background var(--dur-ui) var(--ease)}
.step::before{transition:transform var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .step:hover::before{transform:scale(1.07)}
}
.callbar a{transition:filter var(--dur-fast) var(--ease)}
.callbar a:active{filter:brightness(.94)}

/* ========================= 8. כיבוי מלא =========================
   גם העדפת מערכת וגם המתג בווידג'ט הנגישות. אין אנימציה אחת
   שממשיכה לרוץ כשמבקשים שקט. */
@media (prefers-reduced-motion:reduce){
  .bc-sparks{display:none}
  .hero h1,.hero-sub,.hero .hero-cta,.hero .quotebar,.acc-a{animation:none}
  .hero h1 .hl::before{animation:none;transform:none}
  .mcard:hover .mcard-img::before,
  [data-shine].is-lit::before,.btn.is-busy::before{animation:none}
  .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{animation:none}
  .bc-form-status.is-ok::before{animation:none}
  .step:hover::before,.nav a:active{transform:none}
}
html.a11y-no-motion .bc-sparks{display:none}
html.a11y-no-motion .hero h1 .hl::before{transform:none}

/* ==================== 9. אקורדיון שנפתח בגובה ====================
   הטריק: grid-template-rows עובר מ-0fr ל-1fr, והילד היחיד עם overflow
   מוסתר. זה מנפיש גובה של תוכן שאי אפשר לדעת את גובהו מראש, בלי JS
   ובלי מדידה. visibility מוסתרת בזמן סגור, ולכן התוכן גם לא נקרא
   בקורא מסך ולא נתפס ב-Tab. */
.acc-a{display:grid;grid-template-rows:0fr;padding:0;
  transition:grid-template-rows .3s var(--ease-out)}
/* רצועת 0fr היא בפועל minmax(auto,0fr) — יש לה מינימום אוטומטי שנגזר
   מהפריט, ולכן min-height:0 כאן הוא תנאי הכרחי לקיפול לאפס. */
.acc-a-in{overflow:hidden;visibility:hidden;opacity:0;min-height:0;
  padding:0 1.35rem;
  transition:visibility 0s linear .3s,opacity .2s var(--ease-out)}
/* הריווח התחתון יושב על הילד ולא על .acc-a-in עצמו. padding על הפריט
   המתקפל שורד את הקיפול — גובה התוכן מתאפס אבל ה-padding לא — וזה
   השאיר פס של 20px מתחת לכל שאלה סגורה. margin של הילד נבלע בתוך
   overflow:hidden ונחתך יחד איתו. */
.acc-a-in > :last-child{margin-bottom:1.25rem}
.acc-a-in > :first-child{margin-top:0}
.acc-item.is-open > .acc-a{grid-template-rows:1fr}
.acc-item.is-open > .acc-a > .acc-a-in{visibility:visible;opacity:1;transition-delay:0s,.08s}

/* ==================== 10. החלפת הלוגו בגלילה ====================
   שני קבצי לוגו מונחים זה על זה ומצליבים שקיפות. display:none החליף
   אותם בקפיצה, וזה היה הרגע היחיד בעמוד שנראה שבור בזמן גלילה. */
.brand{position:relative}
.brand img{transition:opacity var(--dur-ui) var(--ease)}
.logo-on-paper{display:block;position:absolute;inset-inline-start:0;top:50%;
  transform:translateY(-50%);opacity:0;pointer-events:none}
.site-header.is-stuck .logo-on-band{display:block;opacity:0}
.site-header.is-stuck .logo-on-paper{opacity:1}

/* ==================== 11. לייטבוקס ההמלצות ====================
   שום דבר לא מופיע יש מאין. התמונה נכנסת מ-scale(.96), לא מכלום. */
.lightbox img{transform:scale(.96);transition:transform .24s var(--ease-out)}
.lightbox.is-open img{transform:none}
.lightbox-cap{opacity:0;transition:opacity .24s var(--ease-out) .06s}
.lightbox.is-open .lightbox-cap{opacity:1}

/* ==================== 12. המגירה בנייד ====================
   עקומת המגירה של iOS. היא יוצאת מהר ונעצרת רך, וזו הסיבה שמגירה
   בטלפון מרגישה כמו חפץ ולא כמו שכבה שמופיעה. */
/* סגירה תמיד מהירה מפתיחה. פתיחה היא הצגה של משהו חדש ומותר לה לקחת
   זמן; סגירה היא הסרה של משהו שכבר ראינו, וכל מילישנייה בה היא המתנה.
   המעבר נלקח ממצב היעד, ולכן הכלל הבסיסי כאן שולט על הסגירה
   והכלל עם .is-open שולט על הפתיחה. */
.drawer{transition:transform .22s cubic-bezier(.32,.72,0,1)}
.drawer.is-open{transition-duration:.34s}
.drawer nav > *{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .15s var(--ease-out),transform .15s var(--ease-out)}
.drawer.is-open nav > *{opacity:1;transform:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}
/* מדרגות של 45ms. יותר מזה והתפריט מרגיש איטי במקום חי. */
.drawer.is-open nav > *:nth-child(1){transition-delay:.05s}
.drawer.is-open nav > *:nth-child(2){transition-delay:.095s}
.drawer.is-open nav > *:nth-child(3){transition-delay:.14s}
.drawer.is-open nav > *:nth-child(4){transition-delay:.185s}
.drawer.is-open nav > *:nth-child(5){transition-delay:.23s}
.drawer.is-open nav > *:nth-child(6){transition-delay:.275s}
/* תתי הפריטים נפתחים בגובה, בדיוק כמו האקורדיון בעמוד */
.d-panel{display:grid;grid-template-rows:0fr;overflow:hidden;padding:0;
  transition:grid-template-rows .26s var(--ease-out)}
.d-panel-in{overflow:hidden;visibility:hidden;
  display:flex;flex-direction:column;
  padding-block:.35rem .95rem;padding-inline-start:.35rem;
  transition:visibility 0s linear .26s}
.d-group.is-open > .d-panel{grid-template-rows:1fr}
.d-group.is-open > .d-panel > .d-panel-in{visibility:visible;transition-delay:0s}

/* ==================== 13. כרטיסי ההמלצות ====================
   קיר ההמלצות (.wall-rail) כבר בנוי נכון: marquee עם דהייה בקצוות,
   עצירה בריחוף ובפוקוס, ומעבר לגלילה עם snap כשמבקשים פחות תנועה.
   מה שחסר שם היה רק עוצמת הלחיצה, בדיוק כמו בכפתורים. */
.wa:active{transform:scale(.97)}

/* ============ כיבוי מלא גם עבור מה שנוסף כאן ============ */
@media (prefers-reduced-motion:reduce){
  .acc-a,.acc-a-in,.d-panel,.d-panel-in{transition:none}
  .drawer nav > *{opacity:1;transform:none;transition:none}
  .drawer{transition:none}
  .lightbox img{transform:none;transition:none}
  .lightbox-cap{opacity:1;transition:none}
  .brand img{transition:none}
  /* חייב לשבת אחרי .wa:active שלמעלה, אחרת הכלל המאוחר גובר עליו. */
  .wa:active{transform:none}
}

/* ============== 10. כפתור הצעת המחיר הצף (דסקטופ בלבד) ==============
   שלוש תנועות, כל אחת עם תפקיד: כניסה מושהית כדי לא להתחרות בהירו,
   טבעת שנפתחת פעמיים בלבד כתזכורת שקטה, והרמה קטנה ב-hover.
   הכניסה משתמשת ב-backwards ולא ב-both בכוונה: עם both ערכי הסיום
   ננעלים ומנצחים כל הכרזה אחרת, וההסתרה מול פאנל הנגישות מפסיקה לעבוד. */
.qfab{animation:bc-rise .55s var(--ease-out) 1.1s backwards;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* visibility קופצת ולא מתמזגת, ולכן ההשהיה שלה יושבת על מצב ההסתרה
   עצמו — כך היא מחכה לסוף ההיעלמות במקום לחתוך אותה באמצע. */
.qfab.is-tucked,body:has(#a11yPanel.is-open) .qfab{
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
  visibility 0s linear var(--dur)}

.qfab::after{content:"";position:absolute;inset:-3px;border-radius:var(--r-pill);
  border:2px solid var(--accent-bright);pointer-events:none;opacity:0;
  /* פעמיים ודי. טבעת שנפתחת בלולאה אינסופית, בלי שהמשתמש עשה דבר,
     מפסיקה להיקרא כרמז ומתחילה להיקרא כנדנוד — והעין לומדת להתעלם
     ממנה בדיוק כמו מבאנר. שני מחזורים אומרים "יש כאן כפתור" ונעצרים. */
  animation:qfab-ring 5s var(--ease-out) 2.6s 2}
@keyframes qfab-ring{
  0%{opacity:.7;transform:scale(1)}
  22%{opacity:0;transform:scale(1.28)}
  100%{opacity:0;transform:scale(1.28)}
}

.qfab-btn{transition:background var(--dur) var(--ease),transform var(--dur-ui) var(--ease),
  box-shadow var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .qfab-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
}
.qfab-btn:active{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .qfab{animation:none}
  .qfab::after{display:none}
  .qfab-btn:hover,.qfab-btn:active{transform:none}
}
html.a11y-no-motion .qfab{animation:none}
html.a11y-no-motion .qfab::after{display:none}

/* ============== 15. כפתור הביקורות של גוגל ==============
   כניסה מאוחרת יותר מכפתור ההצעה, כדי ששני הכפתורים לא יקפצו יחד
   ויראו כמו שני באנרים שנפתחו. הכוכבים נדלקים אחד-אחד אחרי הכניסה,
   פעם אחת בלבד: זה הרמז שאומר "יש כאן דירוג", והוא לא חוזר בלולאה. */
.gfab{animation:bc-rise .5s var(--ease-out) 1.5s backwards;
  transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
.gfab .gstars .gstar{animation:bc-star-in .42s var(--ease-out) backwards}
.gfab .gstars .gstar:nth-child(1){animation-delay:1.7s}
.gfab .gstars .gstar:nth-child(2){animation-delay:1.78s}
.gfab .gstars .gstar:nth-child(3){animation-delay:1.86s}
.gfab .gstars .gstar:nth-child(4){animation-delay:1.94s}
.gfab .gstars .gstar:nth-child(5){animation-delay:2.02s}
@keyframes bc-star-in{
  0%{opacity:0;transform:scale(.3) rotate(-25deg)}
  100%{opacity:1;transform:none}
}
.gfab-btn{transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .gfab-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--b-200)}
}
.gfab-btn:active{transform:translateY(0) scale(.97)}

/* ---- פתיחת הקרוסלה ----
   בטלפון היא עולה מלמטה כמו גיליון, במחשב היא נפתחת מ-scale(.96).
   שני הכיוונים יוצאים מאיפה שהמשתמש לחץ, ולא "מופיעים" מכלום. */
.rv-modal{opacity:0;transition:opacity .22s var(--ease-out)}
.rv-modal.is-open{opacity:1}
.rv-sheet{transform:translateY(14px) scale(.985);
  transition:transform .3s var(--ease-out)}
.rv-modal.is-open .rv-sheet{transform:none}
@media (min-width:768px){.rv-sheet{transform:scale(.96)}}
.rv-arrow,.rv-dot{transition:background var(--dur-ui) var(--ease),
  transform var(--dur-fast) var(--ease),opacity var(--dur-ui) var(--ease)}
.rv-arrow:active{transform:scale(.94)}
.rv-dot{transition:background var(--dur-ui) var(--ease),width .2s var(--ease-out)}
.rv-dot.is-on{width:20px;border-radius:var(--r-pill)}

@media (prefers-reduced-motion:reduce){
  .gfab,.gfab .gstars .gstar{animation:none}
  .gfab-btn:hover,.gfab-btn:active{transform:none}
  .rv-modal,.rv-sheet{transition:none;transform:none;opacity:1}
  .rv-arrow:active{transform:none}
}
html.a11y-no-motion .gfab,html.a11y-no-motion .gfab .gstars .gstar{animation:none}

/* ============== 14. רשת הביטחון של "פחות תנועה" ==============
   כל הכללים שלמעלה הם רשימת היתר ידנית: הם מכבים בדיוק את האנימציות
   שהיו קיימות ביום שנכתבו. אנימציה שתיכתב מחר לא תופיע באף אחת מהן
   ותמשיך לרוץ גם למי שביקש שקט. הכלל הזה סוגר את הפער — הוא מקצר כל
   תנועה שנשארה לאפס במקום לבטל אותה, ולכן אירועי transitionend ו-
   animationend עדיין נורים וה-JS שמחכה להם לא נתקע.
   חייב לשבת אחרון בקובץ: הוא רשת, לא כוונה. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
}


/* ================== 11. טלפון: תנועה שמלווה את הגלילה ==================
   הלקוח אהב את המחשב וראה בטלפון "עיצוב גנרי". בטלפון הכול נערם לטור,
   ולכן אנימציה שנדלקת פעם אחת על סקשן שלם נגמרת לפני שהגיעו אליה.
   כאן כל פריט נדלק כשהוא עצמו נכנס למסך. הכיתה .is-live מגיעה מה-JS,
   ורק תחתיה משהו מוסתר: בלי JS, או עם בקשה לשקט, הכול פשוט גלוי. */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){

  /* --- ניצוצות הטופס בהירו: גדולים ובולטים יותר על מסך קטן --- */
  .hero .bc-sparks i{
    width:calc(26px * max(var(--s,1), .7));
    margin:calc(-13px * max(var(--s,1), .7));
    filter:drop-shadow(0 0 5px var(--spark-glow,rgba(255,255,255,.8)))}

  /* --- למה נשארים איתנו: התמונה נחשפת מלמטה ומתיישבת --- */
  .feat-media.is-live{clip-path:inset(0 0 100% 0 round var(--r-lg));
    transition:clip-path .9s var(--ease-io)}
  .feat-media.is-live img{transform:scale(1.14);
    transition:transform 1.3s var(--ease-out)}
  .feat-media.is-live.is-on{clip-path:inset(0 0 0 0 round var(--r-lg))}
  .feat-media.is-live.is-on img{transform:none}

  /* הווי הופך לתג עגול שקופץ פנימה, והשורה נכנסת מהצד */
  .checks svg{box-sizing:content-box;padding:6px;margin-top:0;border-radius:50%;
    background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--b-100)}
  .checks.is-live > li{opacity:0;transform:translateX(26px);filter:blur(4px);
    transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),filter .5s var(--ease-out)}
  .checks.is-live > li svg{transform:scale(.4) rotate(-40deg);opacity:0;
    transition:transform .55s cubic-bezier(.34,1.56,.64,1) .18s,opacity .2s linear .18s}
  .checks.is-live > li.is-on{opacity:1;transform:none;filter:none}
  .checks.is-live > li.is-on svg{transform:none;opacity:1}

  /* --- אנחנו מגיעים כשאף אחד לא נמצא: כניסה ותנועה (העיצוב עצמו למטה) ---
     הכרטיס נכנס מטושטש מהצד ומתחדד, הטקסט שבתוכו נכנס אחריו, התג של
     האייקון שולח טבעת אור, ופס אור עובר על הזכוכית. אחרי הכניסה כל
     אייקון ממשיך לחיות לאט: הירח מתנדנד, הניצוץ מנצנץ, השמש נושמת. */
  .shift-row.is-live > .shift{opacity:0;transform:translateX(34px) scale(.95);filter:blur(6px);
    transition:opacity .55s var(--ease-out),transform .8s var(--ease-out),filter .6s var(--ease-out)}
  .shift-row.is-live > .shift.is-on{opacity:1;transform:none;filter:none}
  .shift-row.is-live > .shift > *{opacity:0;transform:translateY(10px);
    transition:opacity .45s var(--ease-out) .2s,transform .55s var(--ease-out) .2s}
  .shift-row.is-live > .shift > p{transition-delay:.32s}
  .shift-row.is-live > .shift.is-on > *{opacity:1;transform:none}
  .shift-row.is-live > .shift.is-on::after{animation:bc-night-sweep 1.3s var(--ease-io) .45s both}

  .shift-row.is-live > .shift svg{opacity:0;transition:opacity .3s linear .3s,transform .9s cubic-bezier(.34,1.56,.64,1) .3s}
  .shift-row.is-live > .shift:nth-child(1) svg{transform:rotate(-70deg) scale(.6)}
  .shift-row.is-live > .shift:nth-child(2) svg{transform:scale(.2) rotate(-120deg)}
  .shift-row.is-live > .shift:nth-child(3) svg{transform:translateY(12px) scale(.8)}
  .shift-row.is-live > .shift.is-on svg{opacity:1;transform:none;
    animation:bc-ring 1.1s var(--ease-out) .5s both}
  .shift-row.is-live > .shift.is-on:nth-child(1) svg{animation:bc-ring 1.1s var(--ease-out) .5s both,bc-sway 5s ease-in-out 1.6s infinite}
  .shift-row.is-live > .shift.is-on:nth-child(2) svg{animation:bc-ring 1.1s var(--ease-out) .5s both,bc-twinkle 3.2s ease-in-out 1.6s infinite}
  .shift-row.is-live > .shift.is-on:nth-child(3) svg{animation:bc-ring 1.1s var(--ease-out) .5s both,bc-dawn 4s ease-in-out 1.6s infinite}
  /* --- איך מתחילים: כל שלב נדלק לבד, והקו נמשך לשלב הבא --- */
  .flow-steps.is-live .fstep > :not(.fstep-n){opacity:0;transform:translateY(16px);filter:blur(4px);
    transition:opacity .5s var(--ease-out),transform .65s var(--ease-out),filter .5s var(--ease-out)}
  .flow-steps.is-live .fstep > :nth-child(3){transition-delay:.06s}
  .flow-steps.is-live .fstep > :nth-child(4){transition-delay:.12s}
  .flow-steps.is-live .fstep.is-on > :not(.fstep-n){opacity:1;transform:none;filter:none}
  .flow-steps.is-live .fstep.is-on .fstep-n{background:var(--accent);border-color:var(--accent);color:#fff;
    animation:bc-step-pop .6s var(--ease-out) both}
  .band .flow-steps.is-live .fstep.is-on .fstep-n{background:#fff;border-color:#fff;color:var(--accent-strong)}
  .flow-steps.is-live .fstep::after{transition:transform 1s var(--ease-io) .25s}
  .flow-steps.is-live .fstep.is-on::after{transform:scaleY(1)}
}

@keyframes bc-step-pop{
  0%  {transform:scale(.78);box-shadow:0 0 0 0 rgba(26,159,176,.5)}
  55% {transform:scale(1.1)}
  100%{transform:scale(1);box-shadow:0 0 0 14px rgba(26,159,176,0)}
}
@keyframes bc-night-sweep{from{transform:translateX(110%)}to{transform:translateX(-110%)}}
@keyframes bc-twinkle{
  0%,70%,100%{transform:scale(1) rotate(0)}
  80%{transform:scale(1.22) rotate(22deg)}
  90%{transform:scale(.92) rotate(40deg)}
}
/* המתג בווידג'ט הנגישות יכול להידלק באמצע הגלילה: כל מה שעוד מוסתר נחשף מיד. */
html.a11y-no-motion .is-live > *,html.a11y-no-motion .flow-steps.is-live .fstep > *,
html.a11y-no-motion .is-live svg{opacity:1!important;transform:none!important;filter:none!important}
html.a11y-no-motion .is-live > *,html.a11y-no-motion .flow-steps.is-live .fstep > *{filter:none!important}
html.a11y-no-motion .feat-media.is-live{clip-path:none!important}
html.a11y-no-motion .feat-media.is-live img{transform:none!important}

/* ============ 12. טלפון: המשמרות בסקשן הלילה ככרטיסי זכוכית ============
   מחוץ לשאילתת התנועה, כדי שגם מי שביקש שקט יקבל את אותו עיצוב.
   הכללים של .shift + .shift ב-sections.css מאפסים ריפוד לכרטיס השני
   והשלישי, ולכן כאן הבורר חזק מספיק לגבור עליהם בכל שלושת הכרטיסים. */
@media (max-width:767px){
  .band-night .shift-row{gap:.8rem}
  .band-night .shift-row > .shift{position:relative;overflow:hidden;margin:0;border:0;
    padding:1.1rem 1.15rem 1.15rem;border-radius:var(--r-lg);
    background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .band-night .shift-time{gap:.65rem;font-size:1.06rem;margin-bottom:.6rem}
  .band-night .shift-time svg{box-sizing:content-box;width:20px;height:20px;padding:9px;
    border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
  .band-night .shift::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
    transform:translateX(110%)}
}
@keyframes bc-ring{
  from{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 0 0 0 rgba(255,255,255,.5)}
  to  {box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 0 0 16px rgba(255,255,255,0)}
}
@keyframes bc-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes bc-dawn{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}