/* حركات الموقع المشتركة (صفحات المحتوى + المدونة) — نفس لغة صفحة الحركة (/motion/):
   كل ظهور «قبّة تطلع» (clip-path: ellipse من تحت)، ولوح شمس يمسح السطور، وطوابع تبان بلونها وتنكشف بالمرور.
   كله تحت html.fx (يحطّه landing-boot.js قبل الرسم بس لو الجهاز يتحمّل، ومو «تقليل الحركة» ولا الوضع الخفيف).
   بدون html.fx الصفحة ترجع لشكلها في site.css بالضبط. */

/* ===== تحضير قبل الرسم: البطل مخفي لين تبدأ الحركة (ويرجع لحاله بعد 3 ثواني لو السكربت ما اشتغل) ===== */
html.fx:not(.fx-on) .site .l-up h1, html.fx:not(.fx-on) .site .l-up > p { clip-path: inset(0 0 0 100%); animation: km-safety 0s 3s forwards; }
@keyframes km-safety { to { clip-path: none; } }

/* site.css يخفي .rise ويطلّعها بشفافية؛ هنا الحركة بالجافاسكربت بدالها */
html.fx .site .rise, html.fx .site .rise.in { opacity: 1; transform: none; transition: none; }
html.fx .site .l-up { animation: none; }

