/* ============================================================
   رتّل — خلفية الحروف التفاعلية (Letters Background)
   ------------------------------------------------------------
   طبقةٌ ثابتة خلف كل محتوى الصفحة: تدرّجٌ نعناعيّ + هالاتٌ بيضاء + سطورُ
   كرّاسة + ٢٤ حرفاً/رقماً. الحرف قربَ المؤشّر (أو الإصبع) «يُكتَب»: يمتلئ
   ويُرسَم كنتوره بحركة قلم وتظهر شارةُ تسميع. المُحرّك في
   ‎js/letters-background.js‎، وهو مصدر مواضع الحروف وأحجامها.

   منقولةٌ بصريّاً عن نموذج المالك. ملاحظة أمينة: «الخطوط المنقّطة» في
   النموذج كانت ‎<line stroke-dasharray="0 16">‎ — طولُ شرطةٍ صفر ⇒ لا
   تُرسَم أصلاً؛ الظاهر فعلاً هو سطور الكرّاسة الأفقية وحدها، وهي المنقولة.

   الطبقة ‎aria-hidden‎ و‎pointer-events:none‎: زخرفةٌ لا تصل قارئ الشاشة
   ولا تسرق نقرة.
   ============================================================ */

/* ── الطبقة الأساسية (خلف كل شيء) ───────────────────────────── */
.rl-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(120% 80% at 20% 10%, #E8FAF6 0%, #DDF0EC 30%, #C6E8E3 65%, #B9DFD9 100%);
}
.rl-blob { position: absolute; border-radius: 100%; }
.rl-rules {
  position: absolute; inset: 0; opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 54px, rgba(122,175,167,.06) 54px 55px);
}
.rl-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 50%, transparent 60%, rgba(0,0,0,.04) 100%);
}
.rl-letters { position: absolute; inset: 0; }

/* ── الحرف: خامل (كنتور شفّاف) ⇄ نشِط (ممتلئ + شارة) ─────────── */
.rl-letter {
  position: absolute; will-change: transform;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.rl-letter-in { position: relative; }
.rl-glyph {
  position: relative; display: inline-block; line-height: 1; font-weight: 900;
  font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  /* بند ل١ — كنتورٌ مصبوغٌ بلون الهويّة. التعليل في الاختبار. */
  color: transparent;
  -webkit-text-stroke: 2px rgba(15,118,110,.30);
  transition: -webkit-text-stroke-color .35s ease, color .35s ease;
  opacity: 1;
}
.rl-letter[data-active="true"] .rl-glyph {
  /* بند ل١: لا بكسلَ زخرفيٍّ أغمقُ من L*=68 (كان L*=16.9 — توأمُ النصّ).
     الأرقام في tests/letters-color-contract.test.js */
  color: rgba(13,148,136,.20);
  -webkit-text-stroke: 2.2px rgba(15,118,110,.42);
  opacity: 1;
  /* ظلٌّ أبيضُ لا داكن. */
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.9));
  animation: rl-pop .5s ease-out;
}
/* كنتورٌ ثانٍ فوق الحرف يُرسَم كأنّ قلماً يكتبه (stroke-dashoffset) */
.rl-trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  transform: scale(1.15); transform-origin: center;
}
.rl-trace text {
  fill: none; stroke: rgba(31,58,55,.18); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 0 420; stroke-dashoffset: 420; opacity: .6;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) var(--rl-delay, 0s), stroke .3s;
}
.rl-letter[data-active="true"] .rl-trace text {
  stroke: rgba(15,118,110,.55); stroke-width: 1.3;
  stroke-dasharray: 420; stroke-dashoffset: 0; opacity: 1;
}

