/*
 * ר.ת.מ בנקר — המוטיב: "המעבר"
 *
 * מכונת שטיפה עושה דבר אחד: מעבר אחד, והרצפה נקייה מאחוריה.
 *
 * הגרסה הראשונה של המוטיב היתה שכבת ציפוי — גרדיאנטים ב-7% שקיפות
 * שאיש לא הרגיש. הגרסה הזו מבנית: זווית אחת קבועה שחוזרת בכל האתר,
 * ורצועה עם קצה מוגדר במקום טשטוש.
 *
 *   רקע משורג  = הרצפה לפני
 *   רצועה חלקה = מה שהמכונה כבר עברה
 *   קו ירוק     = קצה המגב, הגבול בין השניים
 *
 * הזווית `--rtm-angle` היא קבוע גלובלי. קצה הגיבור, המפרידים בין
 * המקטעים, הרצועה והריחוף — כולם מיושרים אליה. זה מה שיוצר את התחושה.
 */

:root {
	--rtm-angle: 3.2deg;          /* הזווית הקבועה של האתר */
	--rtm-pass-angle: 96deg;      /* אותה זווית כגרדיאנט */
	--rtm-tick: 5px;

	/* גבולות הרצועה הנקייה, באחוזים לאורך הגרדיאנט */
	--rtm-pass-a: 30%;
	--rtm-pass-b: 63%;
}

/* ============================================================
   1. הרצפה לפני — שרגה טכנית, לא רעש
   ============================================================ */

.rtm-grain {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.rtm-grain::before {
	content: '';
	position: absolute;
	inset: -30% -15%;
	z-index: -2;
	pointer-events: none;
	transform: rotate(calc(var(--rtm-angle) * -2.6));

	/* שרגה טכנית — מרקם רצפה לפני המעבר */
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, .13) 0 1px,
		transparent 1px 11px
	);

	/* נמחקת בדיוק במקום שהרצועה עברה */
	-webkit-mask-image: linear-gradient(180deg, #000 0 26%, transparent 34% 66%, #000 74%);
	mask-image: linear-gradient(180deg, #000 0 26%, transparent 34% 66%, #000 74%);
}

.rtm-grain--light::before {
	background-image: repeating-linear-gradient(
		90deg,
		rgba(10, 31, 68, .07) 0 1px,
		transparent 1px 10px
	);
}

/* ============================================================
   2. הרצועה — קצה מוגדר, לא טשטוש
   ============================================================ */

/* הרצועה עוברת *מאחורי* התוכן ולכן היא נשארת שקטה: הבהרה עם קצה
   מוגדר, בלי קו צבע שחוצה כותרת. הקו הירוק שמור לקצוות המקטעים,
   שם הוא מבני ולא חותך אף מילה. */
.rtm-pass {
	position: absolute;
	inset: -30% -15%;
	z-index: -1;
	pointer-events: none;
	transform: rotate(calc(var(--rtm-angle) * -2.6));

	background: linear-gradient(
		180deg,
		transparent 0 20%,
		rgba(255, 255, 255, .09) 29%,
		rgba(125, 193, 66, .17) 50%,
		rgba(255, 255, 255, .09) 71%,
		transparent 80%
	);
}

/* על משטח בהיר הרצועה חייבת להיות ניטרלית. גוון ירוק על רקע בהיר
   נקרא כעכירות ולא כניקיון — שם רק קו הקצה נושא את הצבע. */
.rtm-grain--light .rtm-pass {
	background: linear-gradient(
		180deg,
		transparent 0 20%,
		rgba(10, 31, 68, .022) 30%,
		rgba(10, 31, 68, .045) 50%,
		rgba(10, 31, 68, .022) 70%,
		transparent 80%
	);
}

/* המעבר החד־פעמי בטעינה */
.rtm-pass--sweep {
	animation: rtm-sweep 1.6s cubic-bezier(.3, .7, .25, 1) .2s both;
}

/* ה-transform של האנימציה דורס את הסיבוב של הרצועה,
   ולכן הסיבוב חוזר בכל שלב. */
@keyframes rtm-sweep {
	from { transform: rotate(calc(var(--rtm-angle) * -2.6)) translateX(26%); opacity: 0; }
	45%  { opacity: 1; }
	to   { transform: rotate(calc(var(--rtm-angle) * -2.6)) translateX(0); opacity: 1; }
}

/* ============================================================
   3. קצה מקטע — חיתוך אלכסוני עם קו מוביל
   ============================================================ */

.rtm-edge {
	position: relative;
	padding-block-end: 3.5rem;
}

/* המשטח הבא נכנס באלכסון, והגבול העליון שלו הוא קו קצה המגב.
   שימוש בגבול ולא בפסאודו נוסף: הגיבור כבר משתמש ב-::before לשרגה. */
.rtm-edge::after {
	content: '';
	position: absolute;
	inset-inline: -2%;
	inset-block-end: -2px;
	height: 5rem;
	background: var(--rtm-edge-color, #fff);
	border-block-start: 3px solid var(--rtm-green);
	transform: skewY(calc(var(--rtm-angle) * -1));
	transform-origin: 100% 100%;
	pointer-events: none;
	z-index: 2;
}

/* מפריד בין שני מקטעים בהירים — אותה זווית, בלי צבע */
.rtm-divider {
	position: relative;
	block-size: 3.5rem;
	overflow: hidden;
	background: var(--rtm-divider-from, var(--rtm-white));
}

.rtm-divider::after {
	content: '';
	position: absolute;
	inset-inline: -2%;
	inset-block-end: 0;
	block-size: 5rem;
	background: var(--rtm-divider-to, var(--rtm-surface-soft));
	transform: skewY(calc(var(--rtm-angle) * -1));
	transform-origin: 100% 100%;
}

/* ============================================================
   4. סימוני מדידה
   ============================================================ */

/* סימוני המדידה שהקדימו את הכיתוב־על הוסרו לבקשת הלקוח: הם נקראו
   כתקלת רינדור ולא כאלמנט עיצובי. תווית הכיתוב־על נשארת, נקייה. */

.rtm-tickmark {
	position: relative;
	padding-inline-start: 0.7rem;
}

.rtm-tickmark::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block: .15em .15em;
	inline-size: 2px;
	background: currentColor;
	opacity: .55;
}

/* סרגל מדידה לרוחב — מפריד מקטעים בעולם המפרט של הלקוח */
.rtm-rule {
	block-size: 10px;
	background: repeating-linear-gradient(
		90deg,
		var(--rtm-line) 0 1px,
		transparent 1px 9px
	);
	border-block-start: 1px solid var(--rtm-line);
	opacity: .9;
}

/* ============================================================
   5. כרטיס — פינת מעבר קבועה + ריחוף
   ============================================================ */

.rtm-card,
.rtm-cat,
.rtm-tile,
.rtm-value {
	position: relative;
	overflow: hidden;
}

/* פינה אלכסונית קבועה: המוטיב נוכח גם בלי ריחוף */
.rtm-value::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 74px;
	block-size: 74px;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		transparent 47%,
		var(--rtm-green) 47%,
		var(--rtm-green) 53%,
		transparent 53%
	);
	opacity: .6;
	transition: opacity var(--rtm-dur) var(--rtm-ease);
}

