/* ============================================================
   ההירו — Framed Bento Field

   שתי גרסאות נדחו לפני זו, ובצדק: פיזור תמונות מתחת לכרטיס עם מסך
   לבן ("משחקי טשטוש"), ורצועות נעות ("לא רוצה את התנועה"). מחקר על
   אתרי הפרימיום בתחום החזיר ממצא אחד חד — **אף אחד מהם לא שם תמונות
   מאחורי הטופס.** שתי הגרסאות שנדחו היו בדיוק שני הפתרונות שהם
   נמנעים מהם.

   מה שהם כן עושים: התמונות הן אריחים ברשת, והתוכן יושב בתא משלו.
   ולכן כאן ההירו הוא רשת אחת, והכרטיס הוא **אזרח ברשת ולא שכבה מעליה**.
   שום תמונה לא עוברת מאחוריו, ולכן אין צורך במסך, בטשטוש או בשקיפות.

   הכרטיס מנצח בגאומטריה: הוא התא הגדול ביותר — 12 יחידות תא מול 4
   של התמונה הגדולה — והיחיד עם הגבהה. הכלל מהמחקר: העוגן צריך להיות
   לפחות פי שניים מהתא הבא אחריו.

   מספרים שאינם המצאה שלי:
     מרווח 16px אחיד לחלוטין — מרווח קבוע הוא מה שגורם ל-24 תמונות
       להיקרא כאובייקט אחד מכוון במקום כרשת סטוק
     רדיוס 16px לאריח, 24px לכרטיס — משפחה אחת, מהטווח 16-24
     צל: לאריחים **אין**. לכרטיס צל בחמש שכבות בגוון הנייבי ולא בשחור
     סיבוב 0. אם בכלל, מקסימום 3 מעלות — מעבר לזה זה נראה אלבום
     תנועה: רק בריחוף. סטטי במנוחה, חי מתחת לסמן.
   ============================================================ */

.hero-bento{
  --gap:16px;
  direction:rtl;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  /* חמש שורות מפורשות, לא grid-auto-rows: הקו -1 מתייחס לרשת
     המפורשת בלבד, וכשאין כזו "1 / -1" מתכווץ לשורה אחת — הכרטיס
     יצא בגובה 122px במקום מלא. */
  grid-template-rows:repeat(5,minmax(0,1fr));
  gap:var(--gap);
  block-size:min(100svh,880px);
  max-inline-size:1560px;
  margin-inline:auto;
  /* הרשת מתחילה מתחת לניווט הקבוע. בלי זה השורה העליונה של התמונות
     נחתכת על ידו — תמונה חתוכה נקראת כתקלה, לא כעיצוב. */
  padding:calc(84px + 14px) clamp(16px,2.4vw,32px) 24px;
  background:var(--bg);
}

/* ---- הכרטיס: התא הגדול ביותר, לא שכבה ---- */
.bento-card{
  grid-column:4 / 10;
  grid-row:1 / -1;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
}

.sim{
  inline-size:100%;
  background:#fff;
  border-radius:24px;
  /* צל בחמש שכבות, בגוון הנייבי של האתר ולא בשחור. היסט אנכי כפול
     מהאופקי, כמו אור אמיתי. זה מה שמרים את הכרטיס בלי מסגרת. */
  box-shadow:
    0 1px 1px  hsl(210deg 88% 16% / .05),
    0 2px 2px  hsl(210deg 88% 16% / .05),
    0 4px 4px  hsl(210deg 88% 16% / .05),
    0 8px 8px  hsl(210deg 88% 16% / .05),
    0 16px 16px hsl(210deg 88% 16% / .05);
  padding:clamp(24px,2.4vw,36px);
  max-block-size:100%;
  overflow:auto;
}

/* ---- האריחים ----
   ארבעה עוגנים 2x2, אחד בכל פינה, והשאר יחידות שנשתלות לבד.
   dense ממלא חורים שנוצרים כשעוגן לא נכנס בשורה. */
.hero-bento{grid-auto-flow:dense}

