/* NDIGIT v2 · מסך טעינה, 4 גרסאות לבדיקה (js/loader.js). הלוגו תמיד שלם בסוף */
html.ld-on { overflow: hidden; }
html.ld-on::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: #c8f542; }
#ld { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none; color: #0b0b0a; }
#ld ~ * {} html.ld-on:has(#ld)::after { display: none; }
#ld .ld-bg { position: absolute; inset: 0; background: #c8f542; }
#ld .ld-mark { position: relative; z-index: 2; width: min(64vw, 520px); }
#ld svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.ez { --ez: cubic-bezier(.77,0,.18,1); }

/* 1 · עולה מקו, והמסך מתקפל למעלה כמו תריס */
.ld-v1 .ld-slot { position: relative; z-index: 2; overflow: hidden; padding-top: 6px; }
.ld-v1 .ld-mark { transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.9,.2,1) .25s; }
.ld-v1.ld-in .ld-mark { transform: none; }
.ld-v1 .ld-line { position: absolute; z-index: 3; left: 50%; top: calc(50% + min(32vw, 260px) * .249 + 4px); width: min(64vw, 520px); height: 3px; margin-left: calc(min(64vw, 520px) / -2); background: #0b0b0a; transform: scaleX(0); transition: transform .6s cubic-bezier(.77,0,.18,1), width .7s cubic-bezier(.77,0,.18,1), margin .7s cubic-bezier(.77,0,.18,1); }
.ld-v1.ld-in .ld-line { transform: scaleX(1); }
.ld-v1.ld-out .ld-line { width: 100vw; margin-left: -50vw; }
.ld-v1 .ld-bg, .ld-v1 .ld-slot, .ld-v1 .ld-line { transition-property: transform, width, margin, clip-path; }
.ld-v1.ld-out .ld-bg { clip-path: inset(0 0 100% 0); transition: clip-path .75s cubic-bezier(.77,0,.18,1) .2s; }
.ld-v1.ld-out .ld-slot { transform: translateY(-40vh); opacity: 0; transition: transform .75s cubic-bezier(.77,0,.18,1) .15s, opacity .4s .3s; }
.ld-v1.ld-out .ld-line { transform: translateY(-50vh) scaleX(1); transition: transform .75s cubic-bezier(.77,0,.18,1) .2s, width .5s, margin .5s; }

/* 2 · הלוגו מתמלא מלמטה כמו נוזל, לפי הטעינה, ואז המסך מתכווץ לעיגול */
.ld-v2 .ld-ghost > svg { opacity: .16; }
.ld-v2 .ld-fillwrap { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); transition: clip-path .25s linear; }
.ld-v2 .ld-fill svg { width: 100%; }
.ld-v2 .ld-wave { display: none; }
.ld-v2 .ld-bg { transition: clip-path .8s cubic-bezier(.77,0,.18,1); clip-path: circle(150% at 50% 50%); }
.ld-v2.ld-out .ld-bg { clip-path: circle(0% at 50% 50%); }
.ld-v2.ld-out .ld-mark { transform: scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.77,0,.18,1), opacity .5s .2s; }

/* 3 · זום מבחוץ: מתחילים בתוך ה־N ענקית ומתרחקים עד הלוגו השלם, ואז עיגול נפתח מהמרכז */
.ld-v3 .ld-zoom { transform-origin: 8% 50%; transform: scale(14); transition: transform 1.2s cubic-bezier(.7,0,.1,1) .1s; }
.ld-v3.ld-in .ld-zoom { transform: none; }
.ld-v3 .ld-bg { -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--ld-r, 0%), #000 calc(var(--ld-r, 0%) + .5%)); mask: radial-gradient(circle at 50% 50%, transparent var(--ld-r, 0%), #000 calc(var(--ld-r, 0%) + .5%)); transition: --ld-r .8s cubic-bezier(.77,0,.18,1); }
@property --ld-r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.ld-v3.ld-out .ld-bg { --ld-r: 80%; }
.ld-v3.ld-out .ld-mark { opacity: 0; transition: opacity .35s; }

