/* ==========================================================================
   Home page motion — CSS part (loops, hover micro-animations, states toggled by home-motion.js).
   Only transform / opacity are animated. Loaded only while «حركة الصفحة الرئيسية» is on.
   ========================================================================== */

:root {
	--ynm-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ynm-out: cubic-bezier(.22, 1, .36, 1);
}

/* Hero starts hidden for one frame so the intro has no flash (failsafe in includes/home-motion.php).
   The video card only fades (opacity): a background video under visibility:hidden renders black in Chrome. */
html.yns-motion #hero .et_pb_row { opacity: 0; }
html.yns-motion #hero .et_pb_heading,
html.yns-motion #hero .et_pb_text,
html.yns-motion #hero .et_pb_group { visibility: hidden; }

/* ---------- Reading progress (brand yellow, above everything) ---------- */
.ynm-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 100000;
	background: linear-gradient(90deg, var(--yn-orange, #FF7515), var(--yn-yellow, #FDDC00));
	transform: scaleX(0);
	transform-origin: right center; /* RTL: grows from the reading start */
	pointer-events: none;
}
body.admin-bar .ynm-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ynm-progress { top: 46px; } }

/* ---------- Word-by-word reveal (Arabic is split by words only, never letters) ---------- */
.ynm-wm { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em; margin-block: -.08em; }
.ynm-w { display: inline-block; will-change: transform; }

/* ---------- Hero ---------- */
/* The yellow waves stay fixed in the video's corner (no motion). */

/* ---------- Category cutouts: gentle bob, each tile on its own beat ---------- */
.ynm-float #categories .et_pb_image .et_pb_image_wrap { animation: ynm-bob 5.2s ease-in-out infinite; }
.ynm-float #categories .et_pb_column:nth-child(2) .et_pb_image .et_pb_image_wrap { animation-delay: -1.3s; animation-duration: 5.8s; }
.ynm-float #categories .et_pb_column:nth-child(3) .et_pb_image .et_pb_image_wrap { animation-delay: -2.6s; animation-duration: 4.9s; }
.ynm-float #categories .et_pb_column:nth-child(4) .et_pb_image .et_pb_image_wrap { animation-delay: -3.9s; animation-duration: 5.5s; }
@keyframes ynm-bob {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(0, -9px, 0) rotate(1.5deg); }
}

