:root {
  --bg: #0a0612;
  --bg2: #140a26;
  --purple: #b026ff;
  --turquoise: #00fff0;
  --magenta: #ff00c8;
  --gold: #ffcc00;
  --text: #f4eefc;
  --text-dim: #c6b8e0;
  --font-body: 'Rubik', 'Assistant', sans-serif;
  --font-en: 'Audiowide', cursive;
  /* פונט תצוגה עברי "בעל אופי" - Secular One (Hebrew+Latin, bold poster-
     style) - Audiowide למעלה לא תומך בעברית בכלל, לכן לא מתאים לטקסט
     כפתורים עברי. מוחל רק על כפתורי מסך הכניסה + כפתור השיתוף, לא גלובלי. */
  --font-display-he: 'Secular One', 'Rubik', sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --neon-grad: linear-gradient(90deg, var(--purple), var(--turquoise), var(--magenta), var(--gold));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* מבטל את הדגשת-המגע הכחלחלה שדפדפני מגע (בעיקר Chrome/Safari בנייד)
   מציגים כברירת מחדל על כל אלמנט לחיץ בזמן לחיצה בפועל - נעלמת מיד בהרמת
   האצבע, זו לא הייתה מכוונת בשום מקום בדף. גלובלי (על * , לא רק a/button) -
   כך מכוסים גם אלמנטים לחיצים שהם div/span עם JS click handler (כרטיסי
   גלריה, כרטיסי רילס/טראק) ולא רק כפתורים/קישורים סמנטיים. לא נוגע ב-
   :focus-visible (נגישות מקלדת) - זו תכונת מגע נפרדת לגמרי. */
* { -webkit-tap-highlight-color: transparent; }

/* scroll-behavior:smooth הוסר בכוונה - הוא מתנגש עם ScrollTrigger.refresh() של GSAP
   (המדידה הפנימית של GSAP מניחה גלילה מיידית ל-0; smooth הופך אותה לאסינכרונית
   ומייצר start/end שגויים ואפילו שליליים) - זה השורש האמיתי מאחורי כל באגי
   "המסך השחור התקוע"/הסצנות שנתקעות שדווחו לאורך הפרויקט. אין בדף קישורי עוגן
   שצריכים גלילה חלקה - החלקת התנועה כולה כבר מגיעה מ-scrub המספרי של GSAP עצמו. */
html { background: var(--bg); overscroll-behavior-y: auto; }

body {
  font-family: var(--font-body);
  /* רקע "נושם" גלובלי - גרדיאנט איטי מאוד (90s, background-position בלבד,
     לא צבע חדש) בין --bg/--bg2/--bg. תת-סיפי בכוונה: התוכן (סצנות הווידאו,
     כרטיסים, פאנלים) כמעט תמיד מכסה את ה-body עצמו, כך שרוב הזמן זה נראה
     רק בקצוות/רווחים - אבל מוסיף תחושת "חיות" עדינה לדף כולו, לא רק לשער.
     background-attachment:fixed - כדי שהגרדיאנט לא "יזוז" מלאכותית עם
     גלילת 1600vh הארוכה (היה נראה כמו פס שנע מהר מדי אם הוא היה נגלל
     יחד עם body). מכובד ע"י כלל prefers-reduced-motion הגלובלי למעלה
     (animation-duration:0.001ms) - בלי טיפול נוסף. */
  background: linear-gradient(135deg, var(--bg), var(--bg2), var(--bg));
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: body-bg-breathe 90s ease-in-out infinite;
  color: var(--text);
  overflow-x: hidden;
  /* overscroll-behavior-y: auto (לא none) - בכוונה: מאפשר pull-to-refresh
     טבעי כשהמשתמש בראש הדף ומושך למטה. זה יכול לקרות רק כש-scrollY===0,
     ולכן אין סיכון "להיתפס בטעות" באמצע גלילה בדף הארוך - הוסר none שהיה
     כאן בעבר (נועד למנוע רק pull-to-refresh בקצה רצועת הגלריה האופקית -
     זה עדיין מטופל בנפרד ב-overscroll-behavior-x:contain על .gallery-filmstrip). */
  overscroll-behavior-y: auto;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.en { font-family: var(--font-en); letter-spacing: 0.03em; }

@keyframes body-bg-breathe {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* מניעת גרירה/בחירה/תפריט "שמור תמונה" (long-press ב-iOS) על כל תמונה
   באתר - לוגו, wordmark, גלריה - לא רק על תמונת ה-lightbox (ראה גם ה-
   contextmenu listener הגלובלי ב-js/main.js). לא הגנה הרמטית (screenshot
   תמיד אפשרי), רק חוסמת את דרכי ההורדה הנפוצות. */
img {
  max-width: 100%; display: block;
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}

a { color: inherit; text-decoration: none; }

/* בחירת טקסט בגוון הפלטה */
::selection { background: rgba(176, 38, 255, 0.55); color: #fff; }

/* סקרולבר מותאם */
* { scrollbar-width: thin; scrollbar-color: var(--purple) transparent; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--purple), var(--turquoise));
  border-radius: 10px; border: 2px solid var(--bg);
}

/* מצב פוקוס נגיש (מקלדת בלבד) */
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; border-radius: 6px; }

/* שובל חלקיקים פסיכדלי אחרי העכבר/אצבע - מעל התוכן, לא חוסם קליקים */
.trail-canvas {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .trail-canvas { display: none; } }

/* שכבת גרעין קולנועי - טקסטורה עדינה מעל כל הדף לתחושת עומק פרימיום */
.grain-overlay {
  /* z-index 10001 (מעל ה-Gate, 10000) - כך שטקסטורת הגרעין הפרימיום
     שמופיעה בכל שאר הדף תופיע גם מעל מסך הכניסה, לא רק אחריו */
  position: fixed; inset: 0; z-index: 10001; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* פס התקדמות גלילה בראש הדף */
.scroll-progress {
  position: fixed; top: 0; right: 0; height: 3px; width: 0%;
  z-index: 450; pointer-events: none;
  background: var(--neon-grad);
  box-shadow: 0 0 12px rgba(176, 38, 255, 0.7);
  transition: width 0.1s linear;
}
/* תווית "איפה בסיפור" - pill קטן צמוד לפס ההתקדמות, מתחלף בין 4 שמות
   סקציה. opacity מנוהל ב-JS (לא רק CSS) כדי לייצר crossfade אמיתי בין
   טקסטים (fade-out, אז שינוי טקסט, אז fade-in) - לא רק fade-in חד-פעמי. */
.scroll-progress-label {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 449; pointer-events: none;
  padding: 0.35rem 1.1rem; border-radius: 50px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: #fff; white-space: nowrap;
  background: rgba(10, 6, 18, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.scroll-progress-label.visible { opacity: 1; }
@media (max-width: 600px) {
  .scroll-progress-label { font-size: 0.7rem; padding: 0.3rem 0.9rem; top: 10px; }
}

/* כיבוד העדפת תנועה מופחתת - נגישות */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* ===== PRELOADER ===== */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg) 70%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#preloader.preloader-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; padding: 0 1.5rem; }
.preloader-icon { width: min(200px, 55vw); height: auto; margin: 0 auto 0.6rem; filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5)); animation: rhino-pulse 2.2s ease-in-out infinite; }
.preloader-wordmark { margin-bottom: 1.6rem; }
@keyframes rhino-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.preloader-bar-track { width: min(260px, 70vw); height: 5px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; margin: 0 auto; }
.preloader-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--purple), var(--turquoise)); border-radius: 6px; box-shadow: 0 0 12px var(--turquoise); transition: width 0.25s var(--ease-out-expo); }
.preloader-hint {
  margin-top: 1.1rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, var(--purple), var(--turquoise), var(--magenta), var(--gold), var(--purple));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: preloader-hue 3.5s linear infinite;
}
@keyframes preloader-hue {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.app-hidden { opacity: 0; }

/* ===== GATE SCREEN - מסך כניסה, מוצג לפני רצף הגלילה. z-index גבוה
   מהפריילודר (9999) - position:fixed, לא תופס מקום ב-layout flow, לא
   משפיע בכלל על מדידות ScrollTrigger. אפקט "Iris Wipe" - עיגול clip-path
   שמתכווץ מהמסך המלא לנקודת הלחיצה (--gate-x/--gate-y, נקבעים ב-JS). ===== */
.gate-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg) 70%);
  clip-path: circle(150% at var(--gate-x, 50%) var(--gate-y, 50%));
  /* הוארך מ-0.9s + עקומה נעימה יותר ("easeInOutQuart"-ish) - מרגיש יותר
     קולנועי/מכוון, פחות "מכני". מתואם עם ה-setTimeout שמסיר את השער
     לגמרי מה-DOM ב-initGateScreen (js/main.js). */
  transition: clip-path 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  /* Pull-to-Refresh ממומש עצמאית ב-JS (initGateScreen, לא מסתמך על תמיכת
     דפדפן מובנית - ל-Safari ב-iOS אין כזו בכלל לאתרים רגילים) - JS קורא
     ל-preventDefault תמיד על touchmove כאן, כך שהדף מתחת לעולם לא נגלל
     בפועל. touch-action:pan-y נשאר כדי לחסום מחוות נוספות (זום-בצביטה
     וכו') בלי להתערב בהחלטת ה-JS. */
  touch-action: pan-y;
}
.gate-screen.gate-closing { clip-path: circle(0% at var(--gate-x, 50%) var(--gate-y, 50%)); }

/* אינדיקטור "משוך לרענון" - עוקב אחרי מרחק המשיכה בפועל (transform/opacity
   inline מ-JS, ראה updatePtrIndicator ב-initGateScreen). transition רק על
   הצבע (לא transform/opacity - אלה מתעדכנים כל פריים ישירות ב-JS, transition
   עליהם היה יוצר עיכוב/ריצוד מול תזוזת האצבע בפועל). translate(-50%,-100%)
   בסיסי = מוסתר מעל קצה המסך; ה-JS מזיז כלפי מטה ביחס למרחק המשיכה. */
.ptr-indicator {
  position: fixed; top: 0; left: 50%; z-index: 10002;
  transform: translate(-50%, -100%);
  width: 44px; height: 44px; margin-top: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 10, 38, 0.85);
  border: 1.5px solid var(--turquoise);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  color: var(--turquoise);
  opacity: 0;
  pointer-events: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* חוצה את הסף - "שחרר לרענון": מתחלף לזהב + החץ מסתובב (ב-JS, transform
   על ptr-indicator-icon). */
.ptr-indicator.ptr-ready { color: var(--gold); border-color: var(--gold); }
.ptr-indicator-icon { width: 22px; height: 22px; transition: transform 0.15s ease; }

/* נעילת גלילה מלאה כל עוד השער מוצג - הקלאס קיים כבר ב-HTML הראשוני
   (על ה-<html>, לא רק מתווסף ב-JS) כדי שהנעילה תהיה פעילה מהרגע הראשון,
   לפני שה-JS אפילו רץ. מוסר ב-closeGate() כשהשער נסגר. */