.rtm-value:hover::before { opacity: 1; }

/* הריחוף: רצועה עם קצה מוגדר חולפת על הכרטיס */
.rtm-card::after,
.rtm-cat::after,
.rtm-tile::after {
	content: '';
	position: absolute;
	inset-block: -20%;
	inset-inline-start: -70%;
	inline-size: 45%;
	pointer-events: none;
	background: linear-gradient(
		108deg,
		transparent 0 35%,
		rgba(125, 193, 66, .20) 35%,
		rgba(125, 193, 66, .05) 88%,
		rgba(125, 193, 66, .55) 88%,
		rgba(125, 193, 66, .55) 92%,
		transparent 92%
	);
	opacity: 0;
	transition: transform .6s var(--rtm-ease), opacity .18s var(--rtm-ease);
}

.rtm-card:hover::after,
.rtm-cat:hover::after,
.rtm-tile:hover::after {
	opacity: 1;
	transform: translateX(-260%);
}

[dir='rtl'] .rtm-card:hover::after,
[dir='rtl'] .rtm-cat:hover::after,
[dir='rtl'] .rtm-tile:hover::after {
	transform: translateX(260%);
}

/* ============================================================
   6. חשיפה בגלילה
   ============================================================ */

/* התוכן נראה כברירת מחדל. ההסתרה מופעלת רק אחרי ש-JS הוכיח שהוא
   מסוגל לחשוף אותה — אחרת אנימציית חשיפה שלא נורית משאירה תוכן
   בלתי נראה לצמיתות: לגולש שגולל מהר, במצב קריאה, בהדפסה ולסורקים. */
.rtm-reveal { opacity: 1; transform: none; }

.rtm-anim .rtm-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--rtm-ease), transform .6s var(--rtm-ease);
}

.rtm-anim .rtm-reveal.is-in { opacity: 1; transform: none; }

.rtm-anim .rtm-reveal:nth-child(2) { transition-delay: .07s; }
.rtm-anim .rtm-reveal:nth-child(3) { transition-delay: .14s; }
.rtm-anim .rtm-reveal:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
	.rtm-anim .rtm-reveal { opacity: 1; transform: none; transition: none; }
	.rtm-pass--sweep { animation: none; }
	.rtm-card::after, .rtm-cat::after, .rtm-tile::after { display: none; }
}

@media (max-width: 620px) {
	:root { --rtm-angle: 2.4deg; }
	.rtm-edge { padding-block-end: 2.5rem; }
	.rtm-edge::after { height: 3.5rem; }
	.rtm-value::before { inline-size: 56px; block-size: 56px; }
}