/* ============================================================================
   screens-b.css — צוות B בלבד. היקף: .s08 / .s09 / .s10 / .s11 בלבד.
   טוקני תנועה של magic.css בלבד (--t-enter/--t-scene/--stagger/--ease-enter).
   Scoped strictly under our four screens. Timing only via magic.css tokens.

   ⚠️ מדוע --i גובר על magic.css (HE): הבסיס .lines .st נושא מדרגות nth-child
   שכוונו למסך 1 (1250–2750ms). הסלקטור הממודר שלנו (.sNN .lines .st) חזק יותר
   בעמודת ה-class, ולכן גובר על ה-nth-child והמדרגה נשלטת ב---i בלבד.
   Why --i wins: our .sNN .lines .st beats magic.css's .lines .st:nth-child on
   the class column, so the s01-tuned per-line delays don't leak in.
   ============================================================================ */

/* ═══════════ כותרת אחידה לכל ארבעת המסכים ═══════════
   שימוש חוזר ב-.env-title (טיפוגרפיה של magic.css) עם כניסה בטוקנים. */
.s08 .s-title,
.s09 .s-title,
.s10 .s-title,
.s11 .s-title {
  opacity: 0;
  animation: riseIn var(--t-enter) 0ms var(--ease-enter) both;
}

/* ═══════════ גוף הטקסט — מדרגת כניסה בטוקן --stagger ═══════════
   s08/s09/s11: עלייה רכה זהה. s10 מקבל טיפול קולנועי נפרד למטה. */
.s08 .lines .st,
.s09 .lines .st,
.s11 .lines .st {
  opacity: 0;
  animation: riseIn var(--t-enter) calc(var(--stagger) * var(--i, 0)) var(--ease-enter) both;
}

/* ═══════════ מסך 8 — ההדגשה של השורה האחרונה ═══════════
   "דרך חזרה הביתה לעצמך" — ברוח .promise/.crystal-says: גדולה במעט, בגוון
   הקריסטל שנבחר, עם הילה. מהדהד את הדרך שהיא בחרה במסך 4. */
.s08 .lines .st.home {
  margin-top: calc(var(--air) * 1.6);
  font-size: calc(var(--fs-body) * 1.12);
  letter-spacing: .015em;
  color: var(--c-air);
  -webkit-text-stroke: .3px currentColor;
  text-shadow: 0 1px 2px rgba(15,10,26,.95), 0 0 12px var(--c-glow),
               0 0 26px var(--c-glow);
}

/* ═══════════ מסך 9 — מבנה, רשימת "מחכה לך", שדה טלפון ═══════════ */
/* מרכוז פריטי הסטאק כדי ששדה הטלפון (רוחב מפורש) יישאר במרכז ולא יימתח */
.s09 .text-block { justify-items: center; gap: calc(var(--air) * 2.2); }
.s09 .lines { width: 100%; gap: calc(var(--air) * 1.7); }
.s09 .stack { padding-bottom: clamp(48px, 12vh, 120px); }   /* הרמת הכפתור מהקצה */

/* תוויות מובילות ("מחכה לך:", שאלת הטלפון) — קצת מודגשות, אוויר מעל */
.s09 .lines .st.lead-in {
  margin-top: calc(var(--air) * 1.4);
  font-size: calc(var(--fs-body) * 1.02);
  color: #FDF4E8;
  letter-spacing: .02em;
  text-shadow: var(--halo-soft);
}
.s09 .lines .st.ask { color: var(--gold-hi); }   /* שאלת הטלפון — הזמנה זהובה רכה */

/* פריטי "מחכה לך" — רשימה קומפקטית וזורמת */
.s09 .lines .st.item {
  font-size: max(15.2px, calc(var(--fs-body) * .98));
  max-width: 34ch; margin-inline: auto;
}

/* שדה הטלפון — כניסה בטוקנים (גובר על הבסיס riseIn 900ms 1000ms של magic.css) */
.s09 .field-wrap {
  margin-top: calc(var(--air) * 1.2);
  opacity: 0;
  animation: riseIn var(--t-enter) calc(var(--stagger) * var(--i, 9)) var(--ease-enter) both;
}

