/* ============================================================================
   הלב · הדופק והפתיחה · #355, 17.9.2026
   ============================================================================

   שני דברים יושבים כאן, ושניהם על אותו לב אחד:
     1. **הדופק** — הלב בלוגו פועם תמיד, בקצב ‎--beat‎.
     2. **הפתיחה** — מסך שחור עם לב פועם במרכזו, שזוחל אל מקומו בלוגו.

   ⚠ **תלות מוצהרת: ‎shared/motion.css‎ חייב להיטען לפני הקובץ הזה.** שם
     מוגדר ‎--beat‎ (1500ms) ו-‎--beat-ease‎ — קצב הלב שאיתי אישר ב-#338.
     בלעדיו ‎animation-duration: var(--beat)‎ אינו נפתר, ההנפשה **אינה
     רצה כלל**, ואיש אינו רואה שגיאה. 🔴 לכן הדבר הזה אינו נשאר "לזכור":
     ‎heart.test.js‎ אוכף שכל עמוד שטוען את הקובץ הזה טוען גם את motion.css.
   ⚠ **ואין כאן משך דופק משלי.** מספר שני שמתאר את אותו קצב סוטה מהראשון
     תוך שבוע. ‎var(--beat)‎ בלבד.

   ══ צורת הלב ═══════════════════════════════════════════════════════════
   🔴 **מה איתי צילם באייפון שלו (17.9.2026), והוא חמור ממה שדיווח.** הוא
   תיאר לב שנראה אחר בין שני הטלפונים שלו. בצילום נראה משהו נוסף: באותו
   מסך עצמו, הלב בלוגו הוא **לב האמוג'י המבריק והאדום של אפל**, וסנטימטרים
   מתחתיו הלבבות שליד מילות התפריט הם **לב ורוד ושטוח מהציור שלנו**. שני
   לבבות שונים במסך אחד. 🔑 הסיבה: ‎U+2764‎ אינו גליף שלנו אלא של הפלטפורמה,
   ולכן אפל מציירת את שלה וגוגל את שלה.

   ⚠ **ולכן הצורה לא נבחרה כאן — היא כבר קיימת.** הלב שאיתי אישר ב-#338
   יושב ב-‎shared/tissue-button.css‎ כמסכה בשם ‎--tb-heart‎. הלוגו עבר
   לצורה **הזו**, תו בתו.

   🔴 **למה יש כאן עותק שני של אותה מחרוזת, ולמה זה בסדר בדיוק פעם אחת.**
   סוכן אחר עורך את ‎shared/tissue-button.css‎ באותו רגע, ולכן אסור להזיז
   משם את ההגדרה. העותק כאן הוא **התאום המוצהר** שלה: ‎heart.test.js‎ משווה
   את שתי המחרוזות **תו בתו** ומאדים אם מישהו ערך אחת בלי השנייה — וגם
   משווה אליהן את ה-‎d‎ שבכל ‎.logo-heart‎ בכל עמוד. ⚠ זה מה שהופך את
   האיחוד של שתי ההגדרות לאחת, אחרי מיזוג שני הענפים, לפעולה בטוחה.
   🔑 ובלי הבדיקה הזו — כך בדיוק נולד הפגם הזה מלכתחילה.
   ========================================================================= */
:root {
  --sfg-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3 3.95 13.4a5.15 5.15 0 0 1 0-7.3 5.15 5.15 0 0 1 7.3 0L12 6.85l.75-.75a5.15 5.15 0 0 1 7.3 0 5.15 5.15 0 0 1 0 7.3Z'/%3E%3C/svg%3E");
}