/* 4 · הניגוב של האתר: קו שחור עובר ימינה וחושף את הלוגו, חוזר שמאלה וחושף את האתר */
.ld-v4 .ld-wipe { clip-path: inset(0 0 0 100%); transition: clip-path .75s cubic-bezier(.77,0,.18,1) .2s; }
.ld-v4.ld-in .ld-wipe { clip-path: inset(0 0 0 0); }
.ld-v4 .ld-cut { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 6px; background: #0b0b0a; transform: translateX(calc(100vw + 10px)); transition: transform .75s cubic-bezier(.77,0,.18,1) .2s; }
.ld-v4.ld-in .ld-cut { transform: translateX(-10px); }
.ld-v4.ld-out .ld-cut { transform: translateX(calc(100vw + 10px)); transition-delay: 0s; }
.ld-v4 .ld-bg, .ld-v4 .ld-wipe { transition-property: clip-path; }
.ld-v4.ld-out .ld-bg, .ld-v4.ld-out .ld-wipe { clip-path: inset(0 0 0 100%); transition: clip-path .75s cubic-bezier(.77,0,.18,1); }

@media (prefers-reduced-motion: reduce) { #ld * { transition-duration: .01s !important; transition-delay: 0s !important; } }

/* ===== גרסה 2, משופרת (נתי 29.09): הנבחרת =====
   הלוגו נכנס בעדינות, מתמלא עם קו גל שזז, קופץ קלות כשהוא מלא, והעיגול נסגר מהר יותר עם טשטוש תנועה */
.ld-v2 .ld-mark { transform: scale(.94); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.ld-v2.ld-in .ld-mark { transform: none; opacity: 1; }
.ld-v2 .ld-wave { display: block; position: absolute; left: -5%; width: 110%; height: 9%; top: calc((1 - var(--p, 0)) * 100% - 8.5%); fill: #0b0b0a; animation: ld-wave 1.1s linear infinite; transition: top .25s linear; }
.ld-v2 .ld-fillwrap { clip-path: none; }
.ld-v2 .ld-fill { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); transition: clip-path .25s linear; }
@keyframes ld-wave { from { translate: 0 0; } to { translate: -9% 0; } }
.ld-v2.ld-full .ld-mark { animation: ld-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes ld-pop { 50% { transform: scale(1.06); } }
.ld-v2.ld-full .ld-wave { opacity: 0; transition: opacity .2s; }
.ld-v2 .ld-bg { transition: clip-path .55s cubic-bezier(.7,0,.25,1), filter .55s cubic-bezier(.7,0,.25,1); }
.ld-v2.ld-out .ld-bg { clip-path: circle(0% at 50% 50%); filter: blur(22px); }
.ld-v2.ld-out .ld-mark { transform: scale(.5); opacity: 0; filter: blur(10px); transition: transform .5s cubic-bezier(.7,0,.25,1), opacity .35s .12s, filter .5s; animation: none; }
/* הגל היה נצבע גם מחוץ לאותיות, מוותרים עליו: המילוי נשאר ישר ונקי */
.ld-v2 .ld-wave { display: none !important; }
/* יציאה רציפה: הלוגו מתכווץ ממקום שהוא נמצא, בלי לבטל באמצע את הקפיצה */
.ld-v2.ld-full .ld-mark { animation: none; transform: scale(1.04); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.ld-v2.ld-out .ld-mark { transform: scale(.45); opacity: 0; filter: blur(10px); transition: transform .6s cubic-bezier(.6,0,.3,1), opacity .4s .15s, filter .55s; }

/* ===== 5 · וילון ליים (נתי 03.10): האותיות מתמלאות בשחור תוך שנייה, הלוגו עולה, והמסך הליים מתרומם בקשת ===== */
.ld-v5 .ld-ghost > svg { opacity: .14; }
.ld-v5 .ld-mark { opacity: 0; transition: opacity .3s; }
.ld-v5.ld-in .ld-mark { opacity: 1; }
.ld-v5 .ld-fill { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
.ld-v5.ld-out .ld-mark { transform: translateY(-32px); opacity: 0; transition: transform .4s cubic-bezier(.7,0,.84,0), opacity .4s cubic-bezier(.7,0,.84,0); }
.ld-v5.ld-out .ld-bg { animation: ld-lift .7s cubic-bezier(.76,0,.24,1) .08s forwards; }
@keyframes ld-lift { 0% { transform: translateY(0); border-radius: 0; } 50% { border-radius: 0 0 50% 50% / 0 0 16vh 16vh; } 100% { transform: translateY(-110%); border-radius: 0 0 50% 50% / 0 0 28vh 28vh; } }
@media (prefers-reduced-motion: reduce) { .ld-v5.ld-out .ld-bg { animation: none; opacity: 0; transition: opacity .25s; } }