.tile{
  border-radius:16px;
  overflow:hidden;
  /* קו שיער פנימי במקום מסגרת: תחת border-radius ו-object-fit הוא
     נשאר חד, ומסגרת אמיתית הייתה מזיזה את התוכן. */
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35);
  background:var(--bg-2);
  position:relative;
  display:block;
  padding:0;border:0;
  cursor:pointer;
  /* רק transform ו-filter. שניהם לא מפעילים layout. */
  transition:transform 220ms cubic-bezier(.23,1,.32,1),
             box-shadow 220ms cubic-bezier(.23,1,.32,1);
}
.tile img{
  inline-size:100%;block-size:100%;
  object-fit:cover;display:block;
  transition:filter 220ms cubic-bezier(.23,1,.32,1);
}

/* התנועה היחידה. סטטי במנוחה, חי מתחת לסמן. */
@media (hover:hover) and (pointer:fine){
  .tile:hover{
    transform:scale(1.02);
    box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5),
               0 8px 24px -8px hsl(210deg 88% 16% / .28);
    z-index:3;
  }
  .tile:hover img{filter:brightness(1.06)}
}
.tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px;z-index:3}

/* היעד שנבחר — טבעת זהב, בלי תזוזה */
.tile.is-lit{
  box-shadow:inset 0 0 0 3px var(--sun), 0 10px 28px -10px hsl(210deg 88% 16% / .3);
  z-index:3;
}

/* ---- שבב השם ----
   נותן לתמונה סיבה להיות שם: היא לא קישוט אלא קיצור דרך. לחיצה
   ממלאת את היעד בטופס. */
.tile-chip{
  position:absolute;inset-inline-start:10px;inset-block-end:10px;
  padding:5px 10px;border-radius:999px;
  background:rgb(255 255 255 / .94);
  color:var(--deep);font-size:12px;font-weight:500;
  line-height:1.3;pointer-events:none;
  max-inline-size:calc(100% - 20px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- הפריסה ל-10 אריחים ----
   שלושה בכל צד, ועוד שניים ברצועה עליונה ותחתונה מעל הכרטיס ומתחתיו.
   הכרטיס מקבל את מלוא גובה העמודה. ברצועות שמעליו ומתחתיו התוכן
   נחתך על ידי הניווט או דחס את הכרטיס לגלילה פנימית — שתי תקלות
   שנראות כבאג. שני טורי מסגרת של שלוש תמונות, והכרטיס נושם באמצע.

   24 אריחים נמדדו כ-199° פיזור גוון: אין להם משפחת צבע אחת והם
   מתחרים זה בזה. שישה שנבחרו בהרמוניה שקטים עוד יותר מעשרה. */
.hero-bento{grid-template-rows:repeat(6,minmax(0,1fr))}
.bento-card{grid-column:4 / 10;grid-row:1 / -1}

/* טור ימין */
.tile.a1{grid-column:1 / 4;grid-row:1 / 3}
.tile.s1{grid-column:1 / 4;grid-row:3 / 5}
.tile.s2{grid-column:1 / 4;grid-row:5 / 7}
/* טור שמאל */
.tile.a2{grid-column:10 / 13;grid-row:1 / 3}
.tile.s3{grid-column:10 / 13;grid-row:3 / 5}
.tile.s4{grid-column:10 / 13;grid-row:5 / 7}

/* ---- טאבלט: הכרטיס מקבל את כל הרוחב, התמונות נעשות רצועה ---- */
@media (max-width:1024px){
  .hero-bento{
    grid-template-columns:repeat(6,minmax(0,1fr));
    /* חובה לאפס גם את השורות המפורשות: חמש שורות 1fr ברשת שגובהה
       auto מתנפחות לגובה התוכן הגבוה ביותר — הכרטיס — וכל אריח
       שמוצמד אליהן הופך לתמונה בגובה מסך. */
    /* שורה מפורשת אחת בגובה תוכן — הכרטיס. בלעדיה הוא נדחס לשורת
       104px והטופס גולש ממנה על האריחים שמתחת. */
    grid-template-rows:auto;
    grid-auto-rows:104px;
    block-size:auto;
    min-block-size:auto;
  }
  .bento-card{grid-column:1 / -1;grid-row:1;order:-1}
  /* הניווט קבוע; בדסקטופ הוא צף מעל אריחים, אבל כאן הכרטיס ראשון
     וצריך לפנות לו את הדרך. */
  .hero-bento{padding-block-start:calc(76px + 16px)}
  .sim{max-block-size:none;overflow:visible}
  /* כל משבצות הדסקטופ מאבדות את המיקום הקבוע — ברשת של 6 עמודות
     "grid-column:10/13" יוצר עמודות משתמעות ומועך את הכרטיס.
     האיפוס חייב שתי מחלקות: ‎.tile לבדו מפסיד בספציפיות ל-.tile.s1. */
  .tile.a1,.tile.a2,.tile.s1,.tile.s2,.tile.s3,.tile.s4,
  .tile.t1,.tile.t2,.tile.t3,.tile.t4{grid-column:auto;grid-row:auto}
  .tile.a1,.tile.a2{grid-column:span 2;grid-row:span 2}
}

@media (max-width:640px){
  .hero-bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:88px;--gap:12px}
  .tile.a1,.tile.a2{grid-column:span 2;grid-row:span 2}
}

/* ---- הטופס ---- */
.sim-eyebrow{margin:0 0 7px;font-size:13.5px;font-weight:500;color:var(--brand)}
.sim h1{
  margin:0 0 8px;
  /* הכותרת הראשית הייתה 30px בזמן שכותרות המשנה למטה היו 40 — ראש
     העמוד נקרא כמשני. היא גדלה עד שהיא מובילה, ועדיין נשארת מתחת
     לגובה שהיה דוחק את הטופס אל מחוץ לכרטיס. */
  font-size:clamp(26px,2.9vw,42px);font-weight:600;line-height:1.18;color:var(--deep);
}
.sim-lede{margin:0 0 13px;color:var(--muted);font-size:15.5px;line-height:1.6}

/* minmax(0,1fr) ולא 1fr: לשדה תאריך יש רוחב מינימום מובנה (~170px)
   ש"1fr" מכבד — ובמובייל שתי עמודות כאלה רחבות מהכרטיס עצמו. */
.sim-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:10px;margin-block-end:10px}
.sim-row-2{grid-template-columns:1fr}
@media (max-width:640px){
  .sim-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sim-row .sim-field:first-child{grid-column:1 / -1}
}

