/* ===== scroll.css – תנועה עדינה בגלילה (חיים מחשבים) =====
   הכול מופעל רק כש-scroll.js מוסיף את המחלקה sc-on ל-<html>.
   בלי JavaScript, או במצב "הפחתת תנועה", הדף נראה בדיוק כמו בלי הקובץ הזה.
   בהדר נוגע רק בטלפון: מקטין אותו בגלילה. */

@property --sc-ring{syntax:"<number>";inherits:false;initial-value:0}

/* --- כניסה עדינה של בלוקים --- */
.sc-on .sc-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--sc-i,0) * 90ms)}
.sc-on .sc-reveal.sc-in{opacity:1;transform:none}
.sc-on .sc-now{transition:none!important}

/* --- פתיחת הדף: הטקסט של ה-hero מתיישב, התמונה "נוחתת" בעדינות --- */
.sc-on main .hero .hero-img{overflow:hidden;border-radius:12px}
.sc-on main .hero .hero-img img{animation:sc-settle 1.4s cubic-bezier(.22,.61,.36,1) both}
.sc-on main .hero > h1,.sc-on main .hero > .lead{animation:sc-rise .8s cubic-bezier(.22,.61,.36,1) both}
.sc-on main .hero > .lead{animation-delay:.12s}
@keyframes sc-settle{from{transform:scale(1.035)}to{transform:none}}
@keyframes sc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- שלבי העבודה: העיגול הממוספר נדלק כשהשלב נכנס --- */
.sc-on main ol.steps li.sc-reveal::before{transform:scale(.6);background:var(--rule);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),background-color .5s;transition-delay:inherit}
.sc-on main ol.steps li.sc-in::before{transform:none;background:var(--green)}
/* עם קו: קו ירוק מתמלא בין העיגולים, וכל עיגול נדלק רק כשהקו מגיע אליו */
.sc-on main ol.steps.sc-line{position:relative}
.sc-on main ol.steps.sc-line li{position:relative;z-index:1}
.sc-on main ol.steps.sc-line li::before{transition-property:transform,background-color,color,box-shadow}
.sc-on main ol.steps.sc-line li.sc-in::before{background:#fff;color:var(--green);box-shadow:inset 0 0 0 2px var(--rule);transition-delay:0s}
.sc-on main ol.steps.sc-line li.sc-in.sc-lit::before{background:var(--green);color:#fff;box-shadow:inset 0 0 0 2px var(--green)}
.sc-on main ol.steps.sc-line::after{content:"";position:absolute;inset-inline-start:17px;width:2px;
  top:var(--sc-l-top,18px);height:var(--sc-l-h,0);border-radius:2px;pointer-events:none;
  background:linear-gradient(var(--green) calc(var(--sc-fill,0) * 100%),var(--rule) 0)}

/* --- פס "למה לבחור": הקו הכתום נמתח, והמספר סופר עד 30 --- */
.sc-on .why > div.sc-reveal{border-inline-start-color:transparent;transition-property:opacity,transform,border-color}
.sc-on .why > div.sc-in{border-inline-start-color:var(--orange)}
.sc-count{font-variant-numeric:tabular-nums}

/* --- רגע השיא: ביקורות עם טבעת כתומה סביב הציון --- */
.sc-on .review-score{position:relative}
.sc-on .review-score::after{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--orange) calc(var(--sc-ring) * 360deg),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
/* טלפון / בלי עצירה: הטבעת נסגרת אחרי שהביקורת נכנסה */
.sc-on .review.sc-reveal .review-score::after{transition:--sc-ring 1s cubic-bezier(.45,0,.2,1);
  transition-delay:calc(var(--sc-i,0) * 90ms + .35s)}
.sc-on .review.sc-in .review-score::after{--sc-ring:1}
/* ביקורות שמתחת ל"עוד N ביקורות" – הטבעת כבר סגורה */
.sc-on .more-reviews .review-score::after{--sc-ring:1}

/* מחשב: האזור נעצר והביקורות נכנסות אחת אחת לפי הגלילה */
.sc-on .sc-pinned .sc-pin-inner{position:sticky;top:var(--sc-top,140px)}
.sc-on .sc-pinned .reviews-grid > .review{opacity:var(--sc-t,0);transform:translateY(calc((1 - var(--sc-t,0)) * 28px));will-change:opacity,transform}
.sc-on .sc-pinned .reviews-grid > .review .review-score::after{--sc-ring:var(--sc-r,0);transition:none}
.sc-on .sc-pinned .reviews-grid > .review{box-shadow:0 0 0 rgba(31,91,58,0);transition:box-shadow .4s}
.sc-on .sc-pinned .reviews-grid > .review.sc-done{box-shadow:0 8px 24px -14px rgba(31,91,58,.35)}

/* טלפון: הביקורות בשורה אחת שמחליקים הצידה, עם נקודות מתחת */
.sc-dots{display:none}
@media (max-width:760px){
  .sc-on .reviews-grid.sc-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;margin-inline:-20px;padding:4px 20px 8px;scroll-padding-inline:20px}
  .sc-on .reviews-grid.sc-car::-webkit-scrollbar{display:none}
  .sc-on .reviews-grid.sc-car > .review{flex:0 0 86%;scroll-snap-align:center}
  .sc-on .sc-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
  .sc-dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .sc-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rule);transition:background-color .25s,transform .25s}
  .sc-dots button.sc-cur::before{background:var(--orange);transform:scale(1.3)}
  .sc-dots button:focus-visible{outline:3px solid var(--orange);outline-offset:-4px;border-radius:50%}
}

