/* motion.css — שכבת התנועה המשותפת לדפי הנחיתה.
 *
 * **חולץ מ-`qr.html`, לא נכתב מחדש.** הדף ההוא עבר סבבי
 *    מדידה שלמים — מסות, טווחים, ומדיניות הפחתת-תנועה — והוא
 *    האמת. דף אח שממציא תנועה משלו נראה כמו דף אחר, גם אם הוא
 *    יפה. ⇒ אותן מחלקות, אותם טווחים, אותם שמות.
 * `qr.html` אינו נוגע בזה: העותק שלו נשאר אצלו בתוך `<style>`,
 *    כי הוא מאושר וגידור, ואין סיבה לסכן אותו בשביל ניקיון.
 *    הקובץ הזה משרת את הדפים החדשים בלבד.
 *
 * הטוקנים (`--rv-lead`, `--dur`, `--ease`) יושבים ב-`tokens.css`.
 */

/* ============================================================
   1 · סרגל התקדמות
   ============================================================ */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 2px; z-index: 60;
  background: var(--accent); transform-origin: right; transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: sdaProgress linear both; animation-timeline: scroll(root block); }
    @keyframes sdaProgress { to { transform: scaleX(1); } }
  }
}

/* ============================================================
   2 · עלייה לתוך המסך
   ============================================================
   שלוש מסות, לא אחת: כותרת עולה מעט, תוכן תומך יותר, ומשטח
   (פאנל, תמונה, טבלה) הכי הרבה — כי הוא הכבד ביותר על המסך.

   שני מסלולים, ובכוונה:
     · `@supports (animation-timeline: view())` ⇒ המסלול הילידי.
       רץ ב-compositor, בלי מאזין גלילה ובלי rAF.
     · בלעדיו ⇒ מסלול ה-JS: `IntersectionObserver` מוסיף `is-in`.
   שניהם חיים תחת `.js`, כדי שבלי JavaScript התוכן פשוט **מוצג**
   ולא נשאר שקוף לנצח. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv-lead    { --sdaFrom: var(--rv-lead); }
  .js .rv-support { --sdaFrom: var(--rv-support); }
  .js .rv-surface { --sdaFrom: var(--rv-surface); }
  .js .rv-lead, .js .rv-support, .js .rv-surface {
    opacity: 0; transform: var(--sdaFrom);
    transition: opacity var(--dur-lead) var(--ease), transform var(--dur) var(--ease);
  }
  .js .rv-lead.is-in, .js .rv-support.is-in, .js .rv-surface.is-in {
    opacity: 1; transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .rv-lead, .js .rv-support, .js .rv-surface {
      transition: none;                       /* מסלול ה-JS מנוטרל */
      animation: sdaRise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
    .js .rv-support { animation-range: entry 8% cover 28%; }
    .js .rv-surface { animation-range: entry 10% cover 32%; }
    @keyframes sdaRise {
      from { opacity: 0; transform: var(--sdaFrom, translateY(12px)); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ============================================================
   3 · קו-החיבור בין הרצועות
   ============================================================
   `timeline-scope` הוא מה שמאפשר לקו להיות מונע על ידי
      הנראוּת של **ההורה** שלו, ולא של עצמו. בלי זה הקו נמדד
      מול עצמו, וקו בגובה 90px נגמר לפני שהתחיל. */
.thread {
  position: relative; inline-size: 1px; background: var(--border);
  justify-self: center; block-size: 100%; min-block-size: 90px;
}
.thread::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(var(--accent), transparent);
  transform-origin: top; transform: scaleY(0);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .threaded { timeline-scope: --sdaBand; view-timeline-name: --sdaBand; view-timeline-axis: block; }
    .thread::after {
      transition: none;
      animation: sdaDraw linear both;
      animation-timeline: --sdaBand;
      animation-range: entry 0% exit 100%;
    }
    @keyframes sdaDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
.js .threaded.is-in .thread::after { transform: scaleY(1); transition: transform var(--dur-resolve) var(--ease-scene); }

/* ============================================================
   4 · הפחתת תנועה
   ============================================================
   **«הפחתת תנועה» אינה «בלי כלום».** מי שמבקש אותה מבקש
      שלא יזוז — לא שהעמוד יתפרק. הפריסה, הצבע והמבנה נשארים
      בדיוק כפי שהם; רק ההיסט והשינוי-קנה-מידה יורדים. */
@media (prefers-reduced-motion: reduce) {
  .js .rv-lead, .js .rv-support, .js .rv-surface {
    opacity: 1; transform: none; transition: none; animation: none;
  }
  .thread::after { transform: scaleY(1); animation: none; }
  .progress { transform: scaleX(0); animation: none; }
  * { scroll-behavior: auto !important; }
}