/* scroll-motion.css · TASK-scroll-motion-home + TASK-motion-types · תנועת גלילה עדינה.
   כל הכללים תחת html.sm-on, ש-scroll-motion.js מוסיף רק כשהתנועה מותרת (בלי prefers-reduced-motion, בלי "עצירת תנועה" בסרגל הנגישות).
   בלי JS / עם תנועה כבויה: אין כלל כאן שמסתיר או מזיז משהו.

   ===== משתני כיוונון =====
   --sm-rise     מרחק הכניסה של סוג א (px). מובייל: חצי. מתחת ל-480px: רק opacity.
   --sm-dur      משך כולל של סוג א (שלב 1 תמיד 42% מהמשך, כלומר 0.4s מתוך 0.95s).
   --sm-stagger  הפרש בין כרטיס לכרטיס בסוג א (מחזור של עד 6).
   --sm-a-on / --sm-b-on / --sm-c-on / --sm-l-on   0 = כיבוי הסוג (נקרא ב-JS בטעינה). אפשר גם class על <html>: sm-a-off / sm-b-off / sm-c-off / sm-l-off.
       א = הצפה והתייצבות · ב = ריחוף עומק (פרלקס) · ג = התקרבות מטושטשת · l = כניסה קלה בקטלוגים (/evenings, store).

   עוצמת הפרלקס לכל אזור: משתנה אחד --sm-amp (מכפיל; ברירת מחדל 1). 0 = בלי פרלקס (נשארת רק הכניסה). 2 = כפול.
   כיבוי מלא של אזור (גם כניסה): data-sm-off על ה-section, או הסרת ה-class sm-on. */
:root {
  --sm-rise: 28px;
  --sm-dur: .95s;
  --sm-stagger: 70ms;
  --sm-a-on: 1;
  --sm-b-on: 1;
  --sm-c-on: 1;
  --sm-l-on: 1;
  --sm-c-scale: .96;
  --sm-c-blur: 6px;
  --sm-c-dur: .9s;
  --sm-l-rise: 12px;
  --sm-l-dur: .4s;
  --sm-l-stagger: 60ms;
}
@media (max-width:899px){
  :root { --sm-rise: 14px; --sm-c-scale: .98; --sm-c-blur: 3px; --sm-l-rise: 6px; }
}

#start   { --sm-amp: 1; }   /* מאיפה מתחילים: 4 כרטיסים + תמונת רקע */
#board   { --sm-amp: 1; }   /* לוח אירועים */
#homeT   { --sm-amp: 1; }   /* עדויות: עמודות הקיר */
#wall    { --sm-amp: 1; }   /* דף העדויות: עמודות הקיר (גלילה אינסופית) */
#writing { --sm-amp: 1; }   /* מאמרים */
#podcast { --sm-amp: 1; }   /* פודקאסט: כותרת + עטיפת ה-iframe */

/* ===== סוג ב: ריחוף עומק ===== */
html.sm-on [data-sm]{
  transform: translate3d(0, var(--ty, 0px), 0);
}
html.sm-on [data-sm].sm-act{ will-change: transform; }

/* כניסה פשוטה (עדויות, מאמרים): opacity + מאפיין translate (נפרד מה-transform של הפרלקס, כדי שלא יתנגשו) */
html.sm-on [data-sm]:not(.sm-bg):not([data-sm-t]){
  opacity: 0;
  translate: 0 calc(26px * var(--sm-ek, 1));
}
html.sm-on [data-sm].sm-in:not(.sm-bg):not([data-sm-t]){
  opacity: 1;
  translate: 0 0;
  transition: opacity .7s ease var(--sm-delay, 0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--sm-delay, 0s);
}
html.sm-on [data-sm].sm-in:not(.sm-bg):not(.sm-act):not([data-sm-t]){ transition-delay: 0s; }

/* ===== כניסות מבוססות keyframes (סוגים א, ג, l) =====
   transition גובר על animation בסדר העדיפויות, ולכן בזמן הכניסה אין transition על האלמנט (גם לא של ריחוף העכבר) */
html.sm-on [data-sm-t].sm-in:not(.sm-done){ transition: none !important; }