html.gate-locked, html.gate-locked body { overflow: hidden; }

/* הוסר: החריגה שהתירה overflow-y:visible במגע (כדי לתת לדפדפן "שורש
   גלילה" לזהות PTR מובנה) - Pull-to-Refresh עבר למימוש עצמאי לגמרי ב-JS
   (location.reload(), ראה initGateScreen) שלא תלוי בזיהוי גלילה של
   הדפדפן בכלל, אז אין יותר צורך לשחרר את overflow:hidden במגע - הנעילה
   נשארת מלאה בכל המכשירים באופן אחיד, פשוט יותר וללא הסיכון שדף בטעות
   יתחיל להיגלל אם JS מפספס איזשהו edge case. */

/* רקע "aurora" אבסטרקטי מונפש - 3 כדורי צבע ענקיים מטושטשים שנעים לאט,
   כל אחד במחזור זמן שונה כדי שלא ייראה מכני/חוזר. blur על המכל החיצוני
   (לא על כל כדור בנפרד) לחיסכון בביצועים. מיקומים מפוזרים ו-blur מתון
   יותר (60px, לא 80px) כדי ששלושת הצבעים יישארו ניכרים כאזורים נפרדים,
   לא יתמזגו לכתם סגול-מגנטה אחיד. */
.gate-orbs { position: absolute; inset: -20%; filter: blur(60px); opacity: 0.7; pointer-events: none; }
.gate-orb { position: absolute; border-radius: 50%; }
.gate-orb-1 { width: 42vmax; height: 42vmax; background: var(--purple); top: -8%; left: 5%; animation: gate-orb-1 10s ease-in-out infinite; }
/* min(44vmax,70vw) - לא רק 44vmax: על מסך צר וגבוה (נייד, vmax=הגובה),
   44vmax היה מתנפח לכמעט רוחב המסך כולו ופולש לאזור הכפתורים למרות המיקום
   בפינה. ה-70vw מגביל את הרוחב בפועל יחסית לרוחב המסך עצמו, לא לגובה. */
.gate-orb-2 { width: min(44vmax, 70vw); height: min(44vmax, 70vw); background: var(--turquoise); bottom: 5%; left: 5%; animation: gate-orb-2 12s ease-in-out infinite; }
.gate-orb-3 { width: 40vmax; height: 40vmax; background: var(--magenta); top: 8%; right: -5%; animation: gate-orb-3 14s ease-in-out infinite; }
/* טווח תזוזה גדול יותר (היה 10-15%, עכשיו 22-30%) + קצב מהיר יותר (היה
   18-26s, עכשיו 10-14s) - כדי שהתנועה תהיה ניכרת בבירור, לא רק "בתיאוריה"
   מתחת לטשטוש הכבד. עדיין easing רך (ease-in-out) כדי שיישאר "עדין". */
@keyframes gate-orb-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22%, 28%) scale(1.2); } }
@keyframes gate-orb-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-25%, -20%) scale(1.15); } }
@keyframes gate-orb-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-28%, 24%) scale(0.85); } }

/* קנבס "עשן נוזלי" (WebGL shader, ראה initGateFluidShader ב-js/main.js) -
   יושב בדיוק באותו מקום כמו .gate-orbs (inset:0 מלא, לא ה-inset:-20% של
   .gate-orbs - הקנבס מצייר את כל הרעש/הטשטוש בעצמו ב-shader, לא צריך
   "לברוח" מהקצוות כמו כדורי ה-blur הקבועים). opacity:0 כברירת מחדל - עולה
   ל-1 רק אחרי שה-JS מאשר בפועל שה-shader קומפל ורץ בהצלחה (ראה
   .gate-fluid-active למטה) - כך שכל כשל (WebGL לא נתמך, קומפילציה נכשלה)
   פשוט משאיר את הקנבס שקוף לצמיתות, בלי מסך שחור/שבור. transition קצר
   יחסית (0.5s, היה 1.4s) - דווח בבדיקה אמיתית שה-crossfade האיטי גרם
   לכתמי האאורה הישנים "להבליח" לזמן ניכר לפני שהעשן משתלט; ה-shader עצמו
   כבר מוכן לרוב תוך פריים-שניים (JS סינכרוני ברובו), אז אין צורך במעבר
   ארוך - 0.5s עדיין מספיק חלק כדי לא להרגיש כמו קפיצה, אבל לא "מבליח". */
.gate-fluid-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* "חור" שקוף במרכז - בדיוק מעל טור התוכן (לוגו/כותרת/כפתורים), כדי
     שהעשן לעולם לא יצטייר מתחת לכפתורים ולא יפגע בקריאות/במראה שלהם.
     alpha=0 (שקוף) בתוך האליפסה = הקנבס נחתך שם ומה שמתחתיו (.gate-orbs)
     נראה ישירות; alpha=1 (אטום) מ-88% והלאה = הקנבס מצויר במלואו בצדדים.
     מעבר הדרגתי (לא חיתוך חד) כדי שלא ייראה כמו "חלון" מלאכותי. */
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 50% 50%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 88%);
  mask-image: radial-gradient(ellipse 46% 62% at 50% 50%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 88%);
}
.gate-fluid-canvas.gate-fluid-active { opacity: 1; }
/* כתמי האאורה הקבועים (.gate-orbs) נשארים גלויים גם כשה-shader פעיל -
   לפי בקשה מפורשת (לא להסתיר את הרקע עם הגוונים בצדדים). הקנבס עצמו
   עכשיו שקוף חלקית (alpha ב-display shader, ראה initGateRealFluidSim
   ב-js/main.js) - כך שהאאורה נראית "מתחת"/דרך העשן באזורים בלי דיו,
   ולא רק בחור המרכזי של המסכה.
   הוסר: .gate-glow (זוהר-עכבר לבן ישן, initGateAuroraGlow) - התברר
   שזה מקור "העיגול הלבן המהבהב סביב הסמן" שדווח (רץ רק בדסקטופ-עכבר-
   אמיתי, בדיוק ההקשר שבו הבאג דווח) - מיותר עכשיו שהעשן עצמו כבר מגיב
   לסמן, הוסר לגמרי (JS+CSS+ה-div ב-index.html) במקום להסתמך על היררכיית
   CSS כדי להסתיר אותו כש-gate-fluid-on פעיל. */