.sim-field{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);
  transition:box-shadow 180ms cubic-bezier(.23,1,.32,1), background 180ms cubic-bezier(.23,1,.32,1);
}
.sim-field:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--brand)}
.sim-field label{font-size:12.5px;color:var(--muted)}
.sim-field select,.sim-field input{
  border:0;background:transparent;padding:0;margin:0;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);
  inline-size:100%;min-inline-size:0;appearance:none;
}
.sim-field select:focus,.sim-field input:focus{outline:0}
/* תאריך הוא תוכן LTR בתוך עמוד RTL. בלי ההכרזה, כשהשדה צר (חלון
   מוקטן או זום מוגדל) הדפדפן חותך דווקא את הספרה הראשונה מתחת
   לאייקון — "19/09" נקרא "9/09". הגופן מתכווץ מעט לפני שנחתך. */
.sim-field input[type="date"]{direction:ltr;text-align:end;font-size:clamp(13px,1.2vw,16px)}

.sim-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.sim-go{
  flex:1 1 220px;
  font-family:inherit;font-size:16px;font-weight:500;
  padding:15px 22px;min-block-size:52px;
  border:0;border-radius:var(--r-sm);
  background:var(--sun);color:var(--deep);cursor:pointer;
  box-shadow:0 4px 12px rgba(217,164,65,.3), 0 16px 32px -12px rgba(217,164,65,.55);
  transition:background 180ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover:hover) and (pointer:fine){ .sim-go:hover{background:var(--sun-soft)} }
.sim-go:active{transform:scale(.97)}
.sim-go:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

