/*
 * sky.css - הרקע של מסכי הכניסה, והרקע של המערכת בבהיר (הדמיה V38, אושרה 03/11/2026).
 * אייל: "בכהה אפשרות שתיים, זאת אומרת מסך הכניסה יהיה יותר כמו המערכת. ובבהיר אפשרות אחת, המערכת תהיה יותר כמו מסך הכניסה".
 * כהה (רק במסכי הכניסה): הרקע של המערכת, בסיס #141026 ושלושה כתמים רכים, ומעליו 70 כוכבים מנצנצים.
 * בהיר (במסכי הכניסה ובמערכת): ארבעה כתמי צבע שזזים לאט, רשת סגולה בפרספקטיבה, 140 ניצנוצים, וקווים דקים מעל הכל.
 * את הסימון בונה sky.js. במערכת השכבה יושבת מאחורי התוכן ומוצגת רק בבהיר (mbr-sky), כך שהכהה של המערכת לא משתנה.
 */
.lgs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #141026; }
html[data-mode="light"] .lgs { background: #FBF8FF; }
.lgs > * { position: absolute; }
.lgs .sky { inset: 0; background: radial-gradient(70% 50% at 100% 0, #3B1F78 0, transparent 60%), radial-gradient(60% 50% at 0 40%, #14504C 0, transparent 65%), radial-gradient(60% 50% at 30% 100%, #4A1D48 0, transparent 60%); }
.lgs .grid, .lgs .stars.sl, .lgs .mesh, .lgfx .scan, html[data-mode="light"] .lgs .sky, html[data-mode="light"] .lgs .stars.sd { display: none; }
html[data-mode="light"] .lgs .grid, html[data-mode="light"] .lgs .stars.sl, html[data-mode="light"] .lgs .mesh, html[data-mode="light"] .lgfx .scan { display: block; }
.lgs .grid { left: -50%; right: -50%; bottom: -10%; height: 46%; background-image: linear-gradient(rgba(109,40,217,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(109,40,217,.13) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(420px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%); }
/* ניצנוצים עדינים, לא כוכב של אימוג'י (אייל, 03/11: "כן, 2"). נקודות לבנות זוהרות, כל שלישית נקודה סגולה עדינה, כל שביעי ניצנוץ של קו אור שמסתובב */
.lgs .stars { inset: 0; }
.lgs .stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: lgtw 3.5s ease-in-out infinite; }
.lgs .stars.sl i { box-shadow: 0 0 6px 2px rgba(255,255,255,.9); }
@keyframes lgtw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.lgs .stars.sl i:nth-child(3n) { background: rgba(109,40,217,.32); box-shadow: none; }
.lgs .stars.sl i:nth-child(7n) { width: 18px; height: 18px; margin: -8px; border-radius: 0; box-shadow: none; background: radial-gradient(circle, #fff 0 1px, rgba(255,255,255,.6) 2px, transparent 4px), linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) center / 100% 1px no-repeat, linear-gradient(transparent, rgba(255,255,255,.95), transparent) center / 1px 100% no-repeat; filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); animation: lggl 4.5s ease-in-out infinite; }
@keyframes lggl { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .9; transform: scale(.9) rotate(60deg); } }
/* כתמי צבע חיים בצבעי הלב */
.lgs .mesh { inset: 0; }
.lgs .mesh i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: lgdrift 13s ease-in-out infinite alternate; }
.lgs .mesh .m1 { width: 75%; height: 42%; top: -12%; right: -20%; background: #FF4FA3; }
.lgs .mesh .m2 { width: 70%; height: 40%; top: 32%; left: -30%; background: #2ADFF0; animation-delay: -5s; }
.lgs .mesh .m3 { width: 60%; height: 36%; bottom: -10%; right: -10%; background: #8B5CF6; animation-delay: -9s; }
.lgs .mesh .m4 { width: 45%; height: 28%; top: 18%; right: 25%; background: #FFD60A; opacity: .42; animation-delay: -3s; }
@keyframes lgdrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(9%, 7%) scale(1.18); } }
/* קווים דקים מעל הכל, כמו טקסטורה. לא תופסים לחיצות */
.lgfx { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.lgfx .scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(30,21,56,.055) 0 1px, transparent 1px 3px); }
/* במערכת: רק בבהיר. הרקע והקווים מאחורי התוכן (אייל, 03/11: "הרקע המרוקע יהיה מאחורה אבל לא על האלמנטים של הטקסט הלבנים").
   שתי השכבות ב-1-, והקווים נכנסים לדף אחרי הרקע ולכן מעליו */
.mbr-sky { display: none; }
html[data-mode="light"] .mbr-sky { display: block; }
.lgs.mbr-sky { z-index: -1; }
.lgfx.mbr-sky { z-index: -1; }
@media (prefers-reduced-motion: reduce) {
  .lgs .stars i, .lgs .stars.sl i:nth-child(7n), .lgs .mesh i { animation: none; }
}