/* סוג א: הצפה והתייצבות (שני שלבים: מתבהר כשהוא עדיין נמוך, ואז מתרומם למקומו בנחיתה רכה) */
@keyframes sm-a {
  0%    { opacity: 0; translate: 0 var(--sm-rise); animation-timing-function: linear; }
  42.1% { opacity: 1; translate: 0 calc(var(--sm-rise) * .857); animation-timing-function: cubic-bezier(.2,.8,.2,1.12); }
  100%  { opacity: 1; translate: 0 0; }
}
html.sm-on:not(.sm-a-off) [data-sm-t="a"]:not(.sm-in){ opacity: 0; translate: 0 var(--sm-rise); }
html.sm-on:not(.sm-a-off) [data-sm-t="a"].sm-in:not(.sm-done){
  animation: sm-a var(--sm-dur) both;
  animation-delay: calc(var(--sm-i, 0) * var(--sm-stagger) + var(--sm-extra, 0s));
  will-change: opacity, translate;
}
html.sm-on:not(.sm-a-off) [data-sm-t="a"].sm-act.sm-in:not(.sm-done){ will-change: transform, opacity, translate; }

/* סוג ג: התקרבות מטושטשת. ה-filter קיים רק בזמן הכניסה (fill backwards, ואחריה הוא מוסר) */
@keyframes sm-c {
  from { opacity: 0; scale: var(--sm-c-scale); filter: blur(var(--sm-c-blur)); }
  to   { opacity: 1; scale: 1; filter: blur(0); }
}
html.sm-on:not(.sm-c-off) [data-sm-t="c"]:not(.sm-in){ opacity: 0; }
html.sm-on:not(.sm-c-off) [data-sm-t="c"].sm-in:not(.sm-done){
  animation: sm-c var(--sm-c-dur) cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay: var(--sm-extra, 0s);
  will-change: opacity, scale, filter;
}
html.sm-on:not(.sm-c-off) [data-sm-t="c"].sm-act.sm-in:not(.sm-done){ will-change: transform, opacity, scale, filter; }

/* כניסה קלה בדפי הקטלוג: רק opacity ועלייה קטנה, בלי פרלקס ובלי טשטוש */
@keyframes sm-l {
  from { opacity: 0; translate: 0 var(--sm-l-rise); }
  to   { opacity: 1; translate: 0 0; }
}
html.sm-on:not(.sm-l-off) [data-sm-t="l"]:not(.sm-in){ opacity: 0; translate: 0 var(--sm-l-rise); }
html.sm-on:not(.sm-l-off) [data-sm-t="l"].sm-in:not(.sm-done){
  animation: sm-l var(--sm-l-dur) ease-out both;
  animation-delay: calc(var(--sm-i, 0) * var(--sm-l-stagger));
  will-change: opacity, translate;
}

/* מסך צר מאוד: רק opacity (סוג ג בלי blur, סוג א וכניסה קלה בלי מרחק) */
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width:479px){
  html.sm-on [data-sm-t]:not(.sm-in){ translate: none !important; }
  html.sm-on:not(.sm-a-off) [data-sm-t="a"].sm-in:not(.sm-done),
  html.sm-on:not(.sm-c-off) [data-sm-t="c"].sm-in:not(.sm-done),
  html.sm-on:not(.sm-l-off) [data-sm-t="l"].sm-in:not(.sm-done){
    animation-name: sm-fade;
    animation-duration: .4s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    will-change: opacity;
  }
}

/* מי שביקש כיבוי לאזור */
html.sm-on [data-sm-off] [data-sm], html.sm-on [data-sm-off] [data-sm-t]{ opacity:1; translate:none; scale:none; transform:none; transition:none; animation:none; }

/* תמונת הרקע: מורחבת קצת למעלה ולמטה כדי שההיסט לא יחשוף קצה (ה-section ב-overflow:hidden) */
html.sm-on .start-dark .start-bg{ top: -44px; bottom: -44px; height: auto; }
@media (max-width:899px){
  html.sm-on .start-dark .start-bg,html.sm-on[lang="en"] .start-dark .start-bg{ top: -24px; bottom: auto; height: calc(44% + 24px); }
}

@media (prefers-reduced-motion: reduce), print{
  html.sm-on [data-sm], html.sm-on [data-sm-t]{ opacity:1 !important; translate:none !important; scale:none !important; filter:none !important; transform:none !important; transition:none !important; animation:none !important; will-change:auto !important; }
}