/* ══ 1 · הדופק ═══════════════════════════════════════════════════════════
   🔑 **לאב-דאב, ולא פעימה אחת.** מכה חזקה, מכה קטנה אחריה, ומנוחה ארוכה —
   אותו דפוס שאושר ב-#338 לכפתורי הטקסט, ובאותו ‎--beat‎.

   🔴 **הדופק אינו רשאי להזיז אף אות, ולא בפיקסל אחד.** לכן הוא מונפש
   במאפיין ‎scale‎ **העצמאי** ולא ב-‎transform‎:
     · ‎scale‎ אינו מאפיין פריסה — אף שכן אינו נמדד מחדש בגללו;
     · הוא מורכב עם ה-‎transform‎ הסטטי של ‎.logo-heart‎ (ההרמה) במקום
       לדרוס אותו, וכך ההרמה שורדת את ההנפשה;
     · ומקור הקנה הוא מרכז התיבה של ‎.logo-heart‎ עצמו — כלומר מרכז הלב.
   ⚠ **נמדד** ב-‎heart.test.js‎: המלבנים של ‎.logo-s‎ ושל ‎.logo-text‎ זהים
     בפריים הקטן ביותר ובגדול ביותר של הפעימה, ו-‎.logo‎ כולו שומר על רוחבו.

   ⚠ **המנוחה מתחילה ב-34% ונמשכת עד הסוף.** זה לא רק אסתטי: הפתיחה
     עוצרת את הדופק של הלב המרכזי בדיוק לפני הטיסה (ב-560ms מתוך 1500,
     כלומר 37.3%), ולכן היא חייבת ליפול **בתוך** אזור המנוחה — אחרת
     עצירת ההנפשה הייתה קופצת בקנה מידה. */
@keyframes sfgHeartBeat {
  0%   { scale: 1; }
  8%   { scale: 1.14; }
  17%  { scale: 1; }
  25%  { scale: 1.08; }
  34%  { scale: 1; }
  100% { scale: 1; }
}
.logo-heart { animation: sfgHeartBeat var(--beat) var(--beat-ease) infinite; }

/* ══ 2 · הפתיחה ══════════════════════════════════════════════════════════
   🔴 **הכלל שאינו נתון למשא ומתן: הדף אינו נשאר ריק אף פעם.** כל מה
   שכאן תלוי ב-‎html[data-open]‎ ובו בלבד, והמאפיין הזה נקבע **רק** ע"י
   ‎shared/heart-arm.js‎ — בדיוק הדפוס של ‎shared/motion-arm.js‎. לכן:
     · אין JavaScript, או שהוא חסום, או שזרק → אין מאפיין → אין וילון.
     · ‎prefers-reduced-motion‎ → הסקריפט אינו מחמש כלל → האתר פשוט מופיע.
     · הסקריפט חימש אבל ‎shared/heart.js‎ לא הגיע → הוא מפרק את עצמו
       ב-‎DOMContentLoaded‎ ובגיבוי שעון.
   ⚠ **נבדק בפועל עם JavaScript מכובה** — לא בהיגיון (‎heart.test.js‎).

   ⚠ **הווילון הוא ‎::before‎ של ‎html‎ ולא צומת DOM**, כי הוא חייב להיצבע
     בצביעה הראשונה. סקריפט ב-‎<head>‎ אינו יכול ליצור צומת (אין עדיין
     ‎body‎), אבל הוא כן יכול לקבוע מאפיין — וזה כל מה שדרוש כאן.
   ⚠ **והדהייה היא מעבר CSS ולא WAAPI**, כי WAAPI על פסבדו-אלמנט דורש
     ‎pseudoElement‎ שאינו קיים ב-WebKit ישן. */
html[data-open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: #120810;
  opacity: 1;
  transition: opacity 440ms cubic-bezier(.4, 0, .2, 1);
}
/* ‎shared/heart.js‎ מעביר ל-‎fade‎ ברגע שהלב ממריא */
html[data-open="fade"]::before { opacity: 0; }

/* מה שמוסתר עד שהפתיחה מגיעה אליו. ⚠ ‎opacity‎ בלבד — הפריסה נשארת
   **זהה לחלוטין**, ולכן היעד של הלב המעופף קבוע מהפריים הראשון ואינו זז
   כשהאותיות מופיעות. ‎display:none‎ או ‎visibility‎ היו מזיזים את היעד.
   ⚠ ‎.logo-u‎ אינו ברשימה — הוא מוסתר-לעין ממילא (‎style.css‎), והסתרתו
   כאן הייתה חסרת משמעות. */