.gate-inner {
  position: relative; z-index: 1; text-align: center; padding: 0 1.5rem;
  /* בסגירה, התוכן (לוגו/טקסט/כפתורים) דוהה+מתכווץ מהר בפני עצמו - במקום
     להיחתך פתאומית ע"י מעגל ה-clip-path שמצטמצם (שהיה נראה כאילו הטקסט
     "נגזר" באמצע). מהיר יותר (0.45s) מסגירת המעגל (1.05s) כך שהתוכן כבר
     נעלם לגמרי הרבה לפני שהפורטל מסיים להיסגר. */
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.gate-screen.gate-closing .gate-inner { opacity: 0; transform: scale(0.94); }

/* "התפרצות" אנרגיה בנקודת הלחיצה - טבעת+הבזק אור שמתרחבים מיד עם הסגירה,
   לפני/יחד עם התכווצות ה-clip-path - נותן תחושת "שער שנפתח באנרגיה" במקום
   רק חיתוך גיאומטרי יבש. יורש --gate-x/--gate-y מ-.gate-screen (אלמנט הורה
   ישיר, position:fixed לא יוצר containing block חדש ל-clip-path). */
.gate-burst { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.gate-burst::before, .gate-burst::after {
  content: ''; position: absolute;
  left: var(--gate-x, 50%); top: var(--gate-y, 50%);
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.gate-burst::before { background: radial-gradient(circle, #fff 0%, var(--turquoise) 35%, transparent 70%); }
.gate-burst::after { border: 2px solid var(--turquoise); box-shadow: 0 0 30px 6px rgba(0,255,240,0.6); }
.gate-screen.gate-closing .gate-burst { opacity: 1; animation: gate-burst-fade 0.7s ease-out forwards; }
.gate-screen.gate-closing .gate-burst::before { animation: gate-burst-core 0.6s cubic-bezier(0.15, 0.9, 0.3, 1) forwards; }
.gate-screen.gate-closing .gate-burst::after { animation: gate-burst-ring 0.8s cubic-bezier(0.15, 0.9, 0.3, 1) forwards; }
@keyframes gate-burst-core { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(26); opacity: 0; } }
@keyframes gate-burst-ring { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(48); opacity: 0; } }
@keyframes gate-burst-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* שימוש חוזר מדויק בתבנית "KARNAFETRO" של הפריילודר (font-family/
   letter-spacing; מילוי הגרדיאנט/הזוהר/העיוות מוגדרים בכלל משותף למטה,
   ראה .preloader-wordmark, .gate-wordmark, .logo-title, .footer-wordmark) */
.gate-wordmark { margin-bottom: 1rem; }
.gate-logo {
  width: min(120px, 30vw); height: auto; margin: 0 auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5));
  animation: rhino-pulse 2.2s ease-in-out infinite;
}
/* טקסט "היכנסו לעולם שלי" - עבר מפסקת .gate-invite העצמאית הישנה (מעל
   הכפתורים) לתוך #gateEnterBtn עצמו (ראה index.html) - אותו פונט/גרדיאנט
   זוהר בדיוק, רק מוקטן כדי לשבת בנוחות בתוך כפתור בודד. */
.gate-invite-text {
  display: block;
  font-family: var(--font-display-he);
  font-size: clamp(1.3rem, 4.6vw, 1.9rem); font-weight: 800; line-height: 1.3;
  background: linear-gradient(90deg, var(--purple), var(--turquoise), var(--magenta), var(--gold), var(--purple));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gate-invite-hue 9s linear infinite;
  white-space: nowrap;
}
@keyframes gate-invite-hue {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ===== מבנה "כפתור מתפצל" - #gateButtons הוא wrapper עם גובה קבוע (נקבע
   ב-JS, updateGateButtonsHeight ב-js/main.js) - חשוב: לפני התיקון הזה
   gateEnterBtn היה היחיד בזרימה הרגילה וקבע את גובה ה-wrapper; כש-JS היה
   מסתיר אותו לגמרי (display:none) בסוף אנימציית הפיצול, הגובה קרס ל-0,
   מה שגרם ל-gate-inner (ממורכז אנכית ע"י gate-screen) "לקפוץ" ולהזיז את
   הלוגו/הכותרת שמעליו. התיקון: gateEnterBtn ו-gateSplitRow שניהם
   position:absolute וממורכזים סביב אותה נקודה, ו-#gateButtons מקבל גובה
   מפורש שלא תלוי באף אחד מהם. margin-top - ריווח מהלוגו/וורדמארק שמעל. ===== */
.gate-buttons { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 2.8rem; }

/* כפתור כניסה יחיד - פיל ניטרלי (לא צובע לכיוון "עם"/"בלי" סאונד), הטקסט
   הזוהר בפנים הוא הבולט. דועך+מתכווץ בפיצול (gate-buttons.is-split).
   position:absolute (לא relative) - ראה הערה למעלה על גובה קבוע. */
.gate-enter-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  overflow: visible;
  padding: 1.25rem 3rem; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background 0.3s ease;
}
.gate-enter-btn:hover { transform: translate(-50%, -50%) scale(1.04); border-color: var(--turquoise); background: rgba(255,255,255,0.13); }
.gate-buttons.is-split .gate-enter-btn { opacity: 0; transform: translate(-50%, -50%) scale(0.4); pointer-events: none; }

/* שורת שני כפתורי עם/בלי-סאונד - ממורכזת בדיוק על מקום gate-enter-btn,
   מתחילה מכווצת סביב אותה נקודת מרכז (scale קטן) ומתרחבת ל-scale(1) -
   נראה כאילו הכפתור "מתפצל" משם החוצה לשני הצדדים, לא רק מופיע. */
.gate-split-row {
  position: absolute; top: 50%; left: 50%;
  /* width:max-content הוא התיקון האמיתי לבאג "הכפתורים יוצאים בעמודה" -
     בלעדיו, אלמנט position:absolute עם left:50% (בלי right) מקבל shrink-
     to-fit width שמוגבל ל"חצי המסך" הנותר מ-50% ועד לקצה ה-containing
     block, לא לרוחב המלא של שני הכפתורים יחד - מה שהכריח flex-wrap לשבור
     לשתי שורות גם כשהיה מקום אופקי אמיתי. max-width נשאר כרשת ביטחון
     למסכים צרים מאוד (עם flex-wrap עדיין מוגדר). */
  width: max-content; max-width: min(94vw, 26rem);
  display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center;
  /* 2rem, לא 1.1rem - כל כפתור מקבל halo (.gate-play-ring) עם inset:-8px
     שאוכל חלק מה-gap הנראה לעין; בלי הריווח הנוסף הטבעות כמעט נגעו זו בזו. */
  gap: 2rem;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.32s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gate-buttons.is-split .gate-split-row { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

/* min-height משותף - כך ש"עם סאונד" (שתי שורות: label+badge) ו"בלי סאונד"
   (שורה אחת) יישארו באותו גובה בדיוק, בלי JS. justify-content:center
   ממרכז אנכית את שורת "בלי סאונד" הבודדת בתוך הגובה הנוסף. */
.gate-play-btn, .gate-btn-silent {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; min-height: 4.6rem;
}
.gate-btn-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* כפתור ראשי - פיל מלבני (עקבי עם .cta-btn באתר), ה-CTA הבולט מבין השניים.
   flex-direction:column (לא row כמו .gate-btn-silent) - שורת האייקון+טקסט
   (.gate-btn-main) למעלה, "מומלץ!" קטן יותר (.gate-btn-badge) מתחתיה.
   שדרוג עיצובי (סבב 38): גרדיאנט תלת-גוני + שכבת גלוס/ברק (.gate-btn-shine)
   + טקסט "מתכתי" זז (gate-btn-label-sheen) במקום צבע שטוח - כדי שהכפתור
   יבלוט משמעותית יותר מ-.gate-btn-silent (הבדל היררכיה, לא רק צבע שונה). */
.gate-play-btn {
  position: relative; overflow: visible;
  flex-direction: column; gap: 0.3rem;
  padding: 1rem 2.3rem 0.95rem; border-radius: 50px;
  /* Secular One קיים בגוף אחד בלבד (400) - font-weight:700 מפעיל "בולד
     מלאכותי" (הדפדפן מעבה את הקווים בעצמו) - נדרש כי המשתמש דיווח שהטקסט
     קטן/חלש מדי, בעיקר בנייד. -webkit-text-stroke לחיזוק הבולטות מוגדר
     בנפרד על .gate-btn-main span (למטה) עם צבע מפורש, לא כאן - כי הטקסט
     שם צבוע ב-color:transparent (טריק הגרדיאנט), ו-currentColor שהיה
     יורש מכאן היה יוצא שקוף גם הוא. */
  font-family: var(--font-display-he); font-size: 1.3rem; font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold); border: 1px solid rgba(255,255,255,0.35); cursor: pointer;
  background: linear-gradient(95deg, var(--purple) 0%, var(--turquoise) 55%, var(--magenta) 100%);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 24px rgba(0,255,240,0.45),
    0 0 44px rgba(176,38,255,0.3);
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.35s ease;
}
.gate-play-btn:hover {
  transform: scale(1.055) translateY(-3px);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 34px rgba(0,255,240,0.6),
    0 0 60px rgba(176,38,255,0.4);
}
.gate-play-btn:active { transform: scale(0.98) translateY(-1px); }

/* שכבת גלוס (גרדיאנט לבן עדין מלמעלה) + "ברק" חולף בהעברת עכבר - עצמאית
   וממוקמת absolute כדי שתוכל overflow:hidden משלה (לחתוך את הברק לצורת
   הפיל), בלי להגביל את .gate-play-btn עצמו ל-overflow:hidden (שהיה חותך
   את התג הצף .gate-btn-badge שיוצא מעבר לקצה העליון). */
.gate-btn-shine {
  position: absolute; inset: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%);
}
.gate-btn-shine::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-out-expo);
}
.gate-play-btn:hover .gate-btn-shine::after { left: 140%; }

/* position:relative;z-index:1 חובה - בלעדיו שכבת .gate-btn-shine
   (absolute) הייתה מצטיירת מעל הטקסט/אייקון (אלמנטים ממוקמים תמיד
   מצטיירים מעל אלמנטים לא-ממוקמים באותו stacking context, בלי קשר לסדר
   ב-DOM). */
.gate-btn-main { display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; }

/* טקסט "מתכתי" - גרדיאנט לבן-זהב-לבן שזז לאט על הטקסט עצמו (אותה טכניקה
   כמו .gate-invite-text בכפתור הכניסה, רק עדינה/איטית יותר) - במקום צבע
   זהב שטוח. */
.gate-btn-main span {
  background: linear-gradient(90deg, #fff, var(--gold), #fff);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* מסגרת דקה סביב האותיות (לא currentColor - הצבע כאן שקוף בכוונה בשביל
     טריק הגרדיאנט) - מחזקת את הבולטות/הקריאות של הטקסט, בעיקר בנייד. */
  -webkit-text-stroke: 0.4px rgba(42, 20, 0, 0.6);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: gate-btn-label-sheen 5s ease-in-out infinite;
}
@keyframes gate-btn-label-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* תג "מומלץ!" - הפך מטקסט שטוח בתוך הכפתור לתג-סרט (ribbon) צף מעל הפינה
   העליונה, עם רקע גרדיאנט זהב, נטייה קלה ("מדבקה"), וברק שחולף עליו כל
   כמה שניות. top:-0.5rem (כ-8px) - נשאר קרוב לקצה הפיל, לא בולט מעבר
   לטבעת gate-play-ring/gate-ring (שגם היא inset/pad כ-8px, ראה JS
   updateGateRing) כדי שלא ייראה חתוך. */
.gate-btn-badge {
  position: absolute; top: -0.5rem; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.85rem; border-radius: 999px;
  font-family: var(--font-display-he); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em;
  color: #2a1400;
  background: linear-gradient(100deg, #ffe27a, var(--gold), #ffe27a);
  background-size: 220% 100%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 14px rgba(255,204,0,0.7), 0 0 0 1px rgba(255,255,255,0.5) inset;
  animation: gate-badge-sheen 4s ease-in-out infinite;
  overflow: hidden;
  z-index: 2;
}
.gate-btn-badge-text { position: relative; z-index: 1; }
.gate-btn-badge::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.85), transparent);
  transform: skewX(-18deg);
  animation: gate-badge-shine 3.2s ease-in-out infinite;
}
@keyframes gate-badge-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes gate-badge-shine { 0%, 15% { left: -130%; } 45%, 100% { left: 140%; } }
/* מסגרת זוהרת פועמת - span משותף (.gate-play-ring) בשלושת הכפתורים
   (הכניסה + שני כפתורי הפיצול), לא רק בכפתור הבודד. */
.gate-play-ring {
  position: absolute; inset: -8px; border-radius: 50px;
  border: 1.5px solid rgba(0,255,240,0.5);
  animation: gate-play-ring-pulse 2.4s ease-in-out infinite;
}
@keyframes gate-play-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,240,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(0,255,240,0); }
}

/* ===== אנימציית המתנה (#gateRing) - 3 הילות קונצנטריות (.gate-halo-1/2/3)
   שנושמות (scale+opacity) בקצבים שונים סביב הכפתור שנלחץ בפועל ("עם
   סאונד"/"בלי סאונד" - gateRingTarget, לא שניהם יחד ולא כפתור הכניסה).
   #gateRing עצמו הוא ה"טבעת בסיס" שממוקמת/נמדדת ב-JS (updateGateRing,
   js/main.js) לפי getBoundingClientRect של הכפתור שנלחץ + ריווח צמוד קטן
   (RING_PAD) - שלוש ההילות (inset:0, כל אחת עם עיכוב/משך אנימציה משלה)
   נושמות פנימה/החוצה מאותו בסיס. לפני שנלחץ כפתור אין טבעת בכלל. גלויה
   רק בזמן טעינה בפועל (gate-buttons.is-loading, מופעל/מוסר ב-
   beginGateTransition). ===== */
.gate-ring {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
}
.gate-buttons.is-loading .gate-ring { opacity: 1; }
.gate-halo {
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid transparent;
  filter: blur(3px);
}
.gate-halo-1 { border-color: var(--purple); box-shadow: 0 0 14px 2px rgba(176,38,255,0.55); animation: gate-halo-breathe 1.8s ease-in-out infinite; }
.gate-halo-2 { border-color: var(--turquoise); box-shadow: 0 0 14px 2px rgba(0,255,240,0.55); animation: gate-halo-breathe 2.4s ease-in-out infinite -0.4s; }
.gate-halo-3 { border-color: var(--magenta); box-shadow: 0 0 14px 2px rgba(255,0,200,0.55); animation: gate-halo-breathe 3s ease-in-out infinite -0.9s; }
@keyframes gate-halo-breathe {
  0%, 100% { transform: scale(0.88); opacity: 0.85; }
  50% { transform: scale(1.22); opacity: 0.15; }
}

.gate-play-btn:disabled, .gate-btn-silent:disabled {
  opacity: 0.55; cursor: default; pointer-events: none;
}

/* ===== טקסטים מתחלפים בזמן טעינה (#gateLoadingText) - שמור מקום קבוע
   (min-height) תמיד, כך שההופעה/היעלמות לא מזיזה את שאר תוכן השער.
   גלוי רק כש-#gateButtons מקבל is-loading (ראה beginGateTransition,
   js/main.js). גודל עם clamp - קריא בנוחות גם בנייד וגם בדסקטופ. ===== */
