/* =========================================================================
   motion.css — تنفيذ مواصفة الحركة والتفاعل (Figma: Motion, Interaction & A11y)
   المبدأ: حركة هادئة وهادفة — دقيقة وموزونة، لا مطّاطة.
   كل مدة هنا مأخوذة من المواصفة الموثّقة. الجوال يستخدم نفس المنحنيات × 0.8.
   ========================================================================= */

:root {
	/* منحنيات التسارع المعتمدة */
	--ease-in:      cubic-bezier(.25, 1, .5, 1);      /* ease-out-quart — الدخول */
	--ease-move:    cubic-bezier(.76, 0, .24, 1);     /* ease-in-out-quart — الحركة */

	/* المدد المعتمدة (مللي ثانية) */
	--t-micro:  120ms;
	--t-hover:  200ms;
	--t-reveal: 320ms;
	--t-hero:   600ms;

	--focus-ring: 0 0 0 3px rgba(0, 165, 181, .55);
}

@media (max-width: 900px) {
	:root { --t-micro: 96ms; --t-hover: 160ms; --t-reveal: 256ms; --t-hero: 480ms; }
}

/* ===================== 1. الظهور عند التمرير ===================== */
/* fade + translateY 24 → 0 خلال 320ms عند دخول 15% من العنصر، مرة واحدة */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--t-reveal) var(--ease-in), transform var(--t-reveal) var(--ease-in);
	will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; will-change: auto; }

/* كشف الصور بقناع — لمسة إضافية فوق المواصفة */
.image-reveal img { transform: scale(1.06); transition: transform 900ms var(--ease-in); }
.image-reveal.visible img { transform: scale(1); }

/* ===================== 2. الهيرو السينمائي ===================== */
/* الصورة 1.06 ← 1.00 خلال 1.2 ثانية عند التحميل */
.hero-media { transform: scale(1.06); animation: heroSettle 1200ms var(--ease-in) forwards; }
@keyframes heroSettle { to { transform: scale(1); } }

/* النصوص تتتابع كل 80ms: eyebrow → title → lead → buttons */
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: heroIn var(--t-hero) var(--ease-in) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: 240ms; }
.hero-copy > *:nth-child(2) { animation-delay: 320ms; }
.hero-copy > *:nth-child(3) { animation-delay: 400ms; }
.hero-copy > *:nth-child(4) { animation-delay: 480ms; }
.hero-aside { opacity: 0; transform: translateY(18px); animation: heroIn var(--t-hero) var(--ease-in) 560ms forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* مؤشر "استكشف" — يبقى خط النبض المعرَّف في main.css كما هو */
.scroll-indicator { transition: opacity var(--t-hover) var(--ease-in); }

/* ===================== 3. الهيدر ===================== */
/* شفاف ← صلب عند 80px: تلاشي الخلفية 200ms، الارتفاع 96 ← 72 خلال 240ms */
.site-header {
	transition: background-color var(--t-hover) var(--ease-in),
	            box-shadow var(--t-hover) var(--ease-in),
	            height 240ms var(--ease-move),
	            transform 240ms var(--ease-move);
}
/* يختفي عند النزول بعد 300px ويعود عند الصعود */
.site-header.header-hidden { transform: translateY(-160%); }

/* خط تحت رابط التنقل يمتد من بداية النص 160ms */
.desktop-nav a { position: relative; transition: color var(--t-hover) var(--ease-in); }
.desktop-nav a::after {
	content: ""; position: absolute; inset-inline-start: 0; bottom: -6px;
	height: 2px; width: 100%; background: var(--accent, #00a5b5);
	transform: scaleX(0);
	transition: transform 160ms var(--ease-in);
}
[dir="rtl"] .desktop-nav a::after { transform-origin: right; }
[dir="ltr"] .desktop-nav a::after { transform-origin: left; }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.current::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* شريط تقدم القراءة — 2px تركوازي، خطي */
.scroll-progress {
	position: fixed; top: 0; inset-inline-start: 0; width: 100%; height: 2px;
	background: var(--accent, #00a5b5); transform: scaleX(0);
	transform-origin: right; z-index: 2000; pointer-events: none;
	transition: transform 80ms linear;
}
[dir="ltr"] .scroll-progress { transform-origin: left; }

/* ===================== 4. الأزرار والروابط ===================== */
.btn, .text-link, .card-arrow, .icon-btn, .lang-toggle {
	transition: background-color var(--t-hover) var(--ease-in),
	            color var(--t-hover) var(--ease-in),
	            border-color var(--t-hover) var(--ease-in),
	            transform var(--t-micro) var(--ease-in);
}
.btn .btn-arrow, .text-link span:last-child, .card-arrow {
	display: inline-block;
	transition: transform var(--t-hover) var(--ease-in);
}
/* السهم يزحف 4px باتجاه القراءة */
[dir="rtl"] .btn:hover .btn-arrow,
[dir="rtl"] .text-link:hover span:last-child { transform: translateX(-4px); }
[dir="ltr"] .btn:hover .btn-arrow,
[dir="ltr"] .text-link:hover span:last-child { transform: translateX(4px); }

.btn:active, .icon-btn:active, .lang-toggle:active { transform: scale(.98); }

/* حلقة تركيز تركوازية 3px بلا تأخير — لا تُزال أبدًا لمستخدمي لوحة المفاتيح */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: none; box-shadow: var(--focus-ring); border-radius: 2px;
	transition: box-shadow 0ms;
}

/* ===================== 5. البطاقات ===================== */
/* الصورة ترتفع 1.00 ← 1.04 داخل قناعها خلال 400ms، والتدرج يعتم 10% */
.product-card, .news-card { transition: transform var(--t-hover) var(--ease-in), box-shadow var(--t-hover) var(--ease-in); }
.product-card .product-image,
.news-card .image-wrapper,
.card-media { overflow: hidden; position: relative; }
.product-card .product-image img,
.news-card .image-wrapper img,
.card-media img {
	transition: transform 400ms var(--ease-in), filter 400ms var(--ease-in);
	will-change: transform;
}
.product-card:hover .product-image img,
.product-card:focus-within .product-image img,
.news-card:hover .image-wrapper img,
.news-card:focus-within .image-wrapper img {
	transform: scale(1.04); filter: brightness(.9);
}
[dir="rtl"] .product-card:hover .card-arrow { transform: translateX(-5px); }
[dir="ltr"] .product-card:hover .card-arrow { transform: translateX(5px); }

/* ===================== 6. الأكورديون ===================== */
.accordion-panel {
	overflow: hidden;
	transition: height var(--t-hover) var(--ease-move), opacity 160ms var(--ease-in);
}
.accordion-trigger i {
	display: inline-block;
	transition: transform var(--t-hover) var(--ease-move);
}
.accordion-trigger[aria-expanded="true"] i { transform: rotate(45deg); } /* + ← × */

/* ===================== 7. قائمة الجوال ===================== */
/* تنزلق من حافة النهاية 300ms مع حجاب كحلي 40% */
.mobile-nav {
	transition: transform 300ms var(--ease-in), visibility 300ms;
	transform: translateX(-100%); /* الافتراضي: عربي (حافة النهاية = اليسار) */
}
[dir="ltr"] .mobile-nav { transform: translateX(100%); }
.mobile-nav.open, [dir="ltr"] .mobile-nav.open { transform: translateX(0); }
.nav-scrim {
	position: fixed; inset: 0; background: rgba(0, 45, 98, .4);
	opacity: 0; visibility: hidden; z-index: 1400;
	transition: opacity 300ms var(--ease-in), visibility 300ms;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.nav-scrim.show { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
/* روابط القائمة تتتابع عند الفتح */
.mobile-nav nav a { opacity: 0; transform: translateY(12px); }
.mobile-nav.open nav a { animation: navItemIn 300ms var(--ease-in) forwards; }
.mobile-nav.open nav a:nth-child(1) { animation-delay: 80ms; }
.mobile-nav.open nav a:nth-child(2) { animation-delay: 120ms; }
.mobile-nav.open nav a:nth-child(3) { animation-delay: 160ms; }
.mobile-nav.open nav a:nth-child(4) { animation-delay: 200ms; }
.mobile-nav.open nav a:nth-child(5) { animation-delay: 240ms; }
.mobile-nav.open nav a:nth-child(6) { animation-delay: 280ms; }
.mobile-nav.open nav a:nth-child(n+7) { animation-delay: 320ms; }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* ===================== 8. شريط المنتجات على الجوال ===================== */
/* النقاط مخفية افتراضيًا وتظهر داخل استعلام الجوال أدناه */
.carousel-dots { display: none; }
@media (max-width: 700px) {
	.products-grid {
		display: grid; grid-auto-flow: column;
		grid-auto-columns: calc(100% - 56px); /* إطلالة على البطاقة التالية ≥ 40px */
		gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--gutter, 20px);
		padding-inline: var(--gutter, 20px); margin-inline: calc(var(--gutter, 20px) * -1);
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.products-grid::-webkit-scrollbar { display: none; }
	.products-grid > * { scroll-snap-align: start; }
	.carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
	.carousel-dots button {
		width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
		background: #c9d2dc; cursor: pointer;
		transition: background-color var(--t-hover) var(--ease-in), width var(--t-hover) var(--ease-in);
	}
	.carousel-dots button[aria-current="true"] { background: var(--accent, #00a5b5); width: 20px; border-radius: 4px; }
}

/* ===================== 9. النماذج ===================== */
input, textarea, select {
	transition: border-color var(--t-micro) var(--ease-in), box-shadow var(--t-micro) var(--ease-in);
}
.field-hint, .field-error {
	animation: hintIn 160ms var(--ease-in) forwards;
}
@keyframes hintIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* مُحمِّل ثلاثي النقاط داخل الزر عند الإرسال */
.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 34px; height: 6px;
	background: radial-gradient(circle 3px at 3px 3px, currentColor 92%, transparent) 0 0 / 14px 6px repeat-x;
	color: #fff; animation: dots 900ms linear infinite;
}
@keyframes dots { to { background-position: 14px 0; } }

/* بطاقة التأكيد بعد الإرسال */
.form-success { animation: successIn 320ms var(--ease-in) forwards; }
@keyframes successIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===================== 10. شريط سعر السهم ===================== */
.ticker__price [data-price] { display: inline-block; }
.ticker__price [data-price].flip { animation: flipNum 240ms var(--ease-move); }
@keyframes flipNum {
	0%   { transform: translateY(0); opacity: 1; }
	49%  { transform: translateY(-90%); opacity: 0; }
	51%  { transform: translateY(90%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
.ticker__change.flash-up   { animation: flashUp 600ms var(--ease-in); }
.ticker__change.flash-down { animation: flashDown 600ms var(--ease-in); }
@keyframes flashUp   { 0%,100% { background: transparent; } 25% { background: rgba(0,165,181,.22); } }
@keyframes flashDown { 0%,100% { background: transparent; } 25% { background: rgba(214,69,65,.22); } }

/* ===================== 11. لمسات إضافية ===================== */
/* الأرقام: نبضة عند اكتمال العدّ */
.counter.counted { animation: statPop 450ms cubic-bezier(.34,1.56,.64,1); }
@keyframes statPop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* لمعة هادئة تعبر قسم الدعوة للإجراء مرة واحدة عند ظهوره */
.cta.visible::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%);
	transform: translateX(-60%); animation: sheen 1600ms var(--ease-move) 200ms forwards;
}
.cta { position: relative; overflow: hidden; }
@keyframes sheen { to { transform: translateX(60%); } }

/* ===================== 12. احترام تقليل الحركة ===================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
	.hero-copy > *, .hero-aside { opacity: 1; transform: none; animation: none; }
	.hero-media { transform: none; animation: none; }
	.scroll-progress, .cta.visible::after { display: none; }
	.mobile-nav nav a { opacity: 1; transform: none; }
}