html[data-open] .site-header .logo-s,
html[data-open] .site-header .logo-heart,
html[data-open] .site-header .logo-text,
html[data-open] .site-header .brand-name,
html[data-open] .site-header .nav-toggle,
html[data-open] .site-header .nav-links,
html[data-open] .site-header .btn-pill { opacity: 0; }

/* ⚠ הדופק של הלב שבלוגו מושהה כל עוד הפתיחה רצה, כדי שיתחיל מ-‎scale:1‎
   בדיוק ברגע הנחיתה — אחרת הלב הנוחת היה מתחלף בלב שנמצא באמצע פעימה. */
html[data-open] .logo-heart { animation: none; }

/* 🔴 **הנחיתה — הכלל הזה נשכח, ונמדד שהוא חסר.** ‎shared/heart.js‎ מוסיף
   ‎is-landed‎ ברגע שהלב המעופף מסתלק. בלי הכלל הזה הלב האמיתי נשאר
   באטימות 0 עד סוף הרצף: נמדד ב-Chromium 393 — **834 מיליושניות שבהן
   אין לב בלוגו בכלל**, בין 1206ms ל-2040ms. בעין זה נראה כמו לב שנוחת
   ונעלם. 🔑 הבדיקה מדדה רק את מצב הסיום, ולכן עברה. עכשיו יש בדיקה
   שדוגמת את האטימות בכל פריים לאורך כל הרצף.
   ⚠ הסלקטור ארוך בכוונה — הוא חייב לגבור על שני הכללים שמעליו. */
html[data-open] .site-header .logo-heart.is-landed {
  opacity: 1;
  animation: sfgHeartBeat var(--beat) var(--beat-ease) infinite;
}

/* הלב המעופף. ⚠ שתי שכבות בכוונה: ה-‎div‎ נושא את **הטיסה**
   (‎transform‎) וה-‎svg‎ שבתוכו נושא את **הדופק** (‎scale‎). שתי הנפשות על
   אותו מאפיין באותו אלמנט היו דורסות זו את זו. */
.open-heart {
  position: fixed;
  z-index: 9101;
  margin: 0;
  color: #ff2d87;
  opacity: 0;
  transition: opacity 160ms linear;
  pointer-events: none;
  will-change: transform;
}
.open-heart > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  animation: sfgHeartBeat var(--beat) var(--beat-ease) infinite;
}

/* 🔴 **וגם אם כל מה שלמעלה נכשל — כאן אין תנועה בכלל.** מי שביקש פחות
   תנועה אינו מקבל לא דופק, לא וילון ולא טיסה. זו ברירת המחדל של איתי
   בכל הקבצים בפרויקט, בלי אף חריג. */
@media (prefers-reduced-motion: reduce) {
  /* ⚠ הסלקטור הארוך חוזר גם כאן: בלעדיו כלל הנחיתה שלמעלה היה גובר
     עליו בסגוליות, ומי שביקש פחות תנועה היה מקבל דופק. */
  .logo-heart, .open-heart > svg,
  html[data-open] .site-header .logo-heart.is-landed { animation: none; scale: none; }
  html[data-open]::before { display: none; }
  html[data-open] .site-header .logo-s,
  html[data-open] .site-header .logo-heart,
  html[data-open] .site-header .logo-text,
  html[data-open] .site-header .brand-name,
  html[data-open] .site-header .nav-toggle,
  html[data-open] .site-header .nav-links,
  html[data-open] .site-header .btn-pill { opacity: 1; }
}

/* ⚠ ‎shared/heart.js‎ מפצל את "perfitgirls" לאותיות לזמן הפתיחה בלבד, ומחזיר
   את צומת הטקסט המקורי בסופה. ‎transform‎ אינו חל על אלמנט inline רגיל,
   ולכן האותיות חייבות ‎inline-block‎ — וזה גם הכול. כל דבר נוסף (ריפוד,
   ריווח, ‎will-change‎) היה משנה את רוחב המילה בזמן ההנפשה. */
.open-ltr { display: inline-block; }