.gate-loading-text {
  min-height: 1.8em; margin-top: 1.6rem;
  font-family: var(--font-display-he);
  font-size: clamp(1.05rem, 3.8vw, 1.4rem); font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-dim);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  overflow: hidden;
}
/* span.phrase בודד מתחלף בפנים - fade+slide-up עדין בין משפט למשפט, לא
   רק opacity בינארי. displayed רק בזמן טעינה בפועל. */
.gate-loading-text .phrase {
  display: inline-block;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gate-loading-text .phrase.phrase-visible {
  opacity: 1; transform: translateY(0);
}

@media (max-width: 420px) {
  .gate-loading-text { font-size: clamp(0.95rem, 4.6vw, 1.2rem); margin-top: 1.2rem; }
}

/* כפתור משני - pill זכוכית שקוף, מכוון (סבב 38) להיות מעומעם יותר במנוחה
   מהכפתור הראשי בכוונה - כדי שההיררכיה "עם סאונד = ברירת המחדל המומלצת"
   תיקרא ברור יותר - ומתבהר יפה בהעברת עכבר. */
.gate-btn-silent {
  position: relative; /* עוגן ל-.gate-play-ring הפנימי */
  padding: 0.9rem 1.6rem; border-radius: 50px;
  font-family: var(--font-display-he); font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-dim); border: 1.5px solid rgba(255,255,255,0.22);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease,
              transform 0.3s var(--ease-out-back), box-shadow 0.3s ease;
}
.gate-btn-silent .gate-btn-icon { opacity: 0.75; transition: opacity 0.3s ease; }
.gate-btn-silent:hover {
  border-color: rgba(0,255,240,0.55);
  background: rgba(255,255,255,0.1);
  color: var(--turquoise);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 10px rgba(0,255,240,0.45);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 16px rgba(0,255,240,0.25);
  transform: translateY(-2px);
}
.gate-btn-silent:hover .gate-btn-icon { opacity: 1; }

@media (max-width: 420px) {
  /* מסך צר מאוד - שני הכפתורים לא תמיד נכנסים בשורה אחת ליד לוגו/וורדמארק
     רחב; flex-wrap (מוגדר למעלה) כבר מאפשר גלישה לשתי שורות, כאן רק
     מצמצמים padding/font-size כדי שגם במצב-שורה-אחת יהיה נוח יותר. */
  .gate-play-btn, .gate-btn-silent { min-height: 4.25rem; }
  .gate-play-btn { padding: 0.85rem 1.6rem 0.8rem; font-size: 1.12rem; }
  .gate-btn-silent { padding: 0.8rem 1.25rem; font-size: 0.98rem; }
  .gate-btn-badge { font-size: 0.65rem; padding: 0.22rem 0.6rem; top: -0.45rem; }
  .gate-split-row { gap: 1.4rem; }
}

/* ===== כפתור בקרת סאונד קבוע - פינה תחתונה-ימנית. מוסתר עד שמסך הכניסה
   נסגר (מוסר attribute hidden ב-JS). ===== */
.sound-toggle {
  /* פינה שמאל-תחתונה, אותו left בדיוק כמו .contact-fab (שמאל-עליון) -
     כדי ששני הכפתורים ישבו על אותו קו אנכי */
  position: fixed; bottom: clamp(0.8rem, 2.5vh, 1.3rem); left: clamp(0.8rem, 3vw, 1.6rem);
  z-index: 401;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(20, 10, 38, 0.72); border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: transform 0.3s var(--ease-out-back), border-color 0.3s ease;
}
.sound-toggle:hover { transform: scale(1.1); border-color: var(--turquoise); }
.sound-toggle-icon { width: 22px; height: 22px; }
.sound-toggle .sound-mute-x { display: none; }
.sound-toggle.muted .sound-eq { display: none; }
.sound-toggle.muted .sound-mute-x { display: block; }
/* עדכון height/y של .eq-bar קורה הרבה פעמים בשנייה (requestAnimationFrame) -
   בלי transition הפסים "קופצים" חד בדיוק לפי המוזיקה (רצוי - זה אמור להיות
   equalizer אמיתי, לא מוחלק). transition היה הופך את זה למרוח/מאחר. */
.eq-bar { transition: none; }

/* ===== SCENE SECTIONS (scroll-scrubbed canvas) ===== */
.scene-section {
  position: relative;
  height: 400vh;
}
/* הסצנה המאוחדת (main-sequence, 15 משפטים) - ארוכה יותר, מחליפה את סכום 4
   הסצנות הישנות + "מי אני" (שהיו יחד בערך 1600-1700vh) כדי לשמור על אותה
   תחושת קצב גלילה כללית. */
#scene-main { height: 1600vh; }
.scene-pin {
  position: sticky;
  top: 0;
  /* הוחזר מ-100dvh: .scene-section הוא 400vh (יחידה סטטית), ו-dvh על ה-pin
     משתנה בזמן אמת כשסרגל הכתובת של הדפדפן מופיע/נעלם - שתי היחידות
     יוצאות מסנכרון תוך כדי גלילה וגורמות למסך שחור. במקום זה, מסתמכים
     על מאזין visualViewport.resize (למטה) שקורא ל-ScrollTrigger.refresh(). */
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(3rem, 11vh, 7rem);
}
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* דהייה קולנועית מ/אל שחור בקצוות כל סצנה - בשליטת js/main.js לפי התקדמות הסקרול */
.scene-fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
/* וילון סקציות תוכן - כמו .scene-fade, בשליטת inline opacity רציף מ-js/main.js
   לפי התקדמות הגלילה (לא toggleClass) - זהה בדיוק לטכניקה של הסצנות עצמן,
   כדי למנוע בעיות specificity/מצב-ביניים שגרמו למסך שחור תקוע. */
.section-curtain { opacity: 1; }
.scene-canvas::after { content: ''; }
.scene-pin::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,6,18,0.35) 0%, rgba(10,6,18,0.15) 40%, rgba(10,6,18,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.scene-overlay {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 780px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  margin: 0 1.5rem;
  padding: 1rem clamp(0.5rem, 5vw, 1.5rem);
}
/* זוהר צבעוני צמוד לטקסט עצמו (text-shadow רב-שכבתי) במקום פאנל/ריבוע רקע -
   נותן קריאות מלאה על גבי כל פריים בלי לכסות את הדמות שמתחת. צבע ייחודי לכל
   סצנה כדי לשמור על זהות חזותית עקבית עם שאר האלמנטים הניאון שלה. */
.glow-turquoise { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px var(--turquoise), 0 0 24px rgba(0,255,240,0.8), 0 0 46px rgba(0,255,240,0.5); }
.glow-purple { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px var(--purple), 0 0 24px rgba(176,38,255,0.8), 0 0 46px rgba(176,38,255,0.5); }
.glow-gold { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px var(--gold), 0 0 24px rgba(255,204,0,0.8), 0 0 46px rgba(255,204,0,0.5); }
.glow-magenta { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px var(--magenta), 0 0 24px rgba(255,0,200,0.8), 0 0 46px rgba(255,0,200,0.5); }
.glow-gold-soft { color: #fff8e6; text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 14px rgba(255,204,0,0.55); }

/* דהייה עדינה רק ממש בקצה הסצנה, לפני שהיא משתחררת לתוכן הבא */
.scene-overlay.fading-out { opacity: 0; transform: translateY(-16px); }

/* טקסטים משניים ("ביטים") שמתחלפים באמצע הגלילה - בד"כ תג עליון קטן, מעל
   התוכן הראשי. מוצג/מוסתר ע"י js/main.js בהתאם לטווח ה-progress שלו. */
.scene-beats {
  position: absolute; top: clamp(4.5rem, 12vh, 7rem); right: 0; left: 0;
  z-index: 2; text-align: center; pointer-events: none;
}
/* מעבר "blur-to-focus" - הטקסט נכנס מטושטש/מוקטן/שקוף ומתמקד לחדות מלאה,
   מרגיש הרבה יותר קולנועי מ-fade+translateY פשוט. */
.scene-beat {
  display: inline-block;
  font-size: clamp(1rem, 2.6vw, 1.3rem); font-weight: 700; letter-spacing: 0.02em;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 0 20px rgba(0,255,240,0.6);
  opacity: 0; filter: blur(9px); transform: translateY(-12px) scale(0.9);
  /* fade-out מהיר (0.3s) - כשה-class visible מוסר, זה הכלל שחוזר לתוקף.
     בלי זה (0.75s זהה לכניסה) הטקסט היוצא נשאר גלוי חלקית הרבה אחרי שהבא
     כבר מתחיל להיכנס - הפער בין הביטים (0.004 progress, ~6vh) נחצה בגלילה
     רגילה תוך פחות מ-750ms, כך ששני הטקסטים נראים "דולפים" זה לתוך זה
     באותה נקודה בדיוק על המסך (שניהם position:absolute באותו מקום). */
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo), filter 0.3s var(--ease-out-expo);
}
.scene-beat.visible {
  opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
  /* fade-in איטי וקולנועי יותר - נשאר כמו שהיה */
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo), filter 0.75s var(--ease-out-expo);
}

/* מכל 14 המשפטים המתחלפים של הסצנה המאוחדת - יושב בחלק התחתון של המסך
   (לא מכסה את פני הדמות באמצע הפריים). בדסקטופ ובמובייל כאחד - לפי בקשת
   המשתמש "בעיקר בתחתית, בלי להסתיר את הדמות". */
.main-lines {
  position: absolute;
  right: 0; left: 0;
  bottom: clamp(9vh, 13vh, 18vh);
  z-index: 2;
  text-align: center;
  pointer-events: none;
  padding: 0 1.5rem;
}
.main-lines .scene-beat {
  /* מוחלט בתוך main-lines (לא display:block רגיל) - כך שכל 14 המשפטים
     יושבים בדיוק באותו מקום, זה על גבי זה, ורק המשפט הגלוי כרגע משפיע על
     הגובה בפועל. בלי זה כל השורות נערמות זו מתחת לזו במסמך (גם הבלתי
     נראות תופסות מקום כי opacity:0 שונה מ-display:none) ומנפחות את הגובה. */
  position: absolute;
  right: 0; left: 0; bottom: 0;
  max-width: 760px;
  margin: 0 auto;
  /* בלי תיבת רקע (הוסרה - נראתה גנרית/לא מתאימה לעיצוב) - קריאות מגיעה מ-
     text-shadow חזק (כפול: שכבת "צל מגע" צמודה שחורה + הזוהר הטורקיז הקיים),
     בדיוק כמו שאר הטקסטים על גבי הווידאו בדף (glow-*). */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95), 0 2px 6px rgba(0,0,0,0.9), 0 4px 14px rgba(0,0,0,0.85),
    0 0 20px rgba(0,255,240,0.5),
    /* זוהר פסיכדלי עדין נוסף (סגול+מגנטה, עוצמה נמוכה) - לא פאנל רקע (הוסר
       בעבר כי כיסה יותר מדי מפני הדמות), רק עוד "נגיעה" צבעונית מאחורי
       הטקסט הקיים. */
    0 0 34px rgba(176,38,255,0.28), 0 0 50px rgba(255,0,200,0.18);
  /* גודל טקסט: הוגדל משמעותית (סבב תיקונים) - היה קטן מדי לקריאה נוחה */
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
}
/* משפט #12 (הציטוט) - "עצירה רגשית", טיפוגרפיה גדולה יותר מכל שאר המשפטים,
   אותו מיקום קבוע. ניסיתי גרדיאנט "נאון-נע" (background-clip:text) כאן,
   אבל נתן דיווח שבדפדפן אמיתי זה יצא בגוון שחור וכמעט בלתי-קריא (כנראה
   -webkit-background-clip:text דורש גם -webkit-text-fill-color:transparent
   מפורש בחלק מהדפדפנים/מכשירים כדי לא ליפול חזרה לצבע ברירת המחדל) -
   הוסר לגמרי, חוזר לטקסט לבן רגיל (color:#fff יורש מ-.scene-beat הבסיסי)
   עם אותו text-shadow קריא כמו שאר 13 המשפטים. */
