/* ═══════════════════════════════════════════════════════════
   motion.css — חשיפה בגלילה, מעברי הסרט, נפילות graceful
   ═══════════════════════════════════════════════════════════ */

/* ── מסלול הגלילה הארוך של הבמה ──
   .film-long נקבע ב-inline script שבראש המסמך, לפני הציור הראשון,
   כדי שלא תיווצר קפיצת פריסה (CLS) כשהמסלול נכנס לתוקף.
   2.4 מסכים במובייל, 3 מסכים במחשב, בנוסף לגובה הבמה עצמה. */
.film-long .film{ height:calc(100dvh + 450vh); }
@media (min-width:900px){
  .film-long .film{ height:calc(100dvh + 560vh); }
}
/* דפדפן בלי dvh — נפילה ל-svh (הבמה כבר מוגדרת עם שני הערכים). */
@supports not (height: 100dvh){
  .film-long .film{ height:calc(100svh + 450vh); }
  @media (min-width:900px){
    .film-long .film{ height:calc(100svh + 560vh); }
  }
}

/* ── מעברי כתוביות הסרט ──
   רק כשהמנוע פעיל (.is-live). אחרת נשארת כתובית אחת סטטית,
   כדי שלא יוצגו ארבעה מסכים ריקים. */
.film__caption{ transition:opacity 420ms var(--ease); }

.film:not(.is-live) .film__caption[data-cap="0"]{
  visibility:visible;
  opacity:1;
}
.film:not(.is-live) .film__rail,
.film:not(.is-live) .film__hint{ display:none; }
/* בלי JS כלל: הפוסטר לבדו, בלי שכבת קנבס ריקה עליו. */
html:not(.js) .film__canvas{ display:none; }
html:not(.js) .film{ height:auto; }
html:not(.js) .film__stage{ position:static; }
html:not(.js) .film__poster{ transition:none; }

/* ── חשיפת מקטעים בגלילה ── */
.reveal{
  opacity:0;
  transform:translate3d(0, 22px, 0);
  transition:opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
/* בלי JS, או כשהמשתמש ביקש תנועה מופחתת — הכל גלוי מיד. */
html:not(.js) .reveal,
html[data-motion="reduced"] .reveal{
  opacity:1;
  transform:none;
  transition:none;
}

/* ── פרלקסה עדינה של המנות (מונעת ע"י motion.js, לא CSS) ── */
.dish picture{ display:block; will-change:transform; }

/* ── כשהמנוע פעיל: כתובית שנייה ומעלה ── */
.film.is-live .film__caption{ transition-duration:460ms; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .film-long .film{ height:auto; }
  .film__stage{ position:static; }
  .film__poster{ transition:none; }
}