/* ============================================================================
   FADEZEN · Motion
   כל ה-keyframes במקום אחד + מסך הפתיחה + כיבוד prefers-reduced-motion.
   ========================================================================= */

@keyframes bz-blink   { 50% { opacity: .32; } }
@keyframes bz-pulse   { 0% { transform: scale(.6); opacity: .68; } 70% { transform: scale(3); opacity: 0; } 100% { opacity: 0; } }
@keyframes bz-sweep   { to { transform: rotate(360deg); } }
@keyframes bz-dash    { to { stroke-dashoffset: -32; } }
@keyframes bz-bob     { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes bz-shimmer { 100% { transform: translateX(-100%); } }

@keyframes bz-pin-in  { from { transform: translateY(-16px) scale(.35); opacity: 0; } }
@keyframes bz-rise    { from { transform: translateY(14px); opacity: 0; } }
@keyframes bz-pop     { from { transform: scale(.86); opacity: 0; } }
@keyframes bz-msg-in  { from { transform: translateY(10px) scale(.96); opacity: 0; } }
@keyframes bz-grow    { from { transform: scaleY(0); } }
@keyframes bz-draw    { to { stroke-dashoffset: 0; } }

@keyframes bz-toast-in  { from { transform: translateY(-14px) scale(.94); opacity: 0; } }
@keyframes bz-toast-out { to { transform: translateY(-10px) scale(.96); opacity: 0; } }

@keyframes bz-load    { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
@keyframes bz-fade-up { from { transform: translateY(18px); opacity: 0; } }

/* הופעה מדורגת ברשימות — נקבע ע"י --i בסקריפט */
.stagger > *{ animation: bz-rise var(--d-3) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }

/* ------------------------------------------------------------------ splash */
.splash{
  position: absolute; inset: 0; z-index: var(--z-splash);
  display: grid; place-items: center;
  background:
    radial-gradient(80% 55% at 50% 42%, rgba(0,229,255,.07), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #14171B, #0A0B0D 70%);
  transition: opacity var(--d-5) var(--ease-out),
              transform var(--d-5) var(--ease-out),
              visibility var(--d-5);
}

/* גובה לפי החלון *הנראה*. #app הוא fixed/inset ולכן נמדד מול החלון
   המלא — כולל הרצועה שסרגל הכתובת של הדפדפן מסתיר במובייל. התוצאה
   הייתה שהתוכן מתמרכז מול קופסה גבוהה יותר ממה שרואים, ויושב גבוה
   מדי. bottom:auto חובה כאן, אחרת inset וה-height סותרים זה את זה. */
@supports (height: 100dvh){
  .splash{ bottom: auto; height: 100dvh; }
}

.splash.is-gone{ opacity: 0; visibility: hidden; transform: scale(1.04); }

.splash__inner{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  /* מקצב אחיד: הרווחים נקבעים כאן בלבד, בלי margin שלילי נקודתי על
     שורה אחת — זה מה שגרם לחוסר האיזון בין השורות. */
  gap: 0;
  animation: bz-fade-up var(--d-5) var(--ease-out);
}

/* טבעות שמתפשטות — מרמזות ש"מחפשים סביבך" ולא סתם טוענים.
   מעוגנות לסמל עצמו ולא לפינת הבלוק, אחרת הן יוצאות ממנו בזווית. */
/* תזמון האנימציות נגזר מכמה זמן המסך הזה *באמת* נראה.
   מדדנו: הצביעה הראשונה ב-268ms, וההסתרה בסביבות 1180ms — כלומר
   חלון של כ-900ms בלבד. מחזור של 2.8 שניות הספיק להתפשט בקושי
   רבע דרך לפני שהמסך נעלם, והטבעת נראתה תקועה במקום. עכשיו מחזור
   שלם נכנס בתוך החלון, והעין רואה פעימה ולא עיגול קפוא. */
/* הסלקטורים כאן מורכבים (.splash .splash__mark) ולא פשוטים, בכוונה.
   הסמל הזה הוא גם .bzlogo--hero, ו-css/14-logo.css נטען *אחרי* הקובץ
   הזה ומגדיר על אותו אלמנט ועל ::before שלו אנימציות משלו — halo של
   3.6 שניות ו-float של 5. בסלקטור פשוט הן ניצחו לפי סדר הקבצים, וכל
   התזמון שנקבע כאן היה קוד מת. עם משקל גבוה יותר הוא מנצח בלי לגעת
   בלוגו בשאר האתר, שם האנימציות האיטיות דווקא נכונות. */
.splash .splash__mark{
  position: relative;
  width: 118px; height: 118px;
  filter: drop-shadow(0 14px 34px rgba(0,229,255,.22));
  animation: bzlogo-in .85s cubic-bezier(.22,1.4,.36,1) both,
             bz-float 2.2s var(--ease-in-out, ease-in-out) .85s infinite;
  will-change: transform;
}
.splash .splash__mark::before,
.splash .splash__mark::after{
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px;
  border-radius: 50%; border: 1px solid rgba(0,229,255,.3);
  animation: bz-ping 1250ms var(--ease-out) infinite;
  /* מקדם את הטבעות לשכבת קומפוזיציה. בין 283ms ל-1180ms המסלול
     הראשי עסוק באתחול המפה, ובלי הקידום הפעימה מקרטעת בדיוק שם. */
  will-change: transform, opacity;
  pointer-events: none;
}
.splash .splash__mark::after{ animation-delay: 625ms; }

/* ההילה האיטית של הלוגו מוחלפת כאן בפעימה — היא זו שנראתה קפואה */
.splash .splash__mark::before{ filter: none; opacity: 1; }

@keyframes bz-ping{
  0%  { transform: scale(.72); opacity: .75; }
  70% { opacity: .12; }
  100%{ transform: scale(1.62); opacity: 0; }
}
@keyframes bz-float{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-5px); }
}

.splash__name{
  margin-top: var(--s-5);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 8vw, 34px); letter-spacing: 3px; line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash__tag{
  margin-top: var(--s-2);
  font-size: var(--t-sm); color: var(--ink-3); letter-spacing: .2px;
}
.splash__bar{
  width: 148px; height: 3px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); overflow: hidden;
  margin-top: var(--s-5);
}
.splash__bar i{
  display: block; height: 100%; width: 40%; border-radius: var(--r-pill);
  background: var(--grad-brand);
  /* גם כאן: מחזור שנכנס פעם אחת לפחות בתוך חיי המסך */
  animation: bz-load 850ms var(--ease-in-out, ease-in-out) infinite;
  will-change: transform;
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .1s !important;
    scroll-behavior: auto !important;
  }
  .me__cone, .pin__pulse, .me__ring{ display: none; }
  .splash .splash__mark::before, .splash .splash__mark::after{ display: none; }
  .splash .splash__mark{ animation: none; }
  .bz-route{ animation: none; }
}