/* --- טלפון: ההדר מתכווץ בגלילה – לוגו קטן, כפתורי ההדר יורדים (הבר התחתון מחליף אותם) --- */
@media (max-width:760px){
  .sc-on .site-header .header-top{transition:padding .3s cubic-bezier(.22,.61,.36,1)}
  .sc-on .site-header .logo img{transition:height .3s cubic-bezier(.22,.61,.36,1)}
  .sc-on .site-header .header-actions{max-height:120px;overflow:hidden;padding:3px;margin:-3px;
    transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .2s,visibility 0s}
  .sc-on .site-header.sc-compact .header-top{padding-block:6px;row-gap:0}
  .sc-on .site-header.sc-compact .logo img{height:34px}
  .sc-on .site-header.sc-compact .header-actions{max-height:0;opacity:0;visibility:hidden;
    transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .2s,visibility 0s .3s}
}

/* --- טלפון: בר התקשרו/וואטסאפ יורד כשכפתורי הדף על המסך, ועולה כשהם נגללים החוצה --- */
.sc-on .mobile-bar{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.sc-on .mobile-bar.sc-hide{transform:translateY(110%)}

/* --- פוסט בבלוג: פס התקדמות קריאה כתום צמוד לתחתית ההדר (מתמלא מימין לשמאל) --- */
.sc-read{display:none}
.sc-on .sc-read{display:block;position:absolute;inset-inline:0;bottom:-6px;height:3px;pointer-events:none;
  background:var(--orange);transform:scaleX(var(--sc-p,0));transform-origin:right}

/* --- פוסט בבלוג: תוכן עניינים --- */
.sc-toc{margin:4px 0 24px;padding:14px 18px;background:var(--bench,#e9efeb);border-radius:12px;border-inline-start:3px solid var(--green);max-width:68ch}
.sc-toc-title{margin:0 0 4px;font-weight:700;color:var(--green-dark);font-size:16px}
.sc-toc ol{margin:0;padding-inline-start:22px;font-size:16.5px}
.sc-toc li{margin:3px 0}
.sc-toc a{color:var(--green-dark);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.sc-toc a:hover{color:var(--orange-dark);border-bottom-color:var(--orange)}
.sc-toc a.sc-cur{color:var(--orange-dark);font-weight:600}
.sc-toc,.sc-on .post h2{scroll-margin-top:calc(var(--sc-hh,120px) + 16px)}

/* --- כפתור חזרה למעלה --- */
.sc-top{display:none}
.sc-on .sc-top{display:grid;place-items:center;position:fixed;inset-inline-end:16px;bottom:20px;z-index:25;width:44px;height:44px;
  border-radius:50%;border:0;padding:0;cursor:pointer;background:#fff;color:var(--green-dark);
  box-shadow:0 0 0 1px var(--rule),0 6px 18px -8px rgba(24,38,30,.5);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,transform .3s,visibility 0s .3s,bottom .35s cubic-bezier(.22,.61,.36,1)}
.sc-on .sc-top.sc-show{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s,transform .3s,visibility 0s,bottom .35s cubic-bezier(.22,.61,.36,1)}
.sc-on .sc-top:hover{color:var(--orange-dark)}
.sc-on .sc-top:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sc-top svg{width:22px;height:22px}
@media (max-width:760px){
  .sc-on .sc-top{bottom:70px}
  .sc-on .mobile-bar.sc-hide ~ .sc-top{bottom:16px}
}

/* הדפסה ו"הפחתת תנועה": הכול גלוי, בלי תנועה */
@media print{.sc-on .sc-reveal,.sc-on .sc-pinned .reviews-grid > .review{opacity:1!important;transform:none!important}
  .sc-on main ol.steps.sc-line li::before{background:var(--green)!important;color:#fff!important;box-shadow:none!important}
  .sc-on main ol.steps.sc-line::after,.sc-read,.sc-top,.sc-dots{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .sc-on .sc-reveal,.sc-on .sc-pinned .reviews-grid > .review{opacity:1!important;transform:none!important;transition:none!important}
  .sc-on main .hero *{animation:none!important}
}