.scene-beat-quote {
  font-size: clamp(1.9rem, 5vw, 2.8rem) !important;
  font-weight: 700;
  line-height: 1.6;
  max-width: 860px !important;
}
@media (max-width: 600px) {
  /* שומר על המשפטים בתחתית המסך במובייל, מעט גבוה יותר מגרסה קודמת. הערה
     חשובה: .main-lines .scene-beat ממוקם absolute עם right:0/left:0 משלו -
     ה-containing block של אלמנט abs-positioned הוא ה-padding box של ההורה,
     כך ש-padding על .main-lines לא יוצר שום מרווח בפועל (ה-left:0/right:0
     של הילד "מתעלמים" ממנו). לכן המרווח מהצדדים חייב להיות ישירות על
     .scene-beat עצמו (left/right, לא padding על ההורה). */
  .main-lines { bottom: 21vh; }
  .main-lines .scene-beat {
    left: 1.6rem; right: 1.6rem;
    font-size: clamp(1.15rem, 5.5vw, 1.6rem);
  }
  .scene-beat-quote { font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important; }
}

/* Hero */
.logo-title { margin-bottom: 0.7rem; }

/* ===== כיתוב "KARNAFETRO" - תמונה (assets/icons/karnafetro-wordmark.png,
   כיתוב פסיכדלי מעוצב שהמשתמש יצר, רקע ירוק הוסר ב-scripts/process-wordmark.py)
   במקום טקסט+CSS. **נוסה קודם עם CSS טהור** (גרדיאנט מונפש + זוהר + עיוות
   SVG feTurbulence/feDisplacementMap) - יצא מטושטש ולא קריא בבדיקה בפועל
   (המשתמש דיווח), במיוחד בגדלים הקטנים (פוטר/פריילודר). הוחלף בתמונה סטטית
   באיכות גבוהה - לא ריספונסיבית "אינסופית" כמו טקסט וקטורי, אבל קריאה
   וברורה בכל הגדלים בפועל. img{max-width:100%;height:auto} תמיד כרשת
   ביטחון מפני גלישה מהמכל בכל 4 ההקשרים (הרוחב-לגובה של הקובץ ~3:1). */
.preloader-wordmark img, .gate-wordmark img, .logo-title img, .footer-wordmark img {
  display: block; margin: 0 auto;
  max-width: 100%; height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
.preloader-wordmark img { width: clamp(12rem, 46vw, 16.5rem); }
/* גדול יותר מהפריילודר בכוונה - במסך הכניסה זה יושב מעל לוגו הקרנף
   (.gate-logo, max 120px) והמשתמש דיווח שברוחב הקודם זה הרגיש "אותו גודל
   בערך, אולי קצת יותר" - לא מספיק בולט כדוברת הכיתוב הראשי של המסך. */
.gate-wordmark img { width: clamp(16.5rem, 62vw, 23rem); }
.logo-title img { width: clamp(19rem, 62vw, 33rem); }
.footer-wordmark img { width: clamp(11.5rem, 44vw, 15rem); }

/* לוגו קבוע קטן - פינה ימנית עליונה, גלוי רק בראש הדף */
.corner-logo {
  position: fixed; top: clamp(0.8rem, 2.5vh, 1.3rem); right: clamp(0.8rem, 3vw, 1.6rem);
  width: clamp(52px, 8vw, 74px); height: auto;
  z-index: 400; pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
  opacity: 1;
  transition: opacity 0.35s ease;
}
.corner-logo.corner-logo-hidden { opacity: 0; }

/* כפתור "צור קשר" צף - קבוע בפינה הנגדית ללוגו, גלוי לאורך כל הגלילה (לא
   דוהה כמו הלוגו) - כדי שאפשרות ההזמנה תמיד תהיה נגישה, גם באמצע הסצנה הארוכה. */
.contact-fab {
  position: fixed;
  top: clamp(0.8rem, 2.5vh, 1.3rem);
  left: clamp(0.8rem, 3vw, 1.6rem);
  z-index: 401;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 50px;
  background: rgba(20, 10, 38, 0.72);
  border: 1.5px solid #25d366;
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s ease;
  /* "נשימה" עדינה על הכפתור השלם - לא על האייקון/הטקסט שבתוכו בנפרד
     (נוסה קודם, נתן דיווח שנראה כמו "התנגשות" בין שני אלמנטים שמהבהבים
     בקצב שונה זה מזה בתוך אותה שורה). filter:drop-shadow (לא transform!) -
     ה-hover למעלה כבר משתמש ב-transform (translateY+scale); animation
     שמניעה גם היא transform הייתה "מנצחת" תמיד על ה-transition של ה-hover
     (אנימציה גוברת על transition על אותו property) ומבטלת את אפקט ה-hover
     בפועל. filter הוא property נפרד לגמרי מ-transform/box-shadow - הפעימה
     והחזרת ה-hover לא מתנגשות. */
  animation: btn-pulse-glow 2.4s ease-in-out infinite;
  --pulse-glow-color: #25d366;
}
.contact-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 22px #25d366; }
.contact-fab-icon { width: 19px; height: 19px; color: #25d366; flex: 0 0 auto; }
@keyframes btn-pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 9px var(--pulse-glow-color)); }
}
@media (max-width: 480px) {
  .contact-fab span { display: none; }
  .contact-fab { padding: 0.62rem; }
}
.hero-tagline { font-size: clamp(1.1rem, 2.8vw, 1.55rem); font-weight: 500; line-height: 1.9; }
.scroll-hint {
  margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  color: var(--text-dim); font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 600; letter-spacing: 0.05em;
  animation: bob 2s ease-in-out infinite;
}
/* בלי פאנל רקע (הוסר - אותו עיקרון כמו שאר הטקסטים בדף: קריאות מגיעה
   מ-text-shadow, לא מתיבת רקע) - טקסט גדול יותר + זוהר פסיכדלי עדין. */
.scroll-hint > span:first-child {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95), 0 2px 6px rgba(0,0,0,0.9), 0 4px 14px rgba(0,0,0,0.85),
    0 0 20px rgba(0,255,240,0.5),
    0 0 34px rgba(176,38,255,0.28), 0 0 50px rgba(255,0,200,0.18);
}
.scroll-hint-arrow { font-size: 1.2rem; color: var(--turquoise); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.section-title {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}
/* קו-הדגשה גרדיאנט מתחת לכותרות סקציות התוכן */
.content-inner > .section-title { margin-bottom: 2rem; }
.content-inner > .section-title::after {
  content: '';
  display: block; width: 64px; height: 4px; margin: 0.9rem auto 0;
  border-radius: 4px; background: var(--neon-grad);
  box-shadow: 0 0 14px rgba(0, 255, 240, 0.5);
}

/* pulse עדין על כותרת ה-CTA בלבד - ממוקד ל-#cta .section-title (לא ל-
   .section-title גופה, שמשותפת גם לכותרת הגלריה - #gallery לא אמור לפעום). */
/* על .cta-title-text (span פנימי), לא על #cta .section-title עצמו - ה-h2
   הוא זה שמחזיק את ה-::after (הפס הצבעוני מתחת, .content-inner>.section-title
   ::after) - אם ה-scale היה על ה-h2 כולו, הפס היה זז יחד עם הטקסט. */
.cta-title-text { display: inline-block; animation: cta-title-pulse 3s ease-in-out infinite; }
@keyframes cta-title-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.cta-text { margin-bottom: 2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.9; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cta-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 1rem 1.9rem; border-radius: 50px;
  font-weight: 700; font-size: 1.1rem;
  /* color מפורש - חובה: תגי <button> (בשונה מ-<a>) לא יורשים color מ-body
     כברירת מחדל בשום דפדפן (UA stylesheet נותן להם color:buttontext, בד"כ
     שחור) - זו הייתה הסיבה שטקסט כפתור השיתוף (<button>, לא <a> כמו שאר
     מופעי .cta-btn) יצא שחור על רקע כהה, בלתי-נראה. */
  color: var(--text);
  border: 1.5px solid var(--turquoise);
  background: rgba(20, 10, 38, 0.55);
  backdrop-filter: blur(6px);
  will-change: transform;
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* ברק אלכסוני שעובר על הכפתור ב-hover */
.cta-btn::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease-out-expo);
}
.cta-btn:hover::before { left: 130%; }
.cta-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 28px var(--turquoise);
}
.cta-btn-whatsapp:hover { border-color: #25d366; box-shadow: 0 0 28px #25d366; }
.cta-btn-phone:hover { border-color: var(--gold); box-shadow: 0 0 28px var(--gold); }
.cta-btn-email:hover { border-color: var(--magenta); box-shadow: 0 0 28px var(--magenta); }
.cta-btn-share:hover { border-color: var(--magenta); box-shadow: 0 0 28px var(--magenta); }
.cta-icon { width: 19px; height: 19px; flex: 0 0 auto; position: relative; z-index: 1; }
.cta-btn span { position: relative; z-index: 1; }
.cta-btn-whatsapp .cta-icon { color: #25d366; }
.cta-btn-phone .cta-icon { color: var(--gold); }
.cta-btn-email .cta-icon { color: var(--magenta); }

/* ===== CONTENT SECTIONS ===== */
.content-section {
  padding: 7rem 1.5rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
/* זוהר אווירה עדין (aurora) מאחורי התוכן - עומק וצבע בלי להכביד */
.content-section::before {
  content: '';
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(176, 38, 255, 0.18), transparent 60%);
  pointer-events: none; z-index: 0;
}
#gallery::before { background: radial-gradient(ellipse at center, rgba(0, 255, 240, 0.14), transparent 60%); }
.content-section-dark { background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.content-inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.in-view { opacity: 1; transform: translateY(0); }
.content-inner-wide { max-width: 1100px; }
.body-text { color: var(--text-dim); margin-bottom: 1.2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.85; }
.subsection-title {
  font-size: 1.55rem; font-weight: 700; color: #fff; margin: 2.5rem 0 1.2rem;
}
.subsection-title:first-of-type { margin-top: 0; }

/* ===== TIKTOK - כרטיסי thumbnail אחידים ===== */
.tiktok-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  padding: 0.5rem 0.1rem 1.2rem;
}
.tiktok-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 240, 0.25);
  background: linear-gradient(160deg, rgba(176,38,255,0.35), rgba(0,255,240,0.15));
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tiktok-card { transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s ease, border-color 0.3s ease; }
.tiktok-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 24px var(--turquoise); border-color: var(--turquoise); }
.tiktok-card-thumb-wrap { position: absolute; inset: 0; display: block; }
.tiktok-card-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--bg2), rgba(176,38,255,0.25), var(--bg2));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tiktok-card-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out-expo); }
.tiktok-card:hover .tiktok-card-thumb { transform: scale(1.08); }
.tiktok-card-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%);
  transition: background 0.3s ease;
}
/* כפתור נגן זכוכיתי עגול במרכז - SVG משולש עם גרדיאנט מותג (לא Unicode ▶
   שנראה גנרי/תלוי-פונט) + טבעת זוהר שפועמת בעדינות כל הזמן, לא רק ב-hover. */
