/* ===========================================================================
   החוזה בין ה-JS ל-CSS.
   ה-JS כותב אך ורק את המשתנים האלה. ה-CSS מחליט לאן הם הולכים.
   =========================================================================== */

.paralax {
	--paralax_opacity: 1;
	--paralax_translate_x: 0px;
	--paralax_translate_y: 0px;
	--paralax_scale: 1;
	--paralax_rotate: 0deg;

	opacity: var(--paralax_opacity);
	translate: var(--paralax_translate_x) var(--paralax_translate_y);
	scale: var(--paralax_scale);
	rotate: var(--paralax_rotate);
	will-change: opacity, translate, scale, rotate;
}

/* ---------------------------------------------------------------------------
   חשוב: החלף את הצהרות ה-opacity הקיימות בשכבות הרקע במשתנה.
   הצהרת opacity ישירה על .sky_night תדרוס את
   .paralax { opacity: var(--paralax_opacity) } לפי סדר הקובץ,
   והשכבה תישאר שקופה גם כשה-JS יכתוב 1.
   --------------------------------------------------------------------------- */

/* ❌ היה:  .sky_posts { opacity: 0; }
   ✅ יהיה: */
.sky_posts { --paralax_opacity: 0; }
.sky_dusk { --paralax_opacity: 0; }
.sky_night { --paralax_opacity: 0; }
.star_layer { --paralax_opacity: 0; }
.decor_sun { --paralax_opacity: 0.28; }
.decor_moon { --paralax_opacity: 0; }
.skyline_day { --paralax_opacity: 0.16; }
.skyline_night { --paralax_opacity: 0; }

/* ---------------------------------------------------------------------------
   אלמנט לא יכול לקבל parallax ו-breating_float על אותו מאפיין.
   אנימציית CSS גוברת על סגנון inline ותדרוס את מה שה-JS כותב.
   הפתרון: עוטף מקבל parallax, הילד מקבל את הנשימה.
   בדיוק כמו .cloud_track שעוטף את .cloud
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   אפקטי סמן
   --------------------------------------------------------------------------- */
.move_according_to_pointer{
	will-change: transform;	
}

.move_according_to_pointer.isVisible{
	--translatePointerX: 0%;
	--translatePointerY: 0%;
	--scalePointer: 1;
	--rotatePointerX: 0deg;
	--rotatePointerY: 0deg;
	
	translate: calc( var(--translatePointerX) * 1.21 ) calc( var(--translatePointerY) * 1.21 ) !important;
	transition: translate 1s ease !important;
}

.move_according_to_pointer.isVisible.neg {
	translate: calc( calc( var(--translatePointerX) * -0.25 ) - 1.1%) calc( calc( var(--translatePointerY) * 2.01 ) - 0.1%) !important;
	transition: translate var(--dur_slow) var(--ease) !important;
}

.move_according_to_pointer.isVisible.neg2 {
	translate: calc( var(--translatePointerX) * 1.9 ) calc( calc( var(--translatePointerY) * -1 ) + 1.5%)!important;
	transition: translate var(--dur_slow) var(--ease) !important;
}

.scale_according_to_pointer {
	scale: var(--scalePointer);
	transition: scale var(--dur_slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	.paralax {
		translate: none;
		scale: none;
		rotate: none;
	}
}


/* .move_according_to_pointer.isVisible{
	translate: calc( var(--translatePointerX) * 1.21 ) calc( var(--translatePointerY) * 1.21 ) !important;
	scale: calc( var(--scalePointer,1) * 1.01 ) !important;
	transition: translate 2s ease !important;
}

.move_according_to_pointer.isVisible.neg{
	translate: calc( var(--translatePointerX) * -0.25 ) calc( var(--translatePointerY) * 2.01 ) !important;
	scale: calc( var(--scalePointer,1) * 0.87 ) !important;
}

.move_according_to_pointer.isVisible.neg2{
	translate: calc( var(--translatePointerX) * 1.9 ) calc( var(--translatePointerY) * -0.6 ) !important;
	scale: calc( var(--scalePointer,1) * 0.87 ) !important;
} */