/*
 * מה שאי אפשר לתקן ב-JavaScript: גיליון הסגנון של Elementor מאפס בתנועה מופחתת כל מעבר
 * באתר (`html * { transition-duration: 0s !important }`), ו-Elementor Pro מאפס גם את
 * המעבר של אפקטי הגלילה. אלה שאילתות CSS אמיתיות, ולכן מוחזרות כאן — רק לשני המקומות
 * שבהם זה נחוץ, ובאותם ערכים שגולש רגיל מקבל.
 */

/* מצגת תמונות הרקע: בלי מעבר אמיתי הסוויפר נתקע אחרי שקופית אחת */
@media (prefers-reduced-motion: reduce) {
	body .elementor-background-slideshow,
	body .elementor-background-slideshow .swiper-wrapper,
	body .elementor-background-slideshow .swiper-slide {
		transition-duration: var(--avox-slideshow-fade, 800ms) !important;
	}

	/* אפקטי גלילה (חיצים, בועות): בלי זה התנועה קופצת במקום לרחף.
	   ‏1s הוא הערך של Elementor Pro עצמו (‏modules/motion-fx.css) */
	body .elementor-motion-effects-element,
	body .elementor-motion-effects-layer {
		transition-duration: 1s !important;
	}

	/* אנימציות הכניסה (הופעה בהחלקה כשגוללים אל האלמנט). ‏Elementor מבטל אותן ב-
	   `.animated{animation:none!important}`, ואז הטקסט פשוט קופץ למקומו. מוחזרות כאן
	   באותם ערכים של Elementor: ‏1.25 שניות, ומילוי לשני הכיוונים. רק שמות שהקובץ
	   שלהם נטען בעמוד יפעלו בפועל — שאר השורות פשוט לא עושות כלום. */
	body .animated {
		animation-duration: 1.25s !important;
		animation-fill-mode: both !important;
	}

	body .animated.animated-slow {
		animation-duration: 2s !important;
	}

	body .animated.animated-fast {
		animation-duration: .75s !important;
	}

	body .animated.fadeIn { animation-name: fadeIn !important; }
	body .animated.fadeInUp { animation-name: fadeInUp !important; }
	body .animated.fadeInDown { animation-name: fadeInDown !important; }
	body .animated.fadeInLeft { animation-name: fadeInLeft !important; }
	body .animated.fadeInRight { animation-name: fadeInRight !important; }
	body .animated.bounceIn { animation-name: bounceIn !important; }
	body .animated.zoomIn { animation-name: zoomIn !important; }
	body .animated.slideInUp { animation-name: slideInUp !important; }
}

/* ---------- הפתיח: יציאה רכה במקום וילון ---------- *
 * מסך הטעינה (`#loader-wrapper` עם אנימציית הלוגו) נסגר במקור בהחלקה של שני חצאים
 * לצדדים. שתי בעיות: ההחלקה מרגישה כמו חיתוך, ובדפדפן שמבקש תנועה מופחתת Elementor
 * מאפס את כל המעברים — ואז המסך פשוט נעלם בבת אחת. כאן הוא במקום זה **נמוג** אל
 * האתר שמאחוריו: הלוגו נעלם ראשון, והרקע אחריו.
 *
 * לשינוי הקצב: שני המספרים למטה (‏900ms ללוגו, ‏1400ms לרקע).
 */
.loaded #loader {
	opacity: 0 !important;
	transition: opacity 900ms ease !important;
}

.loaded #loader-wrapper .loader-section.section-left,
.loaded #loader-wrapper .loader-section.section-right {
	transform: none !important;           /* בלי ההחלקה לצדדים */
	opacity: 0 !important;
	transition: opacity 1400ms ease !important;
}

/* המעטפת נשארת גלויה עד סוף ההעלמה, ורק אז נעלמת לגמרי (‏visibility מתחלף בסוף) */
.loaded #loader-wrapper {
	transform: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transition: opacity 1400ms ease, visibility 0s linear 1400ms !important;
}

/* בתנועה מופחתת Elementor מאפס כל מעבר, ולכן חוזרים על הערכים כאן */
@media (prefers-reduced-motion: reduce) {
	body .loaded #loader,
	body.loaded #loader {
		transition-duration: 900ms !important;
	}

	body .loaded #loader-wrapper,
	body.loaded #loader-wrapper,
	body .loaded #loader-wrapper .loader-section,
	body.loaded #loader-wrapper .loader-section {
		transition-duration: 1400ms !important;
	}
}

/* ---------- רקע רך ורציף ---------- *
 * שני דברים צריכים לקרות יחד:
 *   1. לכל מקטע חייב להיות רקע אטום משלו — אחרת וידאו הפתיח, שמקובע מאחורי כל
 *      העמוד, מציץ דרכו (זה מה שקרה כשניסיתי לצייר שכבה אחת על ה-body).
 *   2. הרקע של מקטעים סמוכים חייב להתחבר בלי קו חד.
 *
 * הפתרון: כל מקטע מצייר את **אותו** רקע, אבל מקובע למסך (`background-attachment: fixed`).
 * כך ההילות ממוקמות ביחס לחלון ולא ביחס למקטע, והגבול בין שני מקטעים נופל בדיוק על
 * אותו צבע — אין תפר. הבסיס לבן, ולכן שום דבר לא מציץ מאחור.
 *
 * לשינוי עוצמה: המספר בסוף כל rgba.
 */
.avox-flat-bg {
	background-color: #fff !important;
	background-image:
		radial-gradient(1200px 900px at 88% 8%, rgba(227, 18, 99, .13), transparent 70%),
		radial-gradient(1000px 800px at 6% 30%, rgba(23, 183, 201, .15), transparent 70%),
		radial-gradient(1100px 850px at 94% 62%, rgba(160, 76, 242, .12), transparent 70%),
		radial-gradient(1000px 820px at 10% 88%, rgba(227, 18, 99, .12), transparent 70%) !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	background-position: center center !important;
	background-attachment: fixed !important;
}