.tiktok-play-ring {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  transition: background 0.3s ease, border-color 0.3s ease;
  animation: play-ring-pulse 2.6s ease-in-out infinite;
}
.tiktok-play-icon {
  position: relative; z-index: 1;
  width: 20px; height: 20px;
  /* תיקון מרכוז אופטי - משולש פליי "נראה" מוזז שמאלה כשהוא ממורכז מתמטית */
  transform: translateX(-2px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: transform 0.3s var(--ease-out-back);
}
@keyframes play-ring-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 0 0 rgba(0,255,240,0.4); }
  50% { box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 0 9px rgba(0,255,240,0); }
}
.tiktok-card:hover .tiktok-play-ring {
  background: rgba(0, 255, 240, 0.22); border-color: var(--turquoise);
}
.tiktok-card:hover .tiktok-play-icon { transform: translateX(-2px) scale(1.18); }
@media (prefers-reduced-motion: reduce) {
  .tiktok-play-ring { animation: none; }
}

/* Fallback לכרטיסים שה-thumbnail שלהם לא הצליח להיטען (ראה
   scripts/fetch-reel-thumbs.js) - גרדיאנט קבוע במקום שלד מרצד לנצח/תמונה
   שבורה. הקליק עדיין פותח את ה-embed האמיתי במודאל כרגיל. */
.tiktok-card-fallback .tiktok-card-thumb { display: none; }
.tiktok-card-fallback .tiktok-card-skeleton {
  display: block; animation: none;
  background: linear-gradient(135deg, var(--purple), var(--magenta), var(--gold));
}

/* מודאל צפייה בטיקטוק - מרחף מעל כל הדף. חשוב: בלי overflow:hidden/max-height
   על תוכן הפנים - זה בדיוק מה שגרם לחיתוך בניסיונות הקודמים. המודאל החיצוני
   עצמו גולל (overflow-y:auto) אם ה-embed גבוה מהמסך, והתוכן חופשי לתפוס
   את הגובה הטבעי המלא שלו.
   עבר מ-display:none/block ל-opacity+pointer-events (כמו .gallery-lightbox
   למטה) - כדי לאפשר מעבר כניסה אמיתי (fade + מוקאפ FLIP על .tiktok-modal-inner,
   ראה openReelModal/flipMorphIn ב-js/main.js) במקום קפיצה מיידית. .open
   נשאר bookkeeping-בלבד (Escape key וכו') - .visible היא זו ששולטת בנראות
   בפועל, בדיוק כמו ב-gallery-lightbox. */
.tiktok-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(5, 2, 10, 0.94);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4rem 1rem 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.tiktok-modal.visible { opacity: 1; pointer-events: auto; }
.tiktok-modal-inner {
  max-width: 630px; margin: 0 auto;
  /* transition על transform בלבד - חובה בשביל flipMorphIn (המוקאפ מהכרטיס).
     בלי overflow/max-height כאן בכוונה, ראה הערה למעלה. */
  transition: transform 0.4s var(--ease-out-back);
}
.tiktok-modal-close {
  position: fixed; top: 1rem; left: 1rem; z-index: 501;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid var(--turquoise);
  color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
}

/* ===== Lightbox לגלריה - תצוגה מקדימה כמעט-מלאה בלחיצה על תמונה.
   בניגוד ל-.tiktok-modal (display:none/block בלבד) - כאן יש אנימציית
   כניסה/יציאה אמיתית: .open קובע display+pointer-events, .visible (נוסף
   פריים אחרי, ראה openGalleryLightbox ב-js/main.js) מפעיל את ה-transition
   בפועל (opacity+scale). מסגרת ניאון זהה בדיוק לזו שעל כפתורי מסך הכניסה
   (span.gate-play-ring, ראה שם) - רק border-radius מרובע יותר שמתאים
   למלבן תמונה במקום לפיל. ===== */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 2, 10, 0.92);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 3rem 1.2rem;
}
/* .open עצמה בלי סגנון - רק bookkeeping ב-JS (למשל בדיקת Escape); .visible
   היא זו שבפועל שולטת בנראות/אינטראקטיביות, כדי שה-transition על opacity
   יעבוד (base תמיד display:flex, לא display:none). */
.gallery-lightbox.visible { opacity: 1; pointer-events: auto; }
.gallery-lightbox-frame {
  position: relative;
  transform: scale(0.85);
  transition: transform 0.35s var(--ease-out-back);
}
.gallery-lightbox.visible .gallery-lightbox-frame { transform: scale(1); }
.gallery-lightbox-frame img {
  display: block;
  max-width: min(90vw, 900px); max-height: 88vh;
  width: auto; height: auto;
  border-radius: 12px;
  -webkit-user-drag: none; user-select: none;
  /* דעיכה קלה בזמן ניווט בין תמונות (navigateGalleryLightbox) - עצמאית
     מה-transition על .gallery-lightbox עצמו (פתיחה/סגירה), כדי לא להתערב
     בטיימר הסגירה. */
  transition: opacity 0.15s ease;
}
/* אותו span.gate-play-ring בדיוק (border/box-shadow/animation) - רק
   border-radius+inset מותאמים למלבן תמונה, לא לפיל כפתור. */
.lightbox-ring { border-radius: 14px; inset: -4px; }
.gallery-lightbox-close {
  position: fixed; top: 1rem; left: 1rem; z-index: 601;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid var(--turquoise);
  color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
/* חיצי ניווט - עיצוב עקבי עם .gallery-lightbox-close (עיגול, מסגרת
   טורקיז) + hover scale+glow עקבי עם .social-btn:hover/.gate-play-btn:hover.
   סבב 42 - נשארים גם בנייד (היו מוסתרים לגמרי, קטנים יותר כאן) כרמז
   ויזואלי קבוע לכך שיש עוד תמונות לדפדף ביניהן - הניווט בפועל עדיין
   בעיקר swipe על .gallery-lightbox-frame בנייד, החיצים כאן רק "רמז", לא
   מחליפים אותו. */
.gallery-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 601;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid var(--turquoise);
  color: #fff; cursor: pointer;
  transition: transform 0.3s var(--ease-out-back), background 0.3s ease, box-shadow 0.3s ease;
}
.gallery-lightbox-nav svg { width: 26px; height: 26px; }
.gallery-lightbox-nav:hover {
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 14px rgba(0,255,240,0.5);
  transform: translateY(-50%) scale(1.12);
}
.gallery-lightbox-prev { left: 1rem; }
.gallery-lightbox-next { right: 1rem; }
@media (max-width: 600px) {
  .gallery-lightbox-nav { width: 38px; height: 38px; background: rgba(255,255,255,0.06); }
  .gallery-lightbox-nav svg { width: 20px; height: 20px; }
  .gallery-lightbox-prev { left: 0.5rem; }
  .gallery-lightbox-next { right: 0.5rem; }
}

/* רמז-טקסט "החליקו לתמונה הבאה" - מופיע רק בפתיחה הראשונה של הלייטבוקס
   (ראה initGalleryLightbox), דועך אחרי כמה שניות או מיד עם האינטראקציה
   הראשונה (ניווט/סגירה). רק בנייד - בדסקטופ החיצים כבר תמיד גלויים ואין
   מחוות swipe בכלל. */
.gallery-lightbox-hint {
  position: fixed; bottom: 6vh; left: 50%; transform: translateX(-50%);
  z-index: 601; color: #fff; font-size: 0.95rem; font-weight: 600;
  background: rgba(10,6,18,0.55); padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(0,255,240,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
  display: none;
}
.gallery-lightbox-hint.visible { opacity: 1; }
@media (max-width: 600px) {
  .gallery-lightbox-hint { display: block; }
}

/* ===== SOUNDCLOUD - כרטיסי טראק (מצב visual עם עטיפה כרקע) ===== */
.soundcloud-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}
.sc-card {
  position: relative;
  height: 300px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0, 255, 240, 0.3);
  box-shadow: 0 0 18px rgba(0, 255, 240, 0.12);
  background: var(--bg2);
  line-height: 0;
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s ease, border-color 0.3s ease;
}
.sc-card:hover { transform: translateY(-4px); border-color: var(--turquoise); box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 26px rgba(0, 255, 240, 0.25); }
.sc-card iframe { display: block; height: 300px; }
.sc-card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,2,12,0.15) 0%, rgba(5,2,12,0.85) 100%);
}
.sc-card-title {
  position: absolute; right: 1.1rem; bottom: 1rem; left: 4.5rem;
  color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.5;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.sc-card-play {
  position: absolute; left: 1.1rem; bottom: 1rem;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #fff; padding-right: 3px;
  background: rgba(255,255,255,0.12); border: 1.5px solid var(--turquoise);
  backdrop-filter: blur(4px); cursor: pointer;
  transition: transform 0.3s var(--ease-out-back), background 0.3s ease, box-shadow 0.3s ease;
}
.sc-card-play:hover { transform: scale(1.12); background: rgba(0,255,240,0.25); box-shadow: 0 0 22px var(--turquoise); }

@media (max-width: 600px) {
  .soundcloud-tracks { grid-template-columns: 1fr; }
}

/* ===== YOUTUBE - כרטיסי סרטון (thumbnail רשמי + כותרת + כפתור נגן,
   אותה שפה עיצובית בדיוק כמו כרטיסי הסאונדקלאוד) ===== */
.youtube-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}
.yt-card {
  position: relative; aspect-ratio: 16 / 9; height: auto; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0, 255, 240, 0.3);
  box-shadow: 0 0 18px rgba(0, 255, 240, 0.12);
  background: var(--bg2); line-height: 0; cursor: pointer;
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s ease, border-color 0.3s ease;
}
.yt-card:hover { transform: translateY(-4px); border-color: var(--turquoise); box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 26px rgba(0, 255, 240, 0.25); }
.yt-card-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,2,12,0.15) 0%, rgba(5,2,12,0.85) 100%);
}
.yt-card-title {
  position: absolute; right: 0.8rem; bottom: 0.7rem; left: 3.6rem;
  color: #fff; font-weight: 700; font-size: 0.85rem; line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-card-play {
  position: absolute; left: 0.8rem; bottom: 0.7rem;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,0.12); border: 1.5px solid var(--turquoise);
  backdrop-filter: blur(4px);
  transition: transform 0.3s var(--ease-out-back), background 0.3s ease, box-shadow 0.3s ease;
}
.yt-card-play svg { width: 17px; height: 17px; }
.yt-card:hover .yt-card-play { transform: scale(1.12); background: rgba(0,255,240,0.25); box-shadow: 0 0 22px var(--turquoise); }
#youtubeModalInner iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; border-radius: 14px; }