.sim-rec{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:500;
  padding:15px 18px;min-block-size:52px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);cursor:pointer;
  transition:box-shadow 180ms cubic-bezier(.23,1,.32,1),
             border-color 180ms cubic-bezier(.23,1,.32,1),
             transform 140ms cubic-bezier(.23,1,.32,1);
}
@media (hover:hover) and (pointer:fine){ .sim-rec:hover{border-color:var(--ink-2);box-shadow:var(--sh-1)} }
.sim-rec:active{transform:scale(.97)}
.sim-rec:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sim-rec .dot{inline-size:11px;block-size:11px;border-radius:50%;background:var(--pc-red);flex:none}
.sim-rec[aria-pressed="true"]{border-color:var(--pc-red);box-shadow:inset 0 0 0 1px var(--pc-red)}
.sim-rec[aria-pressed="true"] .dot{animation:rec-pulse 1.4s ease-in-out infinite}
@keyframes rec-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.sim-heard{
  margin:14px 0 0;padding:12px 15px;
  border-radius:var(--r);background:var(--brand-050);
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.sim-heard[hidden]{display:none}
.sim-heard b{font-weight:500}

/* ---- שורת האמון ----
   הממצא מ-squaremouth: הרצועה הזאת, מתחת לכפתור, היא הרכיב הממיר
   של ההירו שלהם. */
.sim-trust{
  display:flex;flex-wrap:wrap;gap:6px 20px;
  margin-block-start:16px;padding-block-start:14px;
  border-block-start:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.sim-trust b{color:var(--deep);font-weight:600;font-variant-numeric:tabular-nums}

.sim-note{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}

/* לפטופ נמוך (768px גובה): הכרטיס נדחס מעט במקום לגלול בתוך עצמו */
@media (min-width:1025px) and (max-height:820px){
  .sim{padding:20px 26px}
  .sim h1{font-size:clamp(24px,2.2vw,32px)}
  .sim-lede{margin-block-end:10px}
}

@media (prefers-reduced-motion:reduce){
  .tile{transition:box-shadow 200ms linear}
  .tile:hover{transform:none}
  .sim-rec[aria-pressed="true"] .dot{animation:none;opacity:.6}
}


/* ---- בורר הנוסעים ---- */
.sim-trav-field{position:relative}
.sim-trav{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:0;background:transparent;padding:0;margin:0;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);
  inline-size:100%;cursor:pointer;text-align:start;
}
.sim-trav svg{flex:none;color:var(--muted);transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.sim-trav[aria-expanded="true"] svg{transform:rotate(180deg)}

.trav-pop{
  position:absolute;inset-inline:0;inset-block-start:calc(100% + 8px);
  z-index:5;
  background:#fff;border-radius:16px;padding:14px;
  box-shadow:0 2px 6px rgba(5,39,77,.08), 0 18px 44px -12px rgba(5,39,77,.28);
}
.trav-lead{
  margin:0 0 10px;padding:0 0 10px;border-block-end:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--muted);
}
.trav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}

/* שורת נוסע: שם, מין, תאריך, הסרה. במסך צר היא נשברת לשתי שורות —
   שלושה שדות תאריך ושני כפתורי מין לא נכנסים לרוחב של טלפון. */
.trav-row{
  display:grid;gap:8px 10px;align-items:center;
  grid-template-columns:1fr auto auto;
  padding:10px;border:1px solid var(--line);border-radius:12px;
  transition:border-color 160ms,background 160ms;
}
.trav-row.is-done{border-color:color-mix(in srgb,var(--brand) 34%,transparent);background:color-mix(in srgb,var(--brand) 4%,transparent)}
.trav-who{font-size:14px;font-weight:500;color:var(--ink);grid-column:1}
.trav-who small{font-weight:400;color:var(--muted)}

/* מין: שני כפתורים בתוך אותה גלולה, ולא בורר — שתי אפשרויות שכולן
   על המסך מהירות יותר מפתיחה וסגירה. */
.trav-sex{display:inline-flex;background:var(--bg-2);border-radius:999px;padding:3px;gap:2px}
.trav-sx{
  border:0;border-radius:999px;background:transparent;cursor:pointer;
  padding:5px 12px;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--muted);
  transition:background 140ms,color 140ms;
}
.trav-sx:hover{color:var(--ink)}
.trav-sx[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(5,39,77,.12)}

.trav-dob{display:inline-flex;align-items:center;gap:2px;background:var(--bg-2);border-radius:999px;padding:3px 6px}
.trav-sep{color:var(--muted);font-size:13px}
.trav-dd,.trav-yy{
  border:0;background:transparent;text-align:center;
  font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);
  padding:5px 0;border-radius:8px;
}
.trav-dd{inline-size:34px}
.trav-yy{inline-size:48px}
.trav-dd::placeholder,.trav-yy::placeholder{color:var(--muted);font-weight:400;font-size:12.5px}

@media (max-width:520px){
  .trav-row{grid-template-columns:1fr auto}
  .trav-who{grid-column:1/-1}
  .trav-dob{grid-column:1/-1;justify-content:space-between}
}