/* ── شارة «يُسمَّع الآن» فوق الحرف النشِط ────────────────────── */
.rl-badge {
  position: absolute; top: -8px; left: -8px;
  display: flex; align-items: center; gap: 3px;
  opacity: 0; transform: scale(.6) translateY(4px);
  transition: opacity .3s, transform .3s;
}
.rl-letter[data-active="true"] .rl-badge { opacity: 1; transform: scale(1) translateY(0); }
.rl-rec {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 9999px; background: #fff;
  border: 1px solid #C6E8E3; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.rl-rec-ping {
  position: absolute; inset: 0; border-radius: 9999px; background: #14B8A6;
  opacity: .4; animation: rl-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
.rl-rec-dot { position: relative; width: 7px; height: 7px; border-radius: 9999px; background: #0F2E2B; }
.rl-wave {
  display: flex; align-items: flex-end; gap: 2px; height: 14px; padding: 0 4px;
  border-radius: 9999px; background: rgba(255,255,255,.8); border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rl-wave i {
  display: block; width: 2px; border-radius: 9999px; background: #0F2E2B;
  animation: rl-wave .9s ease-in-out infinite;
}
.rl-wave i.rl-soft { background: rgba(15,46,43,.6); }

@keyframes rl-wave { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.2); } }
@keyframes rl-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes rl-pop { 0% { transform: scale(.96); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ── القلم وأثر الحبر (فوق كل شيء، لا يلتقط أي نقرة) ─────────── */
.rl-pen {
  position: fixed; top: 0; left: 0; z-index: 2147483000;
  pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity .2s;
}
.rl-pen[data-on="1"] { opacity: 1; }
.rl-pen-in { position: relative; width: 28px; height: 28px; }
.rl-pen svg { position: absolute; top: -68px; left: 6px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.rl-pen-tip {
  position: absolute; top: 22px; left: 11px; width: 3px; height: 3px;
  border-radius: 9999px; background: #1F2937; box-shadow: 0 0 6px rgba(0,0,0,.4);
}
.rl-ink { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; }
/* القلم يحلّ محلّ مؤشّر الفأرة في كل مكان (طلب المالك) — على اللمس لا مؤشّر أصلاً */
/* بند و٥: يُحصَر بالأجهزة ذاتِ المؤشّرِ الدقيق. */
@media (hover: hover) and (pointer: fine) {
  html.rl-pen-on, html.rl-pen-on body, html.rl-pen-on * { cursor: none !important; }
}

/* ── الجوّال: نفس مقاس النموذج الأصلي ────────────────────────── */
@media (max-width: 640px) { .rl-glyph { font-size: 56px !important; } }

/* ── الطباعة: الخلفية والقلم زخرفةٌ لا تُطبَع ─────────────────── */
@media print { .rl-bg, .rl-pen, .rl-ink { display: none !important; } }

/* ── من يطلب تقليل الحركة: خلفيةٌ ساكنة بلا قلمٍ ولا حبر ─────── */
@media (prefers-reduced-motion: reduce) {
  .rl-letter, .rl-badge, .rl-trace text { transition: none; }
  .rl-rec-ping, .rl-wave i, .rl-letter[data-active="true"] .rl-glyph { animation: none; }
}

/* الأسطح: بلا هذه القواعد تبقى الخلفية محجوبةً خلف أسطحٍ بيضاء صمّاء،
   والمطلوب أن تُرى **خلف النصوص والكروت**. نُذيب الأسطح العريضة وحدها
   (الجسم، الأشرطة، التذييل) ونترك الكروت لمحرّر المالك فيبقى النص مقروءاً. */
body.has-letters-bg { background: transparent !important; }
body.has-letters-bg #features,
body.has-letters-bg #packages,
body.has-letters-bg section.border-y,
body.has-letters-bg footer#contact {
  background-color: rgba(255,255,255,.66) !important;
  background-image: none !important;
}

/* الأقسام العريضة التي تحمل «خلفية قسم» من محرّر المالك
   (‎index_hero‎ و‎index_how_section‎ و‎index_trust‎) تأخذ من
   ‎page-theme-cards.js‎ ضبابيةَ خلفية ‎backdrop-filter:blur(8px)‎ — وهي
   تُشوّش كلَّ ما خلفها، فتظهر الحروف تحتها كضبابٍ رماديّ لا كحروف
   (بلاغ المالك: «فيه طبقة فوقها… ما تطلع واضحة»). نُلغيها في الصفحات
   التي تحمل خلفية الحروف وحدها؛ كروتُ الصفحة تحتفظ بضبابيّتها كما هي. */
body.has-letters-bg .home-hero-section[data-cms-card-bg-key],
body.has-letters-bg #how[data-cms-card-bg-key],
body.has-letters-bg section.border-y[data-cms-card-bg-key] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* وخلفيةُ الكرت البيضاء الافتراضية على مستوى القسم كامل تحجب الحروف */
body.has-letters-bg .home-hero-section[data-cms-card-bg-key],
body.has-letters-bg #how[data-cms-card-bg-key] {
  /* بند ل٣: كانت شفّافةً تماماً فيجلس العنوانُ على الحروف بلا حماية. */
  background-color: rgba(255,255,255,.42) !important;
}
/* بند و١: كان ‎display:none‎ — وهو يُخفي الحروفَ وحدَها (القلمُ ولوحُ الحبر
   إخوةٌ لها على body لا أبناء) فيبقى القلمُ فوق صفحةٍ بلا حرف. وصورةُ المالك
   عند ‎-2‎ والحروفُ عند ‎-1‎ فهي فوقها أصلاً. نتنحّى عن الخلفيةِ لا الطبقة. */
body.has-page-background .rl-bg { background: none; }
body.has-page-background .rl-blob,
body.has-page-background .rl-rules,
body.has-page-background .rl-vignette { display: none; }
/* فوق صورةٍ مجهولةٍ: حرفٌ أبيضُ بظلٍّ داكن. */
body.has-page-background .rl-glyph {
  -webkit-text-stroke-color: rgba(255,255,255,.62);
  -webkit-text-stroke-width: 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
body.has-page-background .rl-letter[data-active="true"] .rl-glyph {
  color: rgba(255,255,255,.28);
  -webkit-text-stroke-color: rgba(255,255,255,.85);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
body.has-page-background .rl-letter[data-active="true"] .rl-trace text { stroke: rgba(255,255,255,.8); }