/* ═══════════ מסך 10 — הרגעים הצפים (הכי קולנועי) ═══════════
   רגעים עולים אחד-אחד עם סחף אלכסוני עדין; opacity+transform בלבד. */
.s10 .lines.moments { gap: calc(var(--air) * 2.4); }
.s10 .lines .st.moment {
  opacity: 0;
  font-size: calc(var(--fs-body) * 1.04);
  max-width: 30ch; margin-inline: auto;
  animation: bMomentFloat var(--t-scene) calc(var(--stagger) * 4 * var(--i, 0))
             var(--ease-enter) both;
}
/* שורת הפאנץ' — ביט של הדגשה אחרי שכל הרגעים נחתו (‎--stagger*20 ≈ 1600ms) */
.s10 .lines .st.punch {
  margin-top: calc(var(--air) * 2);
  font-size: calc(var(--fs-body) * 1.2);
  letter-spacing: .01em;
  color: var(--c-air);
  -webkit-text-stroke: .3px currentColor;
  text-shadow: 0 1px 2px rgba(15,10,26,.95), 0 0 14px var(--c-glow), 0 0 30px var(--c-glow);
  opacity: 0;
  animation: bPunchBloom var(--t-scene) calc(var(--stagger) * 20) var(--ease-enter) both;
}
/* הכפתור נחשף אחרון — נשאר מתחת ל-~2.5ש' (‎--stagger*27 ≈ 2160ms) */
.s10 .dust-btn {
  animation: riseIn var(--t-enter) calc(var(--stagger) * 27) var(--ease-enter) both;
}
@keyframes bMomentFloat {
  from { opacity: 0; transform: translate(6px, 18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bPunchBloom {
  0%   { opacity: 0; transform: translateY(10px) scale(.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ═══════════ הכפתור — עיכוב כניסה בטוקנים לכל מסך ═══════════
   ⚠️ הבסיס .dust-btn ב-magic.css הוא riseIn 950ms 3050ms (מכוון למסך 1).
   בלי override הכפתור היה מופיע אחרי 3 שניות בכל המסכים שלנו. כל מסך
   מקבל עיכוב שמתאים לכמות התוכן שלו. s10 מוגדר לעיל.
   Base .dust-btn is delayed 3050ms for s01; without this override our CTAs
   would only appear after 3s. Each screen gets a content-appropriate delay. */
.s08 .dust-btn { animation: riseIn var(--t-enter) calc(var(--stagger) * 8)  var(--ease-enter) both; }
.s09 .dust-btn { animation: riseIn var(--t-enter) calc(var(--stagger) * 11) var(--ease-enter) both; }
.s11 .dust-btn { animation: riseIn var(--t-enter) calc(var(--stagger) * 7)  var(--ease-enter) both; }

/* ═══════════ מסך 11 — גוון מכתב שקט ═══════════ */
.s11 .letter-quiet .lines { gap: calc(var(--air) * 2.2); }

/* ═══════════ רשת ביטחון למצב QA (?qa) ═══════════
   ⚠️ magic.css כבר מכסה .lines .st / .env-title / .dust-btn / .field-wrap,
   אך אנו מוודאים במפורש שכל אלמנט חושף-אנימציה במסכים שלנו נראה בצילום־בקרה,
   כדי שלא נאשר בטעות מסך "ריק". field-note נשאר מוסתר בכוונה (לחישה בלבד).
   Belt-and-suspenders: guarantee every animated element is visible in QA. */
html.qa .s08 .s-title, html.qa .s08 .lines .st, html.qa .s08 .dust-btn,
html.qa .s09 .s-title, html.qa .s09 .lines .st, html.qa .s09 .field-wrap, html.qa .s09 .dust-btn,
html.qa .s10 .s-title, html.qa .s10 .lines .st, html.qa .s10 .dust-btn,
html.qa .s11 .s-title, html.qa .s11 .lines .st, html.qa .s11 .dust-btn {
  opacity: 1 !important; animation: none !important; transform: none !important;
}
html.qa .s09 .field-note { opacity: 0 !important; }