/* שכבת עיטור — הפרימיטיבים הקטנים שמצטברים לתחושת "יקר".
 *
 * רכיבים קטנים לשימוש חוזר שמרימים סקשן מ"נקי" ל"פרימיום": מדיה עם zoom
 * בריחוף, מספר גדול ממוספר, גלולת זכוכית, מסגרת זהב, שכבת גרדיאנט לטקסט
 * מעל תמונה. כולם מודעי-משטח (קוראים --surface-*) ומגודרי-תנועה.
 * צבעים מהטוקנים בלבד.
 */

/* ---- מדיה עם zoom בריחוף ----
 * עוטפים תמונה ב-.mk-zoom; התמונה מתקרבת בריחוף ונחתכת במסגרת.
 * משותף לכרטיסי שירות, מוצר וגלריה. */
.mk-zoom { overflow: hidden; }
.mk-zoom > img,
.mk-zoom img.mk-zoom__img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	/* הצילומים פורטרט ונכנסים למסגרות לרוחב. עיגון למרכז חתך ראשים —
	 * עיגון לראש הפריים שומר על הפנים ומוותר על תחתית התמונה. */
	object-position: center top;
	transition: transform var(--dur-slow) var(--ease-out);
	will-change: transform;
}
.mk-zoom:hover > img,
.mk-zoom:hover img.mk-zoom__img,
.mk-zoom:focus-within img { transform: scale(1.06); }

/* כרטיס מוצר נשאר ממורכז: המוצר יושב במרכז הפריים ואין בו ראשים לחתוך.
 * decor.css נטען אחרי main.css, ולכן ההחרגה חייבת לשבת כאן. */
.mk-product-card__media img { object-position: center; }

/* ---- שכבת גרדיאנט לטקסט מעל תמונה ----
 * הבסיס לכרטיסים מונחי-תמונה: הטקסט יושב מעל, השכבה מבטיחה קריאות. */
.mk-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(28, 55, 73, .94) 0%, rgba(28, 55, 73, .62) 42%, rgba(28, 55, 73, .12) 100%);
	pointer-events: none;
	transition: background var(--dur) var(--ease-out);
}
.mk-zoom:hover .mk-scrim,
.mk-zoom:focus-within .mk-scrim {
	background: linear-gradient(to top, rgba(28, 55, 73, .96) 0%, rgba(28, 55, 73, .70) 48%, rgba(28, 55, 73, .22) 100%);
}

/* ---- מספר גדול ממוספר (01–06) ----
 * לשלבי "איך זה עובד" ולכרטיסי "למה אנחנו". גדול, זהב, ספרות טבלאיות. */
.mk-numbox {
	display: block;
	font-family: var(--font-num);
	font-weight: var(--fw-heavy);
	font-size: var(--fs-stat);
	line-height: 1;
	color: var(--surface-accent);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

/* ---- גלולת זכוכית ----
 * תג/צ'יפ שצף מעל צילום. */
.mk-pill-frost {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	background: rgba(28, 55, 73, .46);
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: inset 0 0 0 1px rgba(243, 179, 63, .45);
	color: var(--mk-white);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
}
.mk-pill-frost svg { color: var(--mk-gold); flex: none; }

/* ---- מסגרת זהב ----
 * לתמונת דיוקן/אווירה שצריכה לקבל משקל. */
.mk-frame-gold {
	border: 2px solid var(--mk-gold);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.mk-frame-gold > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---- ספרות טבלאיות לסטטיסטיקות ----
 * נועל את רוחב הספרה כדי שמספר שמונפש לא ירצד. */
.mk-countup {
	font-variant-numeric: tabular-nums;
	font-family: var(--font-num);
}

/* ---- תג ממוספר קטן (סדר בתוך רשת) ---- */
.mk-badge-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--surface-accent-2);
	color: var(--mk-navy);
	font-family: var(--font-num);
	font-weight: var(--fw-black);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* ---- חשיפה בגלילה ----
 * מנוהל ע"י assets/js/mk-reveal.js. מוסתר רק כשיש JS (html.mk-js) כדי
 * שכשל סקריפט לא יסתיר תוכן, ואפס CLS: רק opacity+transform. */
.mk-js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.mk-js [data-reveal="fade"] { transform: none; }
.mk-js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* פרלקס עדין — ה-JS מזין את --mk-parallax; ברירת מחדל 0 כדי שבלי JS לא יזוז. */
[data-mk-parallax] {
	--mk-parallax: 0px;
	transform: translate3d(0, var(--mk-parallax), 0);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.mk-zoom:hover > img,
	.mk-zoom:hover img.mk-zoom__img,
	.mk-zoom:focus-within img { transform: none; }
	.mk-js [data-reveal] { opacity: 1; transform: none; transition: none; }
	[data-mk-parallax] { transform: none; }
}

/* גידור הנגישות: "עצירת אנימציות" מחזיר הכול למצב מנוחה גלוי. */
html.hb-a11y--stop-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
html.hb-a11y--stop-anim [data-mk-parallax] { transform: none !important; }