@media (max-width: 600px) {
  .youtube-carousel { grid-template-columns: 1fr; }
}

/* ===== GALLERY - רצועה קולנועית, גלילה נייטיבית של הדפדפן (overflow-x) ===== */
.gallery-filmstrip {
  position: relative;
  /* direction: ltr בכוונה, למרות שהדף כולו RTL: scrollLeft בדפדפן מתנהג אחרת
     ב-RTL (טווח שלילי בכרום) לעומת LTR (טווח חיובי רגיל) - כל מתמטיקת
     האוטופליי/הלולאה האינסופית ב-js/main.js כתובה לפי הקונבנציה הרגילה
     (חיובית). בלי זה, כל ניסיון של הקוד להזיז scrollLeft נחסם/מתאפס אוטומטית
     ע"י הדפדפן כי הוא מחוץ לטווח החוקי - זו הסיבה שהגלריה בפרודקשן לא זזה
     אף פעם לבד. לא משפיע על שום דבר טקסטואלי - זו רק גלריית תמונות. */
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* חובה auto (לא לרשת מ-html שמוגדר smooth) - אחרת כל עדכון scrollLeft של
     האוטופליי מנסה להנפיש בהחלקה, וההנפשות נערמות ומתנגשות = ריצוד. */
  scroll-behavior: auto;
  /* מונע שגרירת אצבע בקצוות הרצועה (למשל בזמן החלפת עותק בלולאה) תיתפס
     ע"י הדפדפן כמחוות "back/forward" בין דפים במובייל. */
  overscroll-behavior-x: contain;
  border-radius: 18px;
  cursor: grab;
  scrollbar-width: none; /* Firefox */
}
.gallery-filmstrip::-webkit-scrollbar { display: none; }
.gallery-filmstrip:active { cursor: grabbing; }
/* נוסף ע"י JS (buildGalleryCarousel) בזמן גרירה בעכבר בפועל - מונע בחירת
   טקסט/תמונה בטעות תוך כדי גרירה (cursor:grabbing כבר מטופל ע"י :active). */
.gallery-filmstrip.gallery-dragging { user-select: none; }
.gallery-track { display: flex; gap: 1rem; }
.gallery-card {
  flex: 0 0 auto;
  position: relative;
  width: clamp(210px, 26vw, 280px);
  aspect-ratio: 4 / 5; /* פשרה טובה בין תמונות לרוחב/לגובה/מרובעות שיש בגלריה */
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4);
  /* אפקט coverflow-lite (scale+opacity לפי מרחק מהמרכז) מוחל כ-inline style
     מ-js/main.js בכל פריים - transform:none כדי שלא יתנגש עם CSS transition. */
  will-change: transform, opacity;
  transition: none;
}
.gallery-slide-fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; /* מעט מוטה למעלה - בד"כ שם הפנים בתמונות טלפון */
}
/* דהייה עדינה בקצוות הרצועה - התמונות "נעלמות" לרקע במקום להיחתך בפתאומיות */
.gallery-fade {
  position: absolute; top: 0; bottom: 0; width: clamp(30px, 6vw, 90px); z-index: 2; pointer-events: none;
}
.gallery-fade-right { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.gallery-fade-left { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.gallery-hint {
  text-align: center; margin-top: 1rem; font-size: 0.9rem; font-weight: 500;
  color: var(--text-dim); opacity: 0.75; letter-spacing: 0.02em;
}

/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
}
.footer-rhino {
  width: 120px; height: auto; margin: 0 auto 0.5rem;
  /* אותה אנימציית pulse בדיוק כמו .gate-logo/.preloader-icon, ביחד עם הילה
     צבעונית מתחלפת (סגול/טורקיז/מגנטה/זהב) סביב הקרנף עצמו - במקום הפס
     הדק שהיה בראש הפוטר (.site-footer::before, הוסר). */
  animation: rhino-pulse 2.2s ease-in-out infinite, rhino-halo 9s ease-in-out infinite;
}
@keyframes rhino-halo {
  0%, 100% { filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(176,38,255,0.7)); }
  25%      { filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(0,255,240,0.7)); }
  50%      { filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(255,0,200,0.7)); }
  75%      { filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(255,204,0,0.7)); }
}
.footer-wordmark { margin-bottom: 0.6rem; }
.footer-tagline { color: var(--text-dim); font-size: 1.05rem; font-weight: 500; margin-bottom: 2.2rem; }
.footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-bottom: 2rem; }
/* אייקונים סטטיים (לא מרחפים - הנפשת float הוסרה, הורגשה מטרידה) בצבעי
   המותג האמיתיים של כל רשת באופן קבוע (לא רק ב-hover). אינסטגרם/טיקטוק
   מקבלים גרדיאנט אמיתי דרך SVG (ראה index.html) כי הצבע שלהם לא אחיד;
   פייסבוק/סאונדקלאוד/יוטיוב עם fill:currentColor וצבע מוצק ב-CSS. */
.social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
}
.social-btn svg {
  width: 38px; height: 38px; fill: currentColor;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  transition: transform 0.3s var(--ease-out-back), filter 0.3s ease;
}
.social-btn:hover svg { transform: scale(1.2) translateY(-3px); }
.social-btn-facebook svg { color: #1877F2; }
.social-btn-facebook:hover svg { filter: drop-shadow(0 0 14px rgba(24,119,242,0.75)); }
.social-btn-soundcloud svg { color: #FF5500; }
.social-btn-soundcloud:hover svg { filter: drop-shadow(0 0 14px rgba(255,85,0,0.75)); }
.social-btn-youtube svg { color: #FF0000; }
.social-btn-youtube:hover svg { filter: drop-shadow(0 0 14px rgba(255,0,0,0.75)); }
.social-btn-instagram:hover svg { filter: drop-shadow(0 0 14px rgba(214,41,118,0.75)); }
.social-btn-tiktok:hover svg { filter: drop-shadow(0 0 14px rgba(37,244,238,0.75)); }

/* כפתור שיתוף - אותו סגנון pill בדיוק כמו .cta-btn (עקביות עיצובית), רק
   קצת יותר קטן/צנוע כי זה תוספת בפוטר, לא CTA ראשי. */
.footer-share { position: relative; display: flex; justify-content: center; margin-bottom: 2rem; }
/* צבע ייעודי (מגנטה - השלישי מתוך 3, אחרי זהב/טורקיז בכפתורי השער) +
   אותו פונט "בעל אופי" כמו כפתורי השער - לא תיקון הבאג בלבד. */
.cta-btn-share {
  padding: 0.75rem 1.6rem;
  font-family: var(--font-display-he); font-size: 1rem; font-weight: 400;
  color: var(--magenta);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 10px rgba(255,0,200,0.5);
  /* פעימה על הכפתור השלם (btn-pulse-glow, ראה .contact-fab למעלה) - לא על
     האייקון/הטקסט בנפרד: נתן דיווח שהבהוב נפרד על שני אלמנטים באותה שורה
     נראה כמו "התנגשות". filter, לא transform - לא מתנגש עם .cta-btn:hover. */
  animation: btn-pulse-glow 2.4s ease-in-out infinite;
  --pulse-glow-color: var(--magenta);
}
.footer-share .cta-icon { color: var(--magenta); }
.share-toast {
  position: absolute; top: -2.3rem; left: 50%; transform: translateX(-50%);
  background: rgba(10, 6, 18, 0.88); color: #fff; font-size: 0.82rem; font-weight: 600;
  padding: 0.35rem 0.9rem; border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.share-toast.visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.footer-note { color: rgba(198, 184, 224, 0.6); font-size: 0.9rem; }
/* קרדיט יוצר הדף - עדין/קטן יותר מ-.footer-note (זכויות היוצרים על
   התוכן) בכוונה, כדי לשמור על היררכיה ברורה ביניהם. הקישור (מספר הטלפון)
   מקבל את צבע הטורקיז של המותג ב-hover, כמו שאר קישורי הקשר באתר. */
.footer-credit { color: rgba(198, 184, 224, 0.4); font-size: 0.78rem; margin-top: 0.35rem; }
.footer-credit a { color: rgba(198, 184, 224, 0.55); text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s ease; }
.footer-credit a:hover { color: var(--turquoise); }
/* קישור מדיניות פרטיות - אותה רמת היררכיה עדינה כמו הצהרת הנגישות שמעליו.
   חץ אלכסוני קבוע (לא מסתובב, בניגוד ל-.access-summary::after) - מסמן
   "קישור לעמוד נפרד", לא accordion. */
.footer-links { margin-top: 0.6rem; font-size: 0.8rem; }
.footer-links a {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: rgba(198, 184, 224, 0.55); text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s ease;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--turquoise); }
.footer-links-ext {
  width: 0.55em; height: 0.55em; flex: none;
  /* border-top/border-right פיזיים בכוונה (לא inline/block) - סמל "קישור
     חיצוני" (↗) חייב להצביע לאותה פינה ויזואלית תמיד, גם בדף RTL - בניגוד
     ל-.access-summary::after (שם דווקא נכון שה-chevron יתהפך לפי כיוון). */
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); margin-bottom: 0.25em;
}

/* ===== ווידג'ט העדפות נגישות (תקנה 35 / ת"י 5568) - כלי העדפות למשתמש
   בלבד. מתג קלאסים על html; לא נוגע בתוכן/ARIA של הדף עצמו. הכפתור
   הצף בפינה ימין-תחתונה - הפינה היחידה שעדיין פנויה (לוגו למעלה-ימין,
   וואטסאפ למעלה-שמאל, כפתור סאונד למטה-שמאל). ===== */
.a11y-trigger {
  /* z-index גבוה מ-.gate-screen (10000) בכוונה - בניגוד לכפתור הוואטסאפ
     (401, מוסתר עד שנכנסים), ווידג'ט הנגישות חייב להיות זמין כבר במסך
     הכניסה עצמו: הוא הכלי שבו בדיוק צריך שימוש כדי שמישהו עם לקות ראייה
     יוכל להגדיל טקסט/להעלות ניגודיות כדי לקרוא את השער ולהיכנס בכלל. */
  position: fixed; bottom: clamp(0.8rem, 2.5vh, 1.3rem); right: clamp(0.8rem, 3vw, 1.6rem);
  z-index: 10001;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(20, 10, 38, 0.72); border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: transform 0.3s var(--ease-out-back), border-color 0.3s ease;
}
.a11y-trigger:hover, .a11y-trigger:focus-visible { transform: scale(1.1); border-color: var(--turquoise); }
.a11y-trigger.has-active { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,204,0,0.45); }
.a11y-trigger svg { width: 24px; height: 24px; }

/* רקע שקוף שמכסה את שאר המסך כשהפאנל פתוח - לחיצה עליו סוגרת (דפוס
   סטנדרטי ל-side drawer). נמוך יותר ב-z-index מהפאנל עצמו, גבוה מכל
   שאר הדף. שקוף לגמרי (לא כהה) כדי לא "לכהות" את הדף מתחת בטעות. */
.a11y-backdrop {
  position: fixed; inset: 0; z-index: 20000;
  background: transparent; pointer-events: none;
}
.a11y-backdrop[data-open="true"] { pointer-events: auto; }

.a11y-panel {
  /* פיזי (top/right/bottom), לא לוגי (inset-inline/inset-block) - כל שאר
     האלמנטים ה-fixed באתר (contact-fab, sound-toggle, corner-logo) כבר
     משתמשים בפיזי בכוונה. תמיכת דפדפנים ב-inset-inline/inset-block יחד
     עם position:fixed לא אחידה בכל דפדפני המובייל - זו הייתה הסיבה
     שהפאנל הופיע פתוח וחתוך בנייד (המיקום/הרוחב לא הוחלו בכלל). */
  position: fixed; top: 0; bottom: 0; right: 0;
  width: min(340px, 88vw); max-width: 340px;
  background: var(--bg2); border-left: 1px solid rgba(0,255,240,0.3);
  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
  z-index: 20001; overflow-y: auto; overflow-x: hidden;
  padding: 1.3rem 1.1rem 2rem;
  transform: translateX(100%); transition: transform 0.3s var(--ease-out-expo);
}
.a11y-panel[data-open="true"] { transform: translateX(0); }
.a11y-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.a11y-panel-header h2 { font-size: 1.2rem; }
.a11y-panel-close {
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
  color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
}
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; }
.a11y-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.8rem 0.5rem; min-height: 72px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text); font-size: 0.82rem; font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.a11y-toggle:hover { border-color: rgba(255,255,255,0.4); }
/* צבע פוקוס שונה בכוונה מצבע "מופעל" (טורקיז) - אחרת אחרי לחיצה במגע
   (שמשאירה :focus-visible על כפתורים במובייל בחלק מהדפדפנים) הכפתור
   "נראה ממוסגר" גם אחרי שכיבו אותו, כי טבעת הפוקוס והמסגרת של מצב-פעיל
   נראות זהות. זהב = יש עליו פוקוס עכשיו; טורקיז = ההגדרה הזו דלוקה. */