.trav-del{
  border:0;background:none;padding:6px 4px;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.trav-del:hover{color:var(--err)}
.trav-del-ph{inline-size:34px}
.trav-add{
  margin-block-start:10px;inline-size:100%;
  border:1px dashed var(--line);border-radius:12px;background:none;
  padding:9px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--brand);
  transition:background 140ms,border-color 140ms;
}
.trav-add:hover{background:var(--brand-050);border-color:var(--brand-600)}

/* ---- קו המסלול ----
   שורה אחת דקה שאומרת מה בדיוק תומחר, ובאותה נשימה משמשת כחיווי
   הטעינה. לפני זה המחירים התחלפו בשקט מוחלט — המשתמש לא ידע אם
   הוא מסתכל על התשובה שלו או על הקודמת. */
.sim-route{
  display:flex;align-items:center;gap:10px;
  margin-block:2px 14px;
  font-size:12.5px;color:var(--muted);
}
.rt-end{flex:none;white-space:nowrap}
.rt-to{font-weight:500;color:var(--ink-2)}

.rt-line{
  position:relative;flex:1;min-inline-size:0;
  block-size:16px;display:flex;align-items:center;justify-content:center;
}
/* המסלול: קו מקווקו בין שתי הנקודות, ונקודת יעד אחת שנותנת כיוון */
.rt-line::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:50%;
  block-size:0;border-block-start:1px dashed var(--line);
}
.rt-line::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-end:0;
  inline-size:5px;block-size:5px;margin-block-start:-2.5px;
  border-radius:50%;background:var(--sun);
}
.rt-days{
  position:relative;z-index:1;
  background:#fff;padding-inline:8px;
  font-variant-numeric:tabular-nums;
  transition:opacity 200ms ease;
}

/* המטוס חבוי במנוחה. הוא מופיע רק בזמן שהמחיר בדרך, וזה כל תפקידו —
   תנועה שמסתיימת ברגע שיש תשובה, ולא קישוט שרץ תמיד.
   האנימציה על inset-inline-start ולא על transform באחוזים: אחוז ב-
   translateX נמדד לפי רוחב המטוס עצמו (15px), כך שהוא היה זז שלושה
   מילימטרים במקום לחצות את הקו. */
.rt-plane{
  position:absolute;inset-block-start:50%;inset-inline-start:0;
  margin-block-start:-7px;
  color:var(--brand);opacity:0;
  transform:scaleX(-1);           /* אף המטוס ימינה ב-SVG, טס שמאלה ב-RTL */
  pointer-events:none;
}
.sim-route.is-flying .rt-plane{
  animation:rt-fly 1.25s cubic-bezier(.45,0,.55,1) infinite;
}
.sim-route.is-flying .rt-days{opacity:.4}

@keyframes rt-fly{
  0%   {opacity:0;inset-inline-start:0}
  15%  {opacity:1}
  80%  {opacity:1}
  100% {opacity:0;inset-inline-start:calc(100% - 15px)}
}

/* תנועה מופחתת: המטוס עומד על היעד ופועם קלות בשקיפות בלבד */
@media (prefers-reduced-motion:reduce){
  .sim-route.is-flying .rt-plane{
    animation:rt-wait 1.4s ease-in-out infinite;
    inset-inline-start:calc(50% - 7px);
  }
  @keyframes rt-wait{0%,100%{opacity:.35}50%{opacity:1}}
}

@media (max-width:520px){
  .sim-route{font-size:12px;gap:8px}
}


