/* ============================================================
   scroll-world — ערכת WEBACE + תיקוני RTL

   המנוע מזריק את ה-CSS שלו בתוך `@layer sw`, ולכן כל כלל כאן —
   שאינו בשכבה — מנצח על סדר הקסקייד בלבד. בלי טריקי specificity,
   והמנוע נשאר בר-שדרוג במקום.

   שתי עבודות:
     1. טוקני מותג (המנוע קורא אותם כמשתני CSS)
     2. היפוך ה-left/right הפיזיים שהמנוע מקודד קשיח, כי העמוד
        עברית RTL והטקסט שלו שייך לימין
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;700;800;900&family=Open+Sans:wght@400;600&display=swap");

:root{
  /* רקע העמוד תואם לרקע הסולידי של הדיורמות, כך שפוסטר שעוד לא
     נצבע אינו נראה כלל מול העמוד */
  --sw-bg:        #f6eefb;
  --sw-ink:       #2c004b;
  --sw-ink-soft:  #6b5480;
  --sw-accent:    #7600c7;
  --sw-font-display: "Heebo", "Assistant", sans-serif;
  --sw-font-body:    "Open Sans", "Heebo", sans-serif;

  --brand:       #7600c7;
  --brand-neon:  #c82efe;
  --brand-deep:  #2c004b;
  --cta:         #0095ef;
}

html, body{ margin:0; background:var(--sw-bg); }
body{ font-family:var(--sw-font-body); }

/* ---------- תיקוני RTL ---------- */

/* הטקסט נצמד לקצה הקריאה. בעברית זה הימין. */
.sw-copy{
  left:auto;
  right:clamp(18px,5vw,64px);
  text-align:right;
}

/* מסך הטקסט הוא גרדיאנט חד-כיווני: אטום מתחת לטקסט ונמוג לאורך
   הפריים. המנוע מעגן אותו שמאלה ומריץ 90deg עבור LTR — כשהטקסט עבר
   ימינה זה השאיר קצה אנכי חד באמצע התמונה. לעגן ימין, להריץ הפוך. */
.sw-copylayer::before{
  left:auto; right:0;
  background:linear-gradient(270deg,
    var(--sw-bg) 0%,
    color-mix(in srgb, var(--sw-bg) 82%, transparent) 34%,
    color-mix(in srgb, var(--sw-bg) 40%, transparent) 62%,
    transparent 100%);
}

/* מסילת המסלול עוברת לקצה הנגדי מהטקסט. */
.sw-route{ right:auto; left:clamp(14px,2.4vw,30px); }
/* ולכן גם תווית ה-hover שלה צריכה לצמוח לכיוון השני. */
.sw-route__label{
  right:auto; left:24px;
  transform:translateY(-50%) translateX(-6px);
}
.sw-route__dot:hover .sw-route__label,
.sw-route__dot:focus-visible .sw-route__label{
  transform:translateY(-50%) translateX(0);
}

@media (max-width:860px){
  /* כלל המובייל של המנוע נועל את הטקסט לשני הקצוות — להחזיר
     יישור לימין אחריו, כי הכלל שלנו מאוחר יותר */
  .sw-copy{ left:clamp(18px,5vw,64px); right:clamp(18px,5vw,64px); text-align:right; }
  .sw-route{ left:6px; right:auto; }
}

/* ---------- תיקוני טיפוגרפיה בעברית ---------- */

/* המנוע מגדיל לאותיות רישיות ומרווח בהרחבה את התוויות הקטנות שלו —
   ניב לטיני. בעברית אין רישיות, ומעל ~.12em המילים מפסיקות להיקרא
   כמילים (אותו ממצא כמו בשני העמודים האחים). */
.sw-hint,
.sw-copy .sw-copy__eyebrow,
.sw-eyebrow{
  text-transform:none;
  letter-spacing:.08em;
}
.sw-copy h2, .sw-copy__title{ letter-spacing:-.012em; }

/* מספרים עם סיומת לטינית בתוך עברית צריכים כיוון משלהם, אחרת
   ה-bidi מסדר מחדש "70+" ל-"+70". */
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* מונה המקטעים הוא בדיוק אותה מלכודת. המנוע כותב "01 / 06", וה-bidi
   הופך את זה על המסך ל-"06 / 01" — כלומר המבקר בסצנה הראשונה קורא
   שהוא בשישית. הבידוד מחזיר את הסדר בלי לגעת במנוע. */
.sw-copy__num{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ---------- כרום מותגי ---------- */

.sw-topcta{
  background:var(--cta);
  color:#fff;
  border-radius:999px;
  padding:10px 20px;
  font-weight:600;
}

/* דרך שקטה חזרה לעמוד השירות. מוסתרת כברירת מחדל ונחשפת רק על
   ‎*.localhost — ראה את הסקריפט בתחתית world.html. אותה מלכודת
   שנתפסה בפרויקט הקודם: rsync פשוט מעלה גם את הקבצים השכנים,
   וקישור יחסי נפתר אז מול הדומיין הציבורי. */
.world-exits{
  position:fixed; z-index:55;
  inset-inline-end:clamp(14px,2.4vw,30px);
  bottom:clamp(14px,2.4vw,26px);
  display:flex; gap:8px;
  font-family:var(--sw-font-body); font-size:13px;
}
.world-exits[hidden]{ display:none; }
.world-exits a{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(44,0,75,.12);
  border-radius:999px; padding:8px 15px;
  color:var(--sw-ink); text-decoration:none;
  backdrop-filter:blur(8px);
  transition:background .3s, transform .3s, border-color .3s;
}
.world-exits a:hover{
  background:#fff; transform:translateY(-2px);
  border-color:rgba(44,0,75,.24);
}
@media (max-width:860px){ .world-exits{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .world-exits a{ transition:none; }
}