/* =====================================================================
   تحسينات عامة للطباعة والمسافات (تُحمَّل أخيراً)
   ===================================================================== */

/* العناوين العربية: ارتفاع سطر كافٍ للحركات والنقاط كي لا تتداخل الأسطر أو تُقص */
h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { line-height: 1.5; }
html[lang="ar"] .hero-title,
html[lang="ar"] .page-hero h1, html[lang="ar"] .article-hero h1, html[lang="ar"] .detail-hero h1,
html[lang="ar"] .dn-hero h1, html[lang="ar"] .vl-hero h1 { line-height: 1.42; }
html[lang="ar"] .slide-title { line-height: 1.38; }
html[lang="ar"] .card h3, html[lang="ar"] .section-head h2 { line-height: 1.5; }

/* حركة ظهور العنوان كلمة كلمة: مساحة كافية حول كل كلمة، ثم يُلغى القص بعد انتهاء الحركة */
[data-split] .w { padding-block: .32em; margin-block: -.32em; padding-inline: .06em; margin-inline: -.06em; }
[data-split].split-done .w { overflow: visible; }

/* مسافة واضحة بين رأس الصفحة وأول قسم */
.section--flush { padding-top: clamp(2.4rem, 5vw, 3.8rem); }
.page-hero + .section:not(.section--flush) { padding-top: clamp(3rem, 6vw, 5rem); }

/* النصوص المقصوصة بعدد أسطر: ارتفاع سطر يمنع قص النقاط */
.card p { line-height: 1.8; }
html[lang="ar"] .card h3 { padding-block: .05em; }

/* ---------- تنسيق فقرات المقالات (من «الإعدادات ← تنسيق النصوص») */
[data-typo] { font-size: var(--tx-size, 1.14rem); line-height: var(--tx-line, 2); }
[data-typo] p, [data-typo] li { line-height: var(--tx-line, 2); }
[data-typo] > p, [data-typo] .md-col > p { margin: 0 0 var(--tx-para, 1.25em); }
[data-typo~="tx-justify"] p, [data-typo~="tx-justify"] li { text-align: justify; text-align-last: start; hyphens: auto; -webkit-hyphens: auto; }
html[lang="ar"] [data-typo~="tx-justify"] p { hyphens: manual; text-justify: inter-word; }
[data-typo~="tx-center"] p { text-align: center; }
[data-typo~="tx-indent"] > p { text-indent: 2em; }
[data-typo~="tx-indent"] > p:first-child { text-indent: 0; }
/* الكشيدة: الكلمات الممدودة تظهر بنفس الخط دون أي فواصل مرئية */
.kw { white-space: nowrap; }
[data-typo~="tx-kashida"].is-kashida-ready p { text-align: justify; }
/* محاذاة جزء من النص داخل المحرر :::center / :::justify / :::start / :::end */
.md-align-center { text-align: center; } .md-align-justify p { text-align: justify; }
.md-align-start { text-align: start; } .md-align-end { text-align: end; }

/* =====================================================================
   الأداء والسلاسة — بدائل خفيفة للمؤثرات الثقيلة بنفس الشكل تقريباً
   ===================================================================== */

/* الفقاعات الملوّنة: تدرج دائري ناعم بدل blur(70px) (كان يُعاد رسمه في كل إطار) */
.blob { filter: none; background: none !important; will-change: transform; }
.blob.b1 { background: radial-gradient(circle, color-mix(in srgb, var(--brand-2) 55%, transparent) 0%, transparent 68%) !important; }
.blob.b2 { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 0%, transparent 68%) !important; }
.blob.b3 { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 40%, transparent) 0%, transparent 68%) !important; }
.sa-blob { filter: none; background: radial-gradient(circle, var(--c, color-mix(in srgb, var(--accent) 60%, transparent)) 0%, transparent 68%) !important; will-change: transform; }
.sa-blob.s2 { --c: color-mix(in srgb, var(--brand-2) 70%, transparent); }

/* الحبيبات: بدون مزج الطبقات (mix-blend-mode كان يجبر المتصفح على إعادة التركيب أثناء التمرير) */
.grain { mix-blend-mode: normal; opacity: .035; inset: 0; }

/* الترويسة عند التمرير: خلفية شبه معتمة بدل التمويه المتواصل */
.site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--paper) 96%, transparent); }
.float-badge, .kicker { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ظهور العناصر: أسرع وأخف (كان طويلاً ويُشعر بالبطء) */
.js .reveal { transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 55ms); }

/* الحركات المستمرة تتوقف تلقائياً حين يكون القسم خارج الشاشة */
[data-offscreen] *, [data-offscreen]::before, [data-offscreen]::after { animation-play-state: paused !important; }

/* رسم الأقسام البعيدة عند الاقتراب منها فقط (أسرع فتحاً وتمريراً) */
footer.site-footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* انتقال ناعم بين الصفحات (المتصفحات الحديثة) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.site-header { view-transition-name: site-header; }

/* الجوال: نوقف المؤثرات الزخرفية المستمرة كلياً لتوفير البطارية والسلاسة */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .blob, .sa-blob, .vl-ring, .play-ring { animation: none !important; }
  .grain { display: none; }
  .float-badge, .vl-ph, .vl-badge, .dn-float, .dn-visual > img { animation: none !important; }
}

/* شريط تنبيه وضع الصيانة (يظهر للمدير فقط) */
.maint-bar { position: fixed; z-index: 90; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 99px; background: #f59e0b; color: #2b1a00; font-size: .8rem; font-weight: 700; line-height: 1.5; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); pointer-events: none; }
.maint-bar .ico { width: 16px; height: 16px; flex: none; }