/* ============================================================================
   FADEZEN · 14-logo
   אנימציית הלוגו.

   הרעיון: הלוגו הוא PNG שטוח, ואי אפשר להזיז חלקים ממנו. אבל אפשר
   להשתמש בערוץ השקיפות שלו כ-mask — וכל שכבה שנשים מתחת מקבלת בדיוק
   את הצורה שלו. ככה מקבלים ברק שנע על המתכת ופסים שזזים, בלי לצייר
   מחדש דבר.

   מיקום הכדור הירוק (50%, 38%) נמדד מהתמונה עצמה ולא נוחש.
   ========================================================================= */

.bzlogo {
  position: relative;
  display: block;
  aspect-ratio: 476 / 476;
  isolation: isolate;
  /* נכנס עם קפיצה קלה. פעם אחת, לא בלולאה — כניסה חוזרת מעייפת. */
  animation: bzlogo-in .85s cubic-bezier(.22, 1.4, .36, 1) both;
}

/* --- הילה חיצונית פועמת --- */
.bzlogo::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    rgba(0, 230, 118, .30) 0%,
    rgba(0, 229, 255, .14) 38%,
    transparent 68%);
  filter: blur(10px);
  animation: bzlogo-halo 3.6s ease-in-out infinite;
  z-index: 0;
}

/* --- שכבות שמקבלות את צורת הלוגו --- */
.bzlogo__img,
.bzlogo__sheen,
.bzlogo__stripes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bzlogo__img {
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
}

/* הברק: פס אור אלכסוני שחולף על המתכת.
   ה-mask גוזר אותו לצורת הלוגו, אחרת היה נראה כמו פס על ריבוע. */
.bzlogo__sheen {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 255, 255, .00) 44%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .00) 56%,
    transparent 62%);
  background-size: 260% 260%;
  mix-blend-mode: screen;
  /* נתיב ישיר ולא משתנה CSS: כתובת בתוך custom property נפתרת ביחס
     לקובץ ה-CSS, ו-var שהוגדר ב-style inline נשבר ל-/css/assets/...
     כאן היא נפתרת ביחס לקובץ הזה, וזו התנהגות מוגדרת היטב. */
  -webkit-mask-image: url(../assets/logo.png?v=1);
          mask-image: url(../assets/logo.png?v=1);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: bzlogo-sheen 4.4s cubic-bezier(.6, 0, .4, 1) infinite;
}

/* פסי עמוד הספרים שזזים. עדינים בכוונה — הם מוסיפים תנועה מתחת
   לפסים המצוירים, לא מחליפים אותם. */
.bzlogo__stripes {
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  background: repeating-linear-gradient(115deg,
    rgba(255, 60, 60, .85) 0px, rgba(255, 60, 60, .85) 9px,
    rgba(255, 255, 255, .9) 9px, rgba(255, 255, 255, .9) 18px,
    rgba(40, 90, 255, .85) 18px, rgba(40, 90, 255, .85) 27px,
    rgba(255, 255, 255, .9) 27px, rgba(255, 255, 255, .9) 36px);
  /* נתיב ישיר ולא משתנה CSS: כתובת בתוך custom property נפתרת ביחס
     לקובץ ה-CSS, ו-var שהוגדר ב-style inline נשבר ל-/css/assets/...
     כאן היא נפתרת ביחס לקובץ הזה, וזו התנהגות מוגדרת היטב. */
  -webkit-mask-image: url(../assets/logo.png?v=1);
          mask-image: url(../assets/logo.png?v=1);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: bzlogo-stripes 2.6s linear infinite;
}

/* --- נשימת הכדור הירוק, בדיוק במקום שנמדד --- */
.bzlogo__orb {
  position: absolute;
  left: 50%; top: 38%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 255, 150, .55) 0%,
    rgba(0, 230, 118, .28) 35%,
    transparent 70%);
  filter: blur(6px);
  z-index: 4;
  pointer-events: none;
  animation: bzlogo-orb 2.2s ease-in-out infinite;
}

/* ------------------------------------------------------------- תנועות */

@keyframes bzlogo-in {
  from { opacity: 0; transform: translateY(14px) scale(.82) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes bzlogo-halo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.09); }
}

/* עוצר בין מעברים: ברק שחולף בלי הפסקה נראה זול. */
@keyframes bzlogo-sheen {
  0%, 62%  { background-position: 130% 130%; }
  100%     { background-position: -30% -30%; }
}

@keyframes bzlogo-stripes {
  from { background-position: 0 0; }
  to   { background-position: 0 -72px; }
}

@keyframes bzlogo-orb {
  0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.14); }
}

/* ריחוף עדין — רק כשהלוגו גדול, אחרת זה סתם רעש */
.bzlogo--hero { animation: bzlogo-in .85s cubic-bezier(.22,1.4,.36,1) both, bzlogo-float 5s ease-in-out 1s infinite; }

@keyframes bzlogo-float {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(1.2deg); }
}

/* מי שביקש פחות תנועה מקבל לוגו סטטי — עדיין עם ההילה, בלי התנועה. */
@media (prefers-reduced-motion: reduce) {
  .bzlogo,
  .bzlogo--hero,
  .bzlogo::before,
  .bzlogo__sheen,
  .bzlogo__stripes,
  .bzlogo__orb { animation: none; }
  .bzlogo__stripes { opacity: 0; }
}

/* --- כיוונון לגדלים קטנים ---
   ב-38 פיקסלים ההילה המטושטשת נראית ככתם והפסים נראים כרעש.
   מרככים אותם, אבל משאירים את הברק — הוא מה שנקרא בגודל הזה. */
.brand__mark.bzlogo::before { filter: blur(5px); opacity: .5; }
.brand__mark.bzlogo::before { animation-duration: 4.4s; }
.brand__mark .bzlogo__stripes { opacity: .18; }
.brand__mark .bzlogo__orb { filter: blur(3px); }
.brand__mark .bzlogo__img { filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .5)); }