.a11y-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: rgba(255,255,255,0.15); }
.a11y-toggle[aria-pressed="true"], .a11y-toggle.is-active { border-color: var(--turquoise); background: rgba(0,255,240,0.12); }
.a11y-toggle[aria-pressed="true"]:focus-visible, .a11y-toggle.is-active:focus-visible { border-color: var(--turquoise); }
.a11y-toggle-value { font-size: 0.7rem; opacity: 0.75; font-weight: 400; }
.a11y-reset {
  display: block; width: 100%; padding: 0.7rem; border-radius: 10px;
  color: var(--magenta); border: 1px solid rgba(255,0,200,0.4); background: rgba(255,0,200,0.07);
  font-weight: 600;
  transition: transform 0.15s var(--ease-out-back), background 0.15s ease;
}
.a11y-reset:active { transform: scale(0.96); background: rgba(255,0,200,0.18); }
/* חיווי ויזואלי מתחת לכפתור האיפוס - לא מסתמכים רק על ה-live region
   (שהיא לקוראי מסך בלבד, בלתי-נראית). fade in/out, כמו .share-toast
   הקיים בפוטר (אותו דפוס בדיוק). */
.a11y-reset-toast {
  display: block; text-align: center; font-size: 0.82rem; font-weight: 600;
  color: var(--turquoise); margin: 0.7rem 0 1rem;
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.a11y-reset-toast.visible { opacity: 1; transform: translateY(0); }
.a11y-panel-hint { font-size: 0.78rem; opacity: 0.6; margin-bottom: 0.6rem; }
.a11y-panel-statement-link { font-size: 0.85rem; text-decoration: underline; color: var(--turquoise); }

/* ===== אפקטי ההעדפות עצמן - כל אחד מופעל ע"י קלאס יחיד על <html> ===== */
html.a11y-links a { text-decoration: underline !important; font-weight: 600 !important; outline: 1px solid currentColor; outline-offset: 2px; }
html.a11y-contrast-high { filter: contrast(1.3); }
html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-mono { filter: grayscale(1) contrast(1.1); }
html.a11y-text-115 { font-size: 115%; }
html.a11y-text-130 { font-size: 130%; }
html.a11y-text-150 { font-size: 150%; }
html.a11y-lines-16 body { line-height: 1.6 !important; }
html.a11y-lines-20 body { line-height: 2 !important; }
html.a11y-readable-font body, html.a11y-readable-font button, html.a11y-readable-font input {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}
html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3 {
  outline: 2px dashed var(--gold) !important; outline-offset: 4px;
}
html.a11y-cursor-large, html.a11y-cursor-large * { cursor: pointer !important; }
html.a11y-cursor-large a, html.a11y-cursor-large button { transform-origin: center; }
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}

/* היפוך-נגד - כשניגודיות היפוך/מונוכרום פעילה על כל הדף, הווידג'ט עצמו
   חייב להתהפך בחזרה, אחרת המשתמש "נתקע" בלי דרך לקרוא אותו ולכבות. */
html.a11y-contrast-invert .a11y-panel, html.a11y-contrast-invert .a11y-trigger,
html.a11y-contrast-mono .a11y-panel, html.a11y-contrast-mono .a11y-trigger {
  filter: invert(1) hue-rotate(180deg);
}

/* היפוך-נגד גם על תמונות/וידאו/קנבס - "היפוך" גורף על תמונות אמיתיות
   (הרצף המצולם בקנבס, גלריית התמונות) הופך אותן לנראות כמו נגטיב
   צילום - לא שימושי, נראה שבור. אותה טכניקת ה-counter-invert בדיוק
   כמו על הווידג'ט למעלה: היפוך על היפוך = הצבעים המקוריים חוזרים, בזמן
   שהרקע/הטקסט מסביב עדיין מקבלים את מצב הניגודיות הגבוהה שהמשתמש בחר. */
html.a11y-contrast-invert img, html.a11y-contrast-invert video, html.a11y-contrast-invert canvas {
  filter: invert(1) hue-rotate(180deg);
}

@media print {
  html[class*="a11y-"] { filter: none !important; }
  html[class*="a11y-text-"] { font-size: 100% !important; }
  html[class*="a11y-lines-"] { line-height: normal !important; }
}

/* ===== נגישות: קישור דילוג + הצהרת נגישות (details/summary בפוטר) ===== */
/* מוסתר ויזואלית עד לפוקוס מקלדת (Tab ראשון) - דפדפן "skip link" סטנדרטי.
   z-index גבוה מהשער (10000) כדי שיהיה גלוי מעל הכל כשמקבל פוקוס. */
.skip-link {
  position: fixed; top: -100px; right: 1rem; z-index: 20000;
  background: var(--bg2); color: var(--text);
  padding: 0.9rem 1.6rem; border-radius: 8px;
  border: 2px solid var(--turquoise);
  font-weight: 700; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* מוסתר ויזואלית לגמרי, אבל עדיין נגיש לקוראי מסך - בניגוד ל-display:none
   (שמסתיר גם מקוראי מסך). לא הייתה מוגדרת בכלל בפרויקט הזה - זו הייתה
   הסיבה שה-live region של הודעות הווידג'ט (#a11yAnnounce) הופיע כטקסט
   רגיל גלוי בראש הדף במקום להיות שקוף חזותית. תבנית סטנדרטית. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* דיסקלוז native (<details>/<summary>) בפוטר - שורה קטנה ועדינה (לא
   כותרת גדולה), באותו קו עם footer-note/footer-credit. סגור כברירת
   מחדל, מתרחב בלחיצה/Enter. ::-webkit-details-marker/list-style מבטלים
   את המשולש הדפדפני המובנה, במקומו שברון (chevron) מצויר ב-CSS שמסתובב
   180deg כש-[open] פעיל. */
.access-details { margin-top: 0.6rem; max-width: 420px; margin-inline: auto; text-align: center; }
.access-summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  color: rgba(198, 184, 224, 0.55); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 2px;
}
.access-summary:hover, .access-summary:focus-visible { color: var(--turquoise); }
.access-summary::-webkit-details-marker { display: none; }
.access-summary::after {
  content: ""; width: 0.4em; height: 0.4em;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s ease;
}
.access-details[open] .access-summary::after { transform: rotate(-135deg); margin-top: 0.15em; }
.access-body { padding: 1rem 1rem 0; text-align: right; }
.access-text { max-width: 480px; margin: 0 auto 1rem; font-size: 0.92rem; line-height: 1.75; color: var(--text-dim); }
.access-list { max-width: 480px; margin: 0 auto 1.2rem; padding-inline-start: 1.3rem; color: var(--text-dim); font-size: 0.92rem; line-height: 1.8; }
.access-list li { margin-bottom: 0.4rem; }
.access-text a { text-decoration: underline; color: var(--turquoise); }
.access-date { font-size: 0.8rem; opacity: 0.7; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .content-section { padding: 5rem 1.1rem; }
  .cta-buttons { flex-direction: column; width: 100%; }
  .cta-btn { justify-content: center; }
  .tiktok-carousel { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; }
  /* רוחב כרטיס גלריה קטן יותר במובייל - כדי שיותר מכרטיס אחד ייכנס למסך בכל
     רגע (210px על מסך 375px היה כמעט המסך כולו, גרם לאפקט הדהייה של הכרטיסים
     הסמוכים להיראות כמו "כל הגלריה חשוכה" - ראה גם JS updateCardTransforms) */
  .gallery-card { width: clamp(148px, 44vw, 280px); }
  /* מקטין את אייקוני הפוטר כדי שכל 5 האייקונים ייכנסו לשורה אחת במסכי מובייל
     צרים (5×56px+מרווחים חרג מרוחב מסך טיפוסי, גרם ל-flex-wrap לשבור שורה) */
  .footer-socials { gap: 0.7rem; }
  .social-btn { width: 44px; height: 44px; }
  .social-btn svg { width: 30px; height: 30px; }
}