/* ---------- Icon badges: each icon acts out its meaning on hover ---------- */
.ynm-icon p { display: inline-block; transform-origin: 50% 60%; }
@media (hover: hover) {
	.ynm-icon--drive:hover p, .ynm-icon--drive.is-play p { animation: ynm-drive .9s var(--ynm-out); }
	.ynm-icon--shield:hover p, .ynm-icon--shield.is-play p { animation: ynm-pulse .8s var(--ynm-spring); }
	.ynm-icon--flip:hover p, .ynm-icon--flip.is-play p { animation: ynm-flip .8s var(--ynm-out); }
	.ynm-icon--spin:hover p, .ynm-icon--spin.is-play p { animation: ynm-spin .9s var(--ynm-out); }
	.ynm-icon--chat:hover p, .ynm-icon--chat.is-play p { animation: ynm-wobble .8s var(--ynm-spring); }
}
.ynm-icon--drive.is-play p { animation: ynm-drive .9s var(--ynm-out); }
.ynm-icon--shield.is-play p { animation: ynm-pulse .8s var(--ynm-spring); }
.ynm-icon--flip.is-play p { animation: ynm-flip .8s var(--ynm-out); }
.ynm-icon--spin.is-play p { animation: ynm-spin .9s var(--ynm-out); }
.ynm-icon--chat.is-play p { animation: ynm-wobble .8s var(--ynm-spring); }
@keyframes ynm-drive { 0% { transform: translateX(0); } 35% { transform: translateX(-26px); opacity: 0; } 36% { transform: translateX(26px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes ynm-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes ynm-flip { 0% { transform: perspective(200px) rotateY(0); } 100% { transform: perspective(200px) rotateY(360deg); } }
@keyframes ynm-spin { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
@keyframes ynm-wobble { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(8deg) scale(1.05); } }

/* ---------- Testimonials: stars light up one by one ---------- */
.ynm-star { display: inline-block; opacity: .25; transform: scale(.6); transition: opacity .3s, transform .45s var(--ynm-spring); }
.is-in .ynm-star { opacity: 1; transform: scale(1); }
.is-in .ynm-star:nth-child(2) { transition-delay: .09s; }
.is-in .ynm-star:nth-child(3) { transition-delay: .18s; }
.is-in .ynm-star:nth-child(4) { transition-delay: .27s; }
.is-in .ynm-star:nth-child(5) { transition-delay: .36s; }

/* ---------- Brand story: key benefits get a yellow underline drawn under them ---------- */
.ynm-mark strong {
	background: linear-gradient(var(--yn-yellow, #FDDC00), var(--yn-yellow, #FDDC00)) no-repeat right 100% / 0% 3px;
	transition: background-size .9s var(--ynm-out);
	padding-bottom: 2px;
}
.ynm-mark.is-in strong { background-size: 100% 3px; }
.ynm-mark.is-in strong:nth-of-type(2) { transition-delay: .15s; }
.ynm-mark.is-in strong:nth-of-type(3) { transition-delay: .3s; }
.ynm-mark.is-in strong:nth-of-type(4) { transition-delay: .45s; }
.ynm-mark.is-in strong:nth-of-type(5) { transition-delay: .6s; }

/* ---------- Newsletter: celebration when the discount code arrives ---------- */
.ynm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100001; overflow: hidden; }
.ynm-confetti i { position: absolute; display: block; width: 9px; height: 14px; border-radius: 2px; will-change: transform, opacity; }
.yns-nl__code { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
	.ynm-float * { animation: none !important; }
	.ynm-progress, .ynm-confetti { display: none; }
}

/* Things that slide in from the side must never widen the page (no sideways wobble on phones). */
html.ynm-float #main-content .et_pb_section { overflow-x: clip; }

/* Scroll cue under the hero card. */
.ynm-cue {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 18px auto 0;
	padding: 6px 10px;
	border: 0;
	background: none;
	color: var(--yn-heading, #1E293B);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .35s, transform .35s;
}
.ynm-cue.is-gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ynm-cue__ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 100px;
	background: var(--yn-yellow, #FDDC00);
	color: var(--yn-heading, #1E293B);
	box-shadow: 0 10px 22px -12px rgba(2, 88, 162, .5);
	animation: ynm-cue-bounce 1.8s cubic-bezier(.45, 0, .2, 1) infinite;
}
.ynm-cue__ring svg { width: 20px; height: 20px; }
.ynm-cue:hover .ynm-cue__ring, .ynm-cue:focus-visible .ynm-cue__ring { animation-play-state: paused; background: var(--yn-primary, #0258A2); color: #FFFFFC; }
.ynm-cue:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; border-radius: 12px; }
@keyframes ynm-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ynm-cue__ring { animation: none; } }

/* Desktop: the hero reaches the bottom of the screen so the cue fills the space under the card (the card keeps its
   size and the blue band keeps its height: the band is pinned to the card instead of a share of the section). The
   grown card must not be clipped, and the next section slides over it on release. */
@media (min-width: 980px) {
	html.ynm-float #hero {
		/* Band height = 60% of the hero's natural height (top padding + card + 8px), exactly as the static design. */
		--ynm-band: calc((clamp(128px, 10vw, 156px) + clamp(440px, 40vw, 580px) + 8px) * 0.6);
		display: flex;
		flex-direction: column;
		row-gap: 0;
		min-height: 100svh;
		box-sizing: border-box;
		overflow: visible;
		overflow-x: visible;
		background-image: url("/wp-content/uploads/2026/10/yneeds-waves-soft.webp"), linear-gradient(180deg, #0258A2 0, #0258A2 var(--ynm-band), #FFFFFC var(--ynm-band), #FFFFFC 100%) !important;
	}
	html.ynm-float #hero .et_pb_row { will-change: transform; flex: 0 0 auto; }
	html.ynm-float #hero .ynm-cue { margin-top: auto; padding-top: 10px; margin-bottom: 22px; }
	/* Short laptop screens: keep the cue above the fold (ring only). */
	@media (max-height: 820px) {
		html.ynm-float #hero .ynm-cue { padding-top: 4px; padding-bottom: 0; margin-bottom: 10px; gap: 0; }
		html.ynm-float #hero .ynm-cue__t { display: none; }
		html.ynm-float #hero .ynm-cue__ring { width: 36px; height: 36px; }
	}
	html.ynm-float #value-props { position: relative; z-index: 3; }

	/* Wordmark behind the cue, under the card: outlined "Y-Needs" + soft "بشكل جديد" in the brand tint. */
	html.ynm-float #hero { position: relative; }
	html.ynm-float #hero .ynm-mark {
		position: absolute;
		z-index: 0;
		inset-inline: 0;
		top: calc(clamp(128px, 10vw, 156px) + clamp(440px, 40vw, 580px) + 8px);
		bottom: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0 .35em;
		padding: 0 24px 96px;
		overflow: hidden;
		pointer-events: none;
		user-select: none;
		font-weight: 800;
		line-height: .95;
		letter-spacing: -0.03em;
		text-align: center;
	}
	html.ynm-float #hero .ynm-mark__en {
		display: block;
		font-family: "Rubik Local", "Zain Local", sans-serif;
		font-size: clamp(48px, min(7.5vw, 15vh), 170px);
		color: transparent;
		-webkit-text-stroke: 2px rgba(2, 88, 162, .22);
		direction: ltr;
	}
	html.ynm-float #hero .ynm-mark__ar {
		display: block;
		font-size: clamp(44px, min(7vw, 14vh), 160px);
		color: rgba(2, 88, 162, .09);
		margin-top: .08em;
	}
	/* Short laptop screens: the gap is small, so the wordmark is smaller and the cue (ring only) sits in the corner. */
	@media (max-height: 820px) {
		html.ynm-float #hero .ynm-cue { position: absolute; z-index: 1; inset-inline-end: clamp(24px, 4vw, 64px); bottom: 14px; margin: 0; padding: 0; gap: 0; }
		html.ynm-float #hero .ynm-cue__t { display: none; }
		html.ynm-float #hero .ynm-cue__ring { width: 38px; height: 38px; }
		html.ynm-float #hero .ynm-mark { padding-bottom: 8px; }
		html.ynm-float #hero .ynm-mark__en, html.ynm-float #hero .ynm-mark__ar { font-size: clamp(32px, min(5vw, 6vh), 90px); }
	}
}

/* While the hero is held (html.ynm-hold): the header keeps its top state. Mirrors orange-floux-header's .is-top rules. */
html.ynm-hold .ofh { transform: none !important; }
html.ynm-hold .ofh--hero .ofh-band { background: transparent !important; box-shadow: none !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.ynm-hold .ofh--hero .ofh-logo { color: var(--ofh-bar-text); }
html.ynm-hold .ofh--hero .ofh-logo.has-light .ofh-logo__img--main { opacity: 0; }
html.ynm-hold .ofh--hero .ofh-logo.has-light .ofh-logo__img--light { opacity: 1; }
html.ynm-hold .ofh--hero .ofh-logo.no-light .ofh-logo__img--main { filter: brightness(0) invert(1); }