/* פתיחה וסגירה עם מעבר, בלי לגעת ב-JS — hidden נשאר מקור האמת. */
.trav-pop{
  opacity:1;transform:none;
  transition:opacity 180ms cubic-bezier(.23,1,.32,1),
             transform 180ms cubic-bezier(.23,1,.32,1),
             display 180ms allow-discrete;
}
.trav-pop[hidden]{display:none;opacity:0;transform:translateY(-6px);transition-duration:120ms}
@starting-style{.trav-pop:not([hidden]){opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .trav-pop,.trav-pop[hidden]{transition:none;transform:none}
}

/* לפופאובר הנוסעים לא הייתה שום טבעת פוקוס — מקלדת נעה בו בעיוורון. */
.trav-del:focus-visible,.trav-add:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
.trav-dd:focus-visible,.trav-yy:focus-visible,.trav-sx:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* כפתור "התחלה מחדש" בתוך הודעת השחזור — קישור, לא כפתור נוסף במסך. */
.sim-reset{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;
}
.sim-reset:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- כרטיס "בזמן שאנחנו בודקים" ----
   מופיע רק כשהמחיר בדרך, ומראה עובדה אמיתית על היעד מתוך מדריך
   היעדים שלנו. ספינר מבקש מהמבקר לחכות; זה נותן לו משהו בתמורה. */
.sim-fact{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  margin-block:10px 0;padding:11px 14px;
  background:var(--bg-2);border-radius:14px;
}
.sim-fact[hidden]{display:none}
.sf-ic{flex:none;inline-size:34px;block-size:34px}
.sf-body{margin:0;font-size:13.5px;line-height:1.5;min-inline-size:0}
.sf-k{display:block;color:var(--muted);font-size:12px}
.sf-v{color:var(--ink)}
.sf-more{flex:none;font-size:12.5px;color:var(--brand);white-space:nowrap}

/* כניסה רכה, ורק אם המשתמש לא ביקש אחרת */
@media (prefers-reduced-motion:no-preference){
  .sim-fact{animation:sf-in 260ms cubic-bezier(.23,1,.32,1) both}
  @keyframes sf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media (max-width:520px){
  .sim-fact{grid-template-columns:auto 1fr;gap:10px}
  .sf-more{grid-column:2;justify-self:start}
}

/* ---- המטוס מושך שובל, והשובל הוא המסלול שנצבע ----
   קודם הקו היה מקווקו וקבוע והמטוס פשוט עבר מעליו. עכשיו הוא צובע
   אותו בזהב תוך כדי מעופו: התנועה מסמנת התקדמות אמיתית, ולא רק
   נוכחות. אותו משך ואותה עקומה של rt-fly, אחרת השובל והמטוס נפרדים. */
.rt-trail{
  position:absolute;inset-block-start:50%;inset-inline-start:0;
  block-size:0;border-block-start:1px solid var(--sun);
  inline-size:0;opacity:0;
}
.sim-route.is-flying .rt-trail{
  animation:rt-trail 1.25s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rt-trail{
  0%   {inline-size:0;opacity:0}
  15%  {opacity:1}
  80%  {opacity:1}
  100% {inline-size:100%;opacity:0}
}

/* ---- הטקסט נחשף בעקבות המטוס ----
   פס זהב דק חוצה את הכרטיס, ומאחוריו הטקסט מופיע. הוא רץ פעם אחת
   בלבד — חשיפה שחוזרת בלולאה היא הבהוב, לא חשיפה. */
.sim-fact{position:relative;overflow:hidden}
.sf-wipe{
  position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:2px;background:var(--sun);opacity:0;
  pointer-events:none;
}
.sim-fact.is-reveal .sf-body{animation:sf-wipe-text 620ms cubic-bezier(.23,1,.32,1) both}
.sim-fact.is-reveal .sf-ic{animation:sf-pop 420ms cubic-bezier(.23,1,.32,1) 180ms both}
.sim-fact.is-reveal .sf-wipe{animation:sf-wipe-bar 620ms cubic-bezier(.45,0,.55,1) both}

@keyframes sf-wipe-text{
  0%   {clip-path:inset(0 0 0 100%)}
  100% {clip-path:inset(0 0 0 0)}
}
@keyframes sf-wipe-bar{
  0%   {inset-inline-start:100%;opacity:0}
  12%  {opacity:.9}
  88%  {opacity:.9}
  100% {inset-inline-start:0;opacity:0}
}
@keyframes sf-pop{
  0%   {opacity:0;transform:scale(.82)}
  100% {opacity:1;transform:none}
}

/* תנועה מופחתת: הטקסט פשוט שם. אין שובל, אין חשיפה, אין קפיצה. */
@media (prefers-reduced-motion:reduce){
  .sim-route.is-flying .rt-trail{animation:none;opacity:0}
  .sim-fact.is-reveal .sf-body,
  .sim-fact.is-reveal .sf-ic,
  .sim-fact.is-reveal .sf-wipe{animation:none}
  .sim-fact.is-reveal .sf-wipe{opacity:0}
}