/* ===== Lenis ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.fx { scrollbar-width: none; }
html.fx::-webkit-scrollbar, html.fx body::-webkit-scrollbar { display: none; }

/* ===== لوح المسح والقبّة ===== */
.site .km-line { position: relative; width: fit-content; }
.site .km-panel { position: absolute; inset: -0.04em -0.08em; z-index: 5; pointer-events: none; background: #FFB914; transform-origin: left center; }
.site .km-oval { display: block; }

/* ===== الهيرو: خطوط كنتور حيّة خلف المحتوى ===== */
html.fx .site .l-hero { position: relative; isolation: isolate; }
.site .km-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
/* التوهج الدائري يبقى فوق الخطوط بس أخف، والمحتوى يبقى مقروء */
html.fx .site .l-hero:has(.km-gl) { background: none; }

/* ===== الأزرار: النص يطلع ونسخته الظل تحت (للعربي: الكتلة كاملة) ===== */
.site .km-roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.4; height: 1.4em; }
.site .km-roll > span { display: block; text-shadow: 0 1.4em currentColor; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.site a:hover .km-roll > span, .site button:hover .km-roll > span, .site a:focus-visible .km-roll > span { transform: translateY(-1.4em); }

/* ===== الطوابع: بلونها، ومع المرور تنسكب الرسمة كقبّة (نفس قاعة الثيمات في /motion/) ===== */
html.fx .site .l-st-art { background: var(--sc); }
html.fx .site .l-st-art > img { clip-path: ellipse(100% 0% at 50% 100%); transform: scale(1.1); transition: clip-path 0.75s cubic-bezier(0.65, 0.05, 0, 1), transform 0.75s cubic-bezier(0.65, 0.05, 0, 1); }
html.fx .site .l-st:hover .l-st-art > img, html.fx .site .l-st:focus-visible .l-st-art > img, html.fx .site .l-st.on .l-st-art > img { clip-path: ellipse(100% 120% at 50% 100%); transform: scale(1); }
html.fx .site .l-st-yr { color: rgba(255, 255, 255, 0.85); transition: color 0.4s; z-index: 2; }
html.fx .site .l-st[style*='#FFB914'] .l-st-yr { color: #071F52; }
html.fx .site .l-st:hover .l-st-yr, html.fx .site .l-st.on .l-st-yr, html.fx .site .l-st:focus-visible .l-st-yr { color: #4A5878; }
html.fx .site .l-st-art > b { z-index: 2; }

/* ===== الدعوة الأخيرة: كرت ليل بفتحة قبّة مفرّغة (نفس فوتر /motion/) ===== */
html.fx .site section.l-final { background: none; padding-bottom: 72px; }
html.fx .site .l-final > .l-wrap { --nw: 150px; --nh: 26px; max-width: 1080px; background: #121C45; color: #F6F8FF; box-shadow: inset 0 0 0 1.5px #2B3B7A; border-radius: 48px 48px 28px 28px; padding-block: 76px 56px;
  -webkit-mask: radial-gradient(var(--nw) var(--nh) at 50% 0, #0000 98%, #000 100%); mask: radial-gradient(var(--nw) var(--nh) at 50% 0, #0000 98%, #000 100%); }
html.fx .site .l-final h2 { color: #FFB914; font-size: 52px; line-height: 1.2; }
html.fx .site .l-final .l-lead { color: #A9B6D8; }
html.fx .site .l-final .l-ghost { color: #F6F8FF; box-shadow: inset 0 0 0 2px #2B3B7A; }
html.fx[data-mode='light'] .site .l-final > .l-wrap { background: #0B3484; }
html.fx[data-mode='light'] .site .l-final .l-lead { color: #D5DCEB; }

/* ===== القائمة: قبّة تطلع من تحت ===== */
.site .km-burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; border: 0; background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; position: relative; z-index: 31; }
.site .km-burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.6s cubic-bezier(0.65, 0.05, 0, 1); }
.site .km-burger i + i { margin-top: 5px; }
.site .km-burger span { display: grid; }
.site .km-burger:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
html.fx-menu .site .km-burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
html.fx-menu .site .km-burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
html.fx-menu .site header { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.fx-menu .site header .l-brand, html.fx-menu .site header .km-burger { color: #FFB914; position: relative; z-index: 31; }
.site .km-menu { position: fixed; inset: 0; z-index: 4; background: #121C45; color: #F6F8FF; visibility: hidden; clip-path: ellipse(120% 0% at 50% 100%); display: flex; flex-direction: column; justify-content: center; padding: calc(96px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.site .km-menu nav { display: flex; flex-direction: column; gap: 4px; max-width: 1120px; width: 100%; margin: 0 auto; }
.site .km-menu nav a { font-family: 'Baloo Bhaijaan 2', 'Readex Pro', sans-serif; font-weight: 800; font-size: clamp(30px, 5.4vw, 64px); line-height: 1.3; color: #F6F8FF; text-decoration: none; display: inline-flex; width: fit-content; align-items: baseline; gap: 14px; }
.site .km-menu nav a small { font: 500 14px/1 Fredoka, sans-serif; color: #A9B6D8; }
.site .km-menu nav a:hover, .site .km-menu nav a[aria-current='page'] { color: #FFB914; }
.site .km-menu .km-roll { line-height: 1.3; height: 1.3em; }
.site .km-menu .km-roll > span { text-shadow: 0 1.3em currentColor; }
.site .km-menu a:hover .km-roll > span { transform: translateY(-1.3em); }
.site .km-menu-foot { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline: max(24px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #A9B6D8; font-size: 14px; max-width: 1120px; margin: 0 auto; }
.site .km-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 6px 0; }
.site .km-switch b { width: 40px; height: 24px; border-radius: 14px; background: #2B3B7A; position: relative; transition: background-color 0.4s; }
.site .km-switch b::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #F6F8FF; transition: transform 0.4s cubic-bezier(0.65, 0.05, 0, 1); }
.site .km-switch[aria-pressed='true'] b { background: #FFB914; }
.site .km-switch[aria-pressed='true'] b::after { transform: translateX(-16px); }
.site .km-switch:focus-visible { outline: 3px solid #FFB914; outline-offset: 3px; border-radius: 8px; }

/* ===== مؤشر السكرول بدل الشريط ===== */
.site .km-prog { position: fixed; z-index: 6; inset-inline-end: 6px; top: 50%; height: 96px; margin-top: -48px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 30%, transparent); overflow: hidden; pointer-events: none; }
.site .km-prog i { position: absolute; inset: 0; background: var(--sun); transform-origin: top; transform: scaleY(0); }

@media (max-width: 860px) {
  html.fx .site .l-final > .l-wrap { --nw: 70px; --nh: 14px; border-radius: 28px; padding-block: 52px 40px; margin-inline: 12px; width: auto; }
  html.fx .site .l-final h2 { font-size: 34px; }
  .site .km-prog { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.fx .site .l-st-art > img { clip-path: none; transform: none; }
}