/* ===========================================================
   سماءُ الخلفية — كونٌ حيٌّ خلف الموقع كلّه
   ملفٌّ مولَّد آليًّا: node tools/build-sky.mjs — لا يُحرَّر يدويًّا.

   أربع طبقات مثبّتة خلف المحتوى (z-index سالب فلا تعلو نصًّا):
     html::before   مجرّتان حلزونيتان — أبعد ما يكون، وأبطؤه انسياقًا
     html::after    نجومٌ بعيدة دقيقة (بلاطة 420px)
     body::before   سُدُمٌ لونية تتنفّس
     body::after    نجومٌ قريبة (بلاطة 760px) — أسرعها انسياقًا
     .sky-meteors   شهبٌ تعبر الشاشة قُطريًّا (عنصرٌ يُحقن من app.js)

   ثلاث حركات مجتمعة:
   ١. انسياقٌ دائم: كل طبقةٍ تنزلق قُطريًّا بمقدار بلاطةٍ كاملة في الدورة،
      فتعود إلى موضعها تمامًا ولا يبين للحركة أوّلٌ ولا آخر.
   ٢. اختلاف المنظر مع التقدّم في الآيات: JS يضبط ‎--sky-y‎ من موضع
      القراءة، وتتحرّك كل طبقة بنسبةٍ مختلفة فيبدو للسماء عمق.
   ٣. تفاعلٌ مع التلاوة: عند التشغيل يُوسَم ‎<html data-listening="on">‎
      فيسرع تلألؤ النجوم ويتّسع مداه وتنبض السُّدُم مع الصوت.

   كلّها SVG مضمّن — لا صورة خارجية ولا طلب شبكة.
   وفي الوضع الفاتح تنقلب النجوم نقاطًا داكنة كخريطةٍ فلكية مطبوعة
   على ورق، فتبقى هوية «الورق» ولا يضيع وضوح النص.

   الحركة كلّها ‎transform‎ و‎opacity‎ فقط — تُنفَّذ على المُركِّب
   (compositor) فلا تُعيد تخطيط الصفحة ولا ترسمها من جديد.
   =========================================================== */

html::before,
html::after,
body::before,
body::after {
  content: "";
  position: fixed;
  /* أوسع من الشاشة قليلًا حتى لا تنكشف حافةٌ أثناء الانسياق */
  inset: -8vmax;
  pointer-events: none;
  will-change: transform;
}

/* ---------- المجرّات ---------- */
html::before {
  z-index: -4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='k' cx='50%' cy='50%'%3E%3Cstop offset='0' stop-color='%236b5bd6' stop-opacity='.95'/%3E%3Cstop offset='.22' stop-color='%236b5bd6' stop-opacity='.45'/%3E%3Cstop offset='.55' stop-color='%234a72c8' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%234a72c8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='50%' cy='50%'%3E%3Cstop offset='.45' stop-color='%238a6ec9' stop-opacity='0'/%3E%3Cstop offset='.78' stop-color='%238a6ec9' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%238a6ec9' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='s' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate(-24 200 200)'%3E%3Cellipse cx='200' cy='200' rx='190' ry='120' fill='url(%23h)'/%3E%3Cg filter='url(%23b)' fill='none' stroke-linecap='round'%3E%3Cpath d='M200 96c62 0 112 47 112 104s-50 104-112 104' stroke='%234a72c8' stroke-opacity='.30' stroke-width='19'/%3E%3Cpath d='M200 304c-62 0-112-47-112-104S138 96 200 96' stroke='%234a72c8' stroke-opacity='.26' stroke-width='19'/%3E%3Cpath d='M200 130c44 0 80 32 80 70s-36 70-80 70' stroke='%238a6ec9' stroke-opacity='.32' stroke-width='14'/%3E%3Cpath d='M200 270c-44 0-80-32-80-70s36-70 80-70' stroke='%238a6ec9' stroke-opacity='.28' stroke-width='14'/%3E%3C/g%3E%3Cg filter='url(%23s)' fill='none' stroke='%23c08a4a' stroke-opacity='.22' stroke-width='3'%3E%3Cpath d='M200 112c56 0 100 40 100 88'/%3E%3Cpath d='M200 288c-56 0-100-40-100-88'/%3E%3C/g%3E%3Cellipse cx='200' cy='200' rx='104' ry='72' fill='url(%23k)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='k' cx='50%' cy='50%'%3E%3Cstop offset='0' stop-color='%236b5bd6' stop-opacity='.95'/%3E%3Cstop offset='.22' stop-color='%236b5bd6' stop-opacity='.45'/%3E%3Cstop offset='.55' stop-color='%234a72c8' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%234a72c8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='50%' cy='50%'%3E%3Cstop offset='.45' stop-color='%238a6ec9' stop-opacity='0'/%3E%3Cstop offset='.78' stop-color='%238a6ec9' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%238a6ec9' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='s' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate(-24 200 200)'%3E%3Cellipse cx='200' cy='200' rx='190' ry='120' fill='url(%23h)'/%3E%3Cg filter='url(%23b)' fill='none' stroke-linecap='round'%3E%3Cpath d='M200 96c62 0 112 47 112 104s-50 104-112 104' stroke='%234a72c8' stroke-opacity='.30' stroke-width='19'/%3E%3Cpath d='M200 304c-62 0-112-47-112-104S138 96 200 96' stroke='%234a72c8' stroke-opacity='.26' stroke-width='19'/%3E%3Cpath d='M200 130c44 0 80 32 80 70s-36 70-80 70' stroke='%238a6ec9' stroke-opacity='.32' stroke-width='14'/%3E%3Cpath d='M200 270c-44 0-80-32-80-70s36-70 80-70' stroke='%238a6ec9' stroke-opacity='.28' stroke-width='14'/%3E%3C/g%3E%3Cg filter='url(%23s)' fill='none' stroke='%23c08a4a' stroke-opacity='.22' stroke-width='3'%3E%3Cpath d='M200 112c56 0 100 40 100 88'/%3E%3Cpath d='M200 288c-56 0-100-40-100-88'/%3E%3C/g%3E%3Cellipse cx='200' cy='200' rx='104' ry='72' fill='url(%23k)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 106% -10%, -18% 112%;
  background-size: clamp(30rem, 62vw, 54rem) auto, clamp(22rem, 44vw, 38rem) auto;
  opacity: .22;
  translate: 0 calc(var(--sky-y, 0) * .012 * 1px);
  animation: sky-galaxy 300s ease-in-out infinite alternate;
  transition: opacity .3s ease;
}
html[data-dark]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='k' cx='50%' cy='50%'%3E%3Cstop offset='0' stop-color='%23fff6e2' stop-opacity='.95'/%3E%3Cstop offset='.22' stop-color='%23fff6e2' stop-opacity='.45'/%3E%3Cstop offset='.55' stop-color='%237aa8ff' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%237aa8ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='50%' cy='50%'%3E%3Cstop offset='.45' stop-color='%23b98cff' stop-opacity='0'/%3E%3Cstop offset='.78' stop-color='%23b98cff' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23b98cff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='s' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate(-24 200 200)'%3E%3Cellipse cx='200' cy='200' rx='190' ry='120' fill='url(%23h)'/%3E%3Cg filter='url(%23b)' fill='none' stroke-linecap='round'%3E%3Cpath d='M200 96c62 0 112 47 112 104s-50 104-112 104' stroke='%237aa8ff' stroke-opacity='.30' stroke-width='19'/%3E%3Cpath d='M200 304c-62 0-112-47-112-104S138 96 200 96' stroke='%237aa8ff' stroke-opacity='.26' stroke-width='19'/%3E%3Cpath d='M200 130c44 0 80 32 80 70s-36 70-80 70' stroke='%23b98cff' stroke-opacity='.32' stroke-width='14'/%3E%3Cpath d='M200 270c-44 0-80-32-80-70s36-70 80-70' stroke='%23b98cff' stroke-opacity='.28' stroke-width='14'/%3E%3C/g%3E%3Cg filter='url(%23s)' fill='none' stroke='%23ffd6a5' stroke-opacity='.22' stroke-width='3'%3E%3Cpath d='M200 112c56 0 100 40 100 88'/%3E%3Cpath d='M200 288c-56 0-100-40-100-88'/%3E%3C/g%3E%3Cellipse cx='200' cy='200' rx='104' ry='72' fill='url(%23k)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='k' cx='50%' cy='50%'%3E%3Cstop offset='0' stop-color='%23fff6e2' stop-opacity='.95'/%3E%3Cstop offset='.22' stop-color='%23fff6e2' stop-opacity='.45'/%3E%3Cstop offset='.55' stop-color='%237aa8ff' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%237aa8ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='50%' cy='50%'%3E%3Cstop offset='.45' stop-color='%23b98cff' stop-opacity='0'/%3E%3Cstop offset='.78' stop-color='%23b98cff' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23b98cff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cfilter id='s' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate(-24 200 200)'%3E%3Cellipse cx='200' cy='200' rx='190' ry='120' fill='url(%23h)'/%3E%3Cg filter='url(%23b)' fill='none' stroke-linecap='round'%3E%3Cpath d='M200 96c62 0 112 47 112 104s-50 104-112 104' stroke='%237aa8ff' stroke-opacity='.30' stroke-width='19'/%3E%3Cpath d='M200 304c-62 0-112-47-112-104S138 96 200 96' stroke='%237aa8ff' stroke-opacity='.26' stroke-width='19'/%3E%3Cpath d='M200 130c44 0 80 32 80 70s-36 70-80 70' stroke='%23b98cff' stroke-opacity='.32' stroke-width='14'/%3E%3Cpath d='M200 270c-44 0-80-32-80-70s36-70 80-70' stroke='%23b98cff' stroke-opacity='.28' stroke-width='14'/%3E%3C/g%3E%3Cg filter='url(%23s)' fill='none' stroke='%23ffd6a5' stroke-opacity='.22' stroke-width='3'%3E%3Cpath d='M200 112c56 0 100 40 100 88'/%3E%3Cpath d='M200 288c-56 0-100-40-100-88'/%3E%3C/g%3E%3Cellipse cx='200' cy='200' rx='104' ry='72' fill='url(%23k)'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}

/* ---------- النجوم البعيدة ---------- */
html::after {
  z-index: -3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%233d4666'%3E%3Ccircle cx='255.2' cy='102.0' r='1.38' opacity='0.84'/%3E%3Ccircle cx='238.1' cy='311.1' r='0.36' opacity='0.41'/%3E%3Ccircle cx='124.6' cy='243.7' r='0.55' opacity='0.26'/%3E%3Ccircle cx='50.9' cy='329.1' r='0.65' opacity='0.35'/%3E%3Ccircle cx='29.8' cy='35.1' r='1.06' opacity='0.60'/%3E%3Ccircle cx='59.4' cy='383.1' r='0.44' opacity='0.66'/%3E%3Ccircle cx='135.1' cy='92.4' r='0.65' opacity='0.59'/%3E%3Ccircle cx='296.2' cy='359.3' r='0.36' opacity='0.49'/%3E%3Ccircle cx='166.8' cy='45.0' r='0.47' opacity='0.72'/%3E%3Ccircle cx='334.9' cy='96.6' r='0.38' opacity='0.37'/%3E%3Ccircle cx='7.2' cy='196.1' r='0.66' opacity='0.25'/%3E%3Ccircle cx='81.7' cy='152.4' r='0.50' opacity='0.24'/%3E%3Ccircle cx='158.6' cy='108.9' r='0.70' opacity='0.32'/%3E%3Ccircle cx='266.2' cy='88.9' r='0.49' opacity='0.28'/%3E%3Ccircle cx='57.5' cy='221.7' r='0.72' opacity='0.33'/%3E%3Ccircle cx='334.0' cy='109.9' r='0.86' opacity='0.51'/%3E%3Ccircle cx='231.6' cy='359.9' r='0.52' opacity='0.21'/%3E%3Ccircle cx='368.2' cy='206.8' r='0.54' opacity='0.20'/%3E%3Ccircle cx='410.9' cy='70.3' r='0.94' opacity='0.56'/%3E%3Ccircle cx='313.7' cy='84.3' r='1.07' opacity='0.44'/%3E%3Ccircle cx='366.8' cy='98.7' r='0.52' opacity='0.39'/%3E%3Ccircle cx='26.2' cy='323.8' r='0.87' opacity='0.19'/%3E%3Ccircle cx='308.3' cy='261.9' r='0.50' opacity='0.27'/%3E%3Ccircle cx='18.2' cy='278.9' r='0.74' opacity='0.61'/%3E%3Ccircle cx='178.1' cy='372.3' r='0.93' opacity='0.24'/%3E%3Ccircle cx='143.5' cy='315.8' r='0.85' opacity='0.33'/%3E%3Ccircle cx='316.6' cy='148.4' r='1.01' opacity='0.21'/%3E%3Ccircle cx='207.8' cy='346.7' r='0.37' opacity='0.30'/%3E%3Ccircle cx='291.9' cy='23.1' r='0.44' opacity='0.36'/%3E%3Ccircle cx='106.3' cy='352.5' r='0.62' opacity='0.31'/%3E%3Ccircle cx='307.1' cy='185.3' r='1.04' opacity='0.55'/%3E%3Ccircle cx='356.6' cy='106.3' r='1.00' opacity='0.40'/%3E%3Ccircle cx='268.9' cy='277.4' r='0.99' opacity='0.72'/%3E%3Ccircle cx='202.3' cy='352.6' r='1.03' opacity='0.63'/%3E%3Ccircle cx='179.6' cy='53.2' r='0.95' opacity='0.29'/%3E%3Ccircle cx='123.7' cy='111.4' r='0.44' opacity='0.63'/%3E%3Ccircle cx='240.2' cy='215.5' r='0.75' opacity='0.36'/%3E%3Ccircle cx='160.9' cy='405.3' r='1.07' opacity='0.69'/%3E%3Ccircle cx='72.9' cy='62.3' r='0.57' opacity='0.67'/%3E%3Ccircle cx='283.8' cy='389.5' r='0.90' opacity='0.36'/%3E%3Ccircle cx='299.9' cy='261.1' r='0.65' opacity='0.61'/%3E%3Ccircle cx='303.0' cy='244.8' r='0.39' opacity='0.20'/%3E%3Ccircle cx='196.9' cy='352.5' r='0.97' opacity='0.52'/%3E%3Ccircle cx='106.7' cy='380.6' r='1.00' opacity='0.54'/%3E%3Ccircle cx='38.6' cy='269.3' r='0.65' opacity='0.53'/%3E%3Ccircle cx='225.4' cy='229.0' r='0.49' opacity='0.63'/%3E%3Ccircle cx='17.8' cy='53.1' r='0.52' opacity='0.65'/%3E%3Ccircle cx='411.5' cy='36.5' r='0.92' opacity='0.45'/%3E%3Ccircle cx='334.6' cy='328.6' r='0.78' opacity='0.61'/%3E%3Ccircle cx='129.8' cy='221.3' r='0.46' opacity='0.44'/%3E%3Ccircle cx='81.8' cy='44.4' r='1.10' opacity='0.42'/%3E%3Ccircle cx='345.8' cy='213.5' r='0.94' opacity='0.31'/%3E%3Ccircle cx='341.4' cy='316.2' r='0.40' opacity='0.31'/%3E%3Ccircle cx='148.8' cy='358.5' r='0.37' opacity='0.42'/%3E%3Ccircle cx='410.7' cy='258.1' r='0.89' opacity='0.53'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px;
  opacity: var(--far-dim);
  --far-dim: .22;
  --far-lit: .34;
  translate: 0 calc(var(--sky-y, 0) * .03 * 1px);
  animation:
    sky-drift-far 260s linear infinite,
    sky-twinkle-far 11s ease-in-out infinite alternate;
}
html[data-dark]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%23cfe0ff'%3E%3Ccircle cx='255.2' cy='102.0' r='1.38' opacity='0.84'/%3E%3Ccircle cx='238.1' cy='311.1' r='0.36' opacity='0.41'/%3E%3Ccircle cx='124.6' cy='243.7' r='0.55' opacity='0.26'/%3E%3Ccircle cx='50.9' cy='329.1' r='0.65' opacity='0.35'/%3E%3Ccircle cx='29.8' cy='35.1' r='1.06' opacity='0.60'/%3E%3Ccircle cx='59.4' cy='383.1' r='0.44' opacity='0.66'/%3E%3Ccircle cx='135.1' cy='92.4' r='0.65' opacity='0.59'/%3E%3Ccircle cx='296.2' cy='359.3' r='0.36' opacity='0.49'/%3E%3Ccircle cx='166.8' cy='45.0' r='0.47' opacity='0.72'/%3E%3Ccircle cx='334.9' cy='96.6' r='0.38' opacity='0.37'/%3E%3Ccircle cx='7.2' cy='196.1' r='0.66' opacity='0.25'/%3E%3Ccircle cx='81.7' cy='152.4' r='0.50' opacity='0.24'/%3E%3Ccircle cx='158.6' cy='108.9' r='0.70' opacity='0.32'/%3E%3Ccircle cx='266.2' cy='88.9' r='0.49' opacity='0.28'/%3E%3Ccircle cx='57.5' cy='221.7' r='0.72' opacity='0.33'/%3E%3Ccircle cx='334.0' cy='109.9' r='0.86' opacity='0.51'/%3E%3Ccircle cx='231.6' cy='359.9' r='0.52' opacity='0.21'/%3E%3Ccircle cx='368.2' cy='206.8' r='0.54' opacity='0.20'/%3E%3Ccircle cx='410.9' cy='70.3' r='0.94' opacity='0.56'/%3E%3Ccircle cx='313.7' cy='84.3' r='1.07' opacity='0.44'/%3E%3Ccircle cx='366.8' cy='98.7' r='0.52' opacity='0.39'/%3E%3Ccircle cx='26.2' cy='323.8' r='0.87' opacity='0.19'/%3E%3Ccircle cx='308.3' cy='261.9' r='0.50' opacity='0.27'/%3E%3Ccircle cx='18.2' cy='278.9' r='0.74' opacity='0.61'/%3E%3Ccircle cx='178.1' cy='372.3' r='0.93' opacity='0.24'/%3E%3Ccircle cx='143.5' cy='315.8' r='0.85' opacity='0.33'/%3E%3Ccircle cx='316.6' cy='148.4' r='1.01' opacity='0.21'/%3E%3Ccircle cx='207.8' cy='346.7' r='0.37' opacity='0.30'/%3E%3Ccircle cx='291.9' cy='23.1' r='0.44' opacity='0.36'/%3E%3Ccircle cx='106.3' cy='352.5' r='0.62' opacity='0.31'/%3E%3Ccircle cx='307.1' cy='185.3' r='1.04' opacity='0.55'/%3E%3Ccircle cx='356.6' cy='106.3' r='1.00' opacity='0.40'/%3E%3Ccircle cx='268.9' cy='277.4' r='0.99' opacity='0.72'/%3E%3Ccircle cx='202.3' cy='352.6' r='1.03' opacity='0.63'/%3E%3Ccircle cx='179.6' cy='53.2' r='0.95' opacity='0.29'/%3E%3Ccircle cx='123.7' cy='111.4' r='0.44' opacity='0.63'/%3E%3Ccircle cx='240.2' cy='215.5' r='0.75' opacity='0.36'/%3E%3Ccircle cx='160.9' cy='405.3' r='1.07' opacity='0.69'/%3E%3Ccircle cx='72.9' cy='62.3' r='0.57' opacity='0.67'/%3E%3Ccircle cx='283.8' cy='389.5' r='0.90' opacity='0.36'/%3E%3Ccircle cx='299.9' cy='261.1' r='0.65' opacity='0.61'/%3E%3Ccircle cx='303.0' cy='244.8' r='0.39' opacity='0.20'/%3E%3Ccircle cx='196.9' cy='352.5' r='0.97' opacity='0.52'/%3E%3Ccircle cx='106.7' cy='380.6' r='1.00' opacity='0.54'/%3E%3Ccircle cx='38.6' cy='269.3' r='0.65' opacity='0.53'/%3E%3Ccircle cx='225.4' cy='229.0' r='0.49' opacity='0.63'/%3E%3Ccircle cx='17.8' cy='53.1' r='0.52' opacity='0.65'/%3E%3Ccircle cx='411.5' cy='36.5' r='0.92' opacity='0.45'/%3E%3Ccircle cx='334.6' cy='328.6' r='0.78' opacity='0.61'/%3E%3Ccircle cx='129.8' cy='221.3' r='0.46' opacity='0.44'/%3E%3Ccircle cx='81.8' cy='44.4' r='1.10' opacity='0.42'/%3E%3Ccircle cx='345.8' cy='213.5' r='0.94' opacity='0.31'/%3E%3Ccircle cx='341.4' cy='316.2' r='0.40' opacity='0.31'/%3E%3Ccircle cx='148.8' cy='358.5' r='0.37' opacity='0.42'/%3E%3Ccircle cx='410.7' cy='258.1' r='0.89' opacity='0.53'/%3E%3C/g%3E%3C/svg%3E");
  --far-dim: .55;
  --far-lit: .8;
}

/* ---------- السُّدُم ---------- */
body::before {
  z-index: -2;
  background:
    radial-gradient(42rem 30rem at 84% -8%, hsl(var(--hue) 62% 56% / .07), transparent 64%),
    radial-gradient(34rem 26rem at 6% 16%,  hsl(266 62% 58% / .05),        transparent 66%),
    radial-gradient(38rem 28rem at 98% 64%, hsl(198 70% 55% / .045),       transparent 66%),
    radial-gradient(30rem 24rem at 18% 92%, hsl(332 56% 60% / .04),        transparent 66%);
  translate: 0 calc(var(--sky-y, 0) * .02 * 1px);
  animation: sky-nebula 38s ease-in-out infinite alternate;
}
html[data-dark] body::before {
  background:
    radial-gradient(42rem 30rem at 84% -8%, hsl(var(--hue) 64% 48% / .17), transparent 64%),
    radial-gradient(34rem 26rem at 6% 16%,  hsl(266 66% 52% / .15),        transparent 66%),
    radial-gradient(38rem 28rem at 98% 64%, hsl(198 72% 48% / .13),        transparent 66%),
    radial-gradient(30rem 24rem at 18% 92%, hsl(332 58% 52% / .11),        transparent 66%);
}

/* ---------- النجوم القريبة ---------- */
body::after {
  z-index: -1;
  --near-dim: .3;
  --near-lit: .44;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Cg fill='%232b3348'%3E%3Ccircle cx='101.3' cy='437.6' r='1.23' opacity='0.73'/%3E%3Ccircle cx='559.9' cy='337.4' r='1.32' opacity='0.48'/%3E%3Ccircle cx='416.3' cy='673.1' r='0.36' opacity='0.54'/%3E%3Ccircle cx='315.9' cy='736.7' r='0.94' opacity='0.24'/%3E%3Ccircle cx='270.9' cy='580.6' r='0.67' opacity='0.71'/%3E%3Ccircle cx='199.0' cy='36.0' r='0.46' opacity='0.51'/%3E%3Ccircle cx='435.5' cy='599.1' r='0.72' opacity='0.64'/%3E%3Ccircle cx='50.7' cy='332.9' r='0.46' opacity='0.68'/%3E%3Ccircle cx='378.7' cy='742.4' r='0.38' opacity='0.44'/%3E%3Ccircle cx='182.1' cy='653.8' r='0.85' opacity='0.37'/%3E%3Ccircle cx='519.8' cy='309.8' r='0.71' opacity='0.18'/%3E%3Ccircle cx='513.0' cy='408.8' r='0.41' opacity='0.33'/%3E%3Ccircle cx='218.0' cy='438.3' r='0.85' opacity='0.45'/%3E%3Ccircle cx='636.8' cy='427.7' r='1.47' opacity='0.23'/%3E%3Ccircle cx='148.3' cy='64.4' r='1.47' opacity='0.82'/%3E%3Ccircle cx='718.6' cy='235.3' r='0.98' opacity='0.44'/%3E%3Ccircle cx='195.6' cy='64.3' r='1.19' opacity='0.60'/%3E%3Ccircle cx='722.7' cy='96.5' r='0.80' opacity='0.70'/%3E%3Ccircle cx='351.5' cy='444.6' r='1.32' opacity='0.41'/%3E%3Ccircle cx='157.5' cy='718.5' r='0.91' opacity='0.60'/%3E%3Ccircle cx='625.7' cy='228.7' r='1.33' opacity='0.70'/%3E%3Ccircle cx='546.4' cy='675.4' r='0.62' opacity='0.70'/%3E%3Ccircle cx='272.0' cy='587.7' r='1.13' opacity='0.46'/%3E%3Ccircle cx='40.3' cy='411.0' r='0.65' opacity='0.25'/%3E%3Ccircle cx='544.5' cy='15.5' r='1.33' opacity='0.49'/%3E%3Ccircle cx='304.1' cy='510.6' r='0.54' opacity='0.46'/%3E%3Ccircle cx='66.1' cy='319.5' r='0.42' opacity='0.23'/%3E%3Ccircle cx='692.0' cy='92.8' r='1.11' opacity='0.56'/%3E%3Ccircle cx='266.4' cy='662.8' r='1.36' opacity='0.79'/%3E%3Ccircle cx='506.7' cy='546.1' r='1.06' opacity='0.33'/%3E%3Ccircle cx='361.8' cy='234.1' r='0.92' opacity='0.32'/%3E%3Ccircle cx='244.2' cy='43.5' r='1.23' opacity='0.72'/%3E%3Ccircle cx='524.4' cy='306.8' r='0.66' opacity='0.68'/%3E%3Ccircle cx='105.9' cy='624.2' r='0.98' opacity='0.29'/%3E%3Ccircle cx='98.1' cy='748.8' r='0.54' opacity='0.42'/%3E%3Ccircle cx='359.1' cy='361.8' r='1.29' opacity='0.44'/%3E%3Ccircle cx='60.1' cy='427.0' r='1.29' opacity='0.36'/%3E%3Ccircle cx='287.6' cy='516.3' r='0.46' opacity='0.24'/%3E%3Ccircle cx='165.0' cy='141.0' r='1.29' opacity='0.32'/%3E%3Ccircle cx='492.4' cy='136.6' r='0.50' opacity='0.18'/%3E%3Ccircle cx='202.2' cy='299.6' r='1.03' opacity='0.31'/%3E%3Ccircle cx='222.7' cy='547.2' r='1.01' opacity='0.70'/%3E%3Ccircle cx='106.4' cy='29.7' r='1.55' opacity='0.98'/%3E%3Ccircle cx='589.0' cy='271.3' r='0.83' opacity='0.56'/%3E%3Ccircle cx='157.2' cy='0.1' r='0.55' opacity='0.30'/%3E%3Ccircle cx='238.7' cy='56.2' r='1.00' opacity='0.42'/%3E%3Ccircle cx='348.2' cy='208.0' r='1.41' opacity='0.19'/%3E%3Ccircle cx='394.0' cy='167.5' r='1.19' opacity='0.27'/%3E%3Ccircle cx='496.4' cy='292.9' r='0.49' opacity='0.54'/%3E%3Ccircle cx='108.6' cy='507.6' r='1.04' opacity='0.62'/%3E%3Ccircle cx='403.9' cy='543.8' r='1.17' opacity='0.54'/%3E%3Ccircle cx='631.8' cy='36.1' r='1.04' opacity='0.27'/%3E%3Ccircle cx='278.8' cy='306.4' r='1.02' opacity='0.67'/%3E%3Ccircle cx='152.6' cy='630.0' r='0.66' opacity='0.57'/%3E%3Ccircle cx='255.5' cy='176.8' r='1.27' opacity='0.67'/%3E%3Ccircle cx='517.0' cy='363.8' r='1.07' opacity='0.62'/%3E%3Ccircle cx='616.1' cy='404.9' r='1.82' opacity='0.92'/%3E%3Ccircle cx='228.7' cy='206.1' r='0.47' opacity='0.43'/%3E%3Ccircle cx='506.5' cy='737.2' r='1.26' opacity='0.46'/%3E%3Ccircle cx='473.2' cy='509.1' r='1.34' opacity='0.45'/%3E%3Ccircle cx='5.6' cy='15.2' r='0.90' opacity='0.39'/%3E%3Ccircle cx='581.2' cy='432.1' r='1.40' opacity='0.55'/%3E%3Ccircle cx='177.8' cy='454.6' r='0.48' opacity='0.28'/%3E%3Ccircle cx='486.3' cy='693.8' r='0.40' opacity='0.28'/%3E%3Ccircle cx='620.4' cy='107.5' r='1.40' opacity='0.35'/%3E%3Ccircle cx='619.1' cy='19.6' r='1.49' opacity='0.20'/%3E%3Ccircle cx='189.5' cy='137.1' r='1.19' opacity='0.61'/%3E%3Ccircle cx='151.5' cy='674.1' r='0.83' opacity='0.69'/%3E%3Ccircle cx='19.5' cy='392.7' r='0.51' opacity='0.26'/%3E%3Ccircle cx='272.2' cy='339.7' r='0.95' opacity='0.29'/%3E%3Ccircle cx='331.3' cy='164.3' r='1.59' opacity='0.99'/%3E%3Ccircle cx='584.8' cy='306.4' r='0.91' opacity='0.59'/%3E%3Ccircle cx='731.9' cy='736.0' r='1.44' opacity='0.64'/%3E%3Ccircle cx='746.9' cy='57.6' r='0.81' opacity='0.71'/%3E%3Ccircle cx='478.2' cy='562.2' r='1.27' opacity='0.37'/%3E%3Ccircle cx='737.5' cy='88.6' r='0.98' opacity='0.35'/%3E%3Ccircle cx='255.6' cy='23.7' r='0.86' opacity='0.31'/%3E%3Ccircle cx='461.8' cy='650.9' r='1.26' opacity='0.34'/%3E%3Ccircle cx='219.1' cy='96.3' r='1.10' opacity='0.53'/%3E%3Ccircle cx='128.4' cy='83.4' r='1.21' opacity='0.30'/%3E%3Ccircle cx='265.0' cy='370.9' r='1.04' opacity='0.46'/%3E%3Ccircle cx='27.1' cy='422.0' r='0.40' opacity='0.39'/%3E%3Ccircle cx='603.0' cy='306.8' r='0.97' opacity='0.24'/%3E%3Ccircle cx='428.5' cy='716.1' r='1.36' opacity='0.43'/%3E%3Ccircle cx='686.4' cy='316.6' r='1.71' opacity='0.95'/%3E%3Ccircle cx='421.2' cy='489.5' r='0.83' opacity='0.44'/%3E%3Ccircle cx='416.9' cy='268.9' r='1.18' opacity='0.60'/%3E%3Ccircle cx='332.5' cy='235.1' r='1.34' opacity='0.40'/%3E%3Ccircle cx='56.8' cy='302.2' r='1.33' opacity='0.40'/%3E%3Ccircle cx='131.2' cy='89.2' r='1.47' opacity='0.50'/%3E%3Ccircle cx='720.1' cy='538.3' r='1.27' opacity='0.39'/%3E%3Ccircle cx='366.6' cy='600.6' r='1.11' opacity='0.29'/%3E%3Ccircle cx='499.4' cy='379.6' r='1.45' opacity='0.36'/%3E%3Ccircle cx='217.2' cy='289.4' r='1.39' opacity='0.43'/%3E%3Ccircle cx='225.8' cy='672.2' r='0.79' opacity='0.44'/%3E%3Ccircle cx='496.7' cy='252.0' r='0.60' opacity='0.33'/%3E%3Ccircle cx='397.5' cy='298.3' r='0.81' opacity='0.20'/%3E%3Ccircle cx='589.4' cy='484.7' r='1.43' opacity='0.69'/%3E%3Ccircle cx='348.0' cy='287.0' r='1.51' opacity='0.82'/%3E%3Ccircle cx='187.6' cy='551.3' r='0.75' opacity='0.65'/%3E%3Ccircle cx='69.9' cy='490.2' r='1.27' opacity='0.61'/%3E%3Ccircle cx='350.7' cy='392.4' r='1.07' opacity='0.20'/%3E%3Ccircle cx='539.4' cy='357.5' r='0.97' opacity='0.55'/%3E%3Ccircle cx='374.5' cy='408.3' r='0.62' opacity='0.22'/%3E%3Ccircle cx='109.2' cy='342.9' r='0.39' opacity='0.39'/%3E%3Ccircle cx='58.5' cy='393.4' r='0.82' opacity='0.21'/%3E%3Ccircle cx='588.2' cy='532.2' r='1.34' opacity='0.49'/%3E%3Ccircle cx='420.8' cy='30.4' r='0.39' opacity='0.55'/%3E%3Ccircle cx='638.6' cy='1.7' r='0.46' opacity='0.32'/%3E%3Ccircle cx='547.7' cy='617.0' r='1.10' opacity='0.69'/%3E%3Ccircle cx='651.7' cy='315.6' r='0.52' opacity='0.26'/%3E%3Ccircle cx='12.1' cy='221.0' r='1.02' opacity='0.55'/%3E%3Ccircle cx='624.9' cy='413.0' r='1.60' opacity='0.78'/%3E%3Ccircle cx='308.1' cy='497.2' r='1.37' opacity='0.61'/%3E%3Ccircle cx='728.0' cy='527.9' r='1.13' opacity='0.68'/%3E%3Ccircle cx='513.4' cy='607.3' r='0.92' opacity='0.53'/%3E%3Ccircle cx='82.2' cy='251.6' r='0.74' opacity='0.22'/%3E%3Ccircle cx='171.7' cy='382.4' r='0.98' opacity='0.48'/%3E%3Ccircle cx='450.8' cy='153.4' r='0.63' opacity='0.58'/%3E%3Ccircle cx='88.5' cy='541.8' r='1.37' opacity='0.42'/%3E%3Ccircle cx='71.0' cy='202.4' r='0.82' opacity='0.48'/%3E%3Ccircle cx='553.7' cy='667.8' r='0.44' opacity='0.51'/%3E%3Ccircle cx='651.8' cy='25.7' r='0.35' opacity='0.44'/%3E%3Ccircle cx='190.7' cy='438.6' r='0.65' opacity='0.41'/%3E%3Ccircle cx='472.5' cy='415.8' r='0.89' opacity='0.67'/%3E%3Ccircle cx='461.5' cy='513.8' r='0.67' opacity='0.36'/%3E%3Ccircle cx='295.9' cy='668.6' r='1.32' opacity='0.87'/%3E%3Ccircle cx='589.4' cy='380.6' r='0.85' opacity='0.67'/%3E%3Ccircle cx='528.8' cy='432.5' r='1.20' opacity='0.44'/%3E%3Ccircle cx='685.3' cy='46.4' r='1.26' opacity='0.59'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 760px 760px;
  opacity: var(--near-dim);
  translate: 0 calc(var(--sky-y, 0) * .06 * 1px);
  animation:
    sky-drift-near 170s linear infinite,
    sky-twinkle-near 8s ease-in-out infinite alternate;
}
html[data-dark] body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='101.3' cy='437.6' r='1.23' opacity='0.73'/%3E%3Ccircle cx='559.9' cy='337.4' r='1.32' opacity='0.48'/%3E%3Ccircle cx='416.3' cy='673.1' r='0.36' opacity='0.54'/%3E%3Ccircle cx='315.9' cy='736.7' r='0.94' opacity='0.24'/%3E%3Ccircle cx='270.9' cy='580.6' r='0.67' opacity='0.71'/%3E%3Ccircle cx='199.0' cy='36.0' r='0.46' opacity='0.51'/%3E%3Ccircle cx='435.5' cy='599.1' r='0.72' opacity='0.64'/%3E%3Ccircle cx='50.7' cy='332.9' r='0.46' opacity='0.68'/%3E%3Ccircle cx='378.7' cy='742.4' r='0.38' opacity='0.44'/%3E%3Ccircle cx='182.1' cy='653.8' r='0.85' opacity='0.37'/%3E%3Ccircle cx='519.8' cy='309.8' r='0.71' opacity='0.18'/%3E%3Ccircle cx='513.0' cy='408.8' r='0.41' opacity='0.33'/%3E%3Ccircle cx='218.0' cy='438.3' r='0.85' opacity='0.45'/%3E%3Ccircle cx='636.8' cy='427.7' r='1.47' opacity='0.23'/%3E%3Ccircle cx='148.3' cy='64.4' r='1.47' opacity='0.82'/%3E%3Ccircle cx='718.6' cy='235.3' r='0.98' opacity='0.44'/%3E%3Ccircle cx='195.6' cy='64.3' r='1.19' opacity='0.60'/%3E%3Ccircle cx='722.7' cy='96.5' r='0.80' opacity='0.70'/%3E%3Ccircle cx='351.5' cy='444.6' r='1.32' opacity='0.41'/%3E%3Ccircle cx='157.5' cy='718.5' r='0.91' opacity='0.60'/%3E%3Ccircle cx='625.7' cy='228.7' r='1.33' opacity='0.70'/%3E%3Ccircle cx='546.4' cy='675.4' r='0.62' opacity='0.70'/%3E%3Ccircle cx='272.0' cy='587.7' r='1.13' opacity='0.46'/%3E%3Ccircle cx='40.3' cy='411.0' r='0.65' opacity='0.25'/%3E%3Ccircle cx='544.5' cy='15.5' r='1.33' opacity='0.49'/%3E%3Ccircle cx='304.1' cy='510.6' r='0.54' opacity='0.46'/%3E%3Ccircle cx='66.1' cy='319.5' r='0.42' opacity='0.23'/%3E%3Ccircle cx='692.0' cy='92.8' r='1.11' opacity='0.56'/%3E%3Ccircle cx='266.4' cy='662.8' r='1.36' opacity='0.79'/%3E%3Ccircle cx='506.7' cy='546.1' r='1.06' opacity='0.33'/%3E%3Ccircle cx='361.8' cy='234.1' r='0.92' opacity='0.32'/%3E%3Ccircle cx='244.2' cy='43.5' r='1.23' opacity='0.72'/%3E%3Ccircle cx='524.4' cy='306.8' r='0.66' opacity='0.68'/%3E%3Ccircle cx='105.9' cy='624.2' r='0.98' opacity='0.29'/%3E%3Ccircle cx='98.1' cy='748.8' r='0.54' opacity='0.42'/%3E%3Ccircle cx='359.1' cy='361.8' r='1.29' opacity='0.44'/%3E%3Ccircle cx='60.1' cy='427.0' r='1.29' opacity='0.36'/%3E%3Ccircle cx='287.6' cy='516.3' r='0.46' opacity='0.24'/%3E%3Ccircle cx='165.0' cy='141.0' r='1.29' opacity='0.32'/%3E%3Ccircle cx='492.4' cy='136.6' r='0.50' opacity='0.18'/%3E%3Ccircle cx='202.2' cy='299.6' r='1.03' opacity='0.31'/%3E%3Ccircle cx='222.7' cy='547.2' r='1.01' opacity='0.70'/%3E%3Ccircle cx='106.4' cy='29.7' r='1.55' opacity='0.98'/%3E%3Ccircle cx='589.0' cy='271.3' r='0.83' opacity='0.56'/%3E%3Ccircle cx='157.2' cy='0.1' r='0.55' opacity='0.30'/%3E%3Ccircle cx='238.7' cy='56.2' r='1.00' opacity='0.42'/%3E%3Ccircle cx='348.2' cy='208.0' r='1.41' opacity='0.19'/%3E%3Ccircle cx='394.0' cy='167.5' r='1.19' opacity='0.27'/%3E%3Ccircle cx='496.4' cy='292.9' r='0.49' opacity='0.54'/%3E%3Ccircle cx='108.6' cy='507.6' r='1.04' opacity='0.62'/%3E%3Ccircle cx='403.9' cy='543.8' r='1.17' opacity='0.54'/%3E%3Ccircle cx='631.8' cy='36.1' r='1.04' opacity='0.27'/%3E%3Ccircle cx='278.8' cy='306.4' r='1.02' opacity='0.67'/%3E%3Ccircle cx='152.6' cy='630.0' r='0.66' opacity='0.57'/%3E%3Ccircle cx='255.5' cy='176.8' r='1.27' opacity='0.67'/%3E%3Ccircle cx='517.0' cy='363.8' r='1.07' opacity='0.62'/%3E%3Ccircle cx='616.1' cy='404.9' r='1.82' opacity='0.92'/%3E%3Ccircle cx='228.7' cy='206.1' r='0.47' opacity='0.43'/%3E%3Ccircle cx='506.5' cy='737.2' r='1.26' opacity='0.46'/%3E%3Ccircle cx='473.2' cy='509.1' r='1.34' opacity='0.45'/%3E%3Ccircle cx='5.6' cy='15.2' r='0.90' opacity='0.39'/%3E%3Ccircle cx='581.2' cy='432.1' r='1.40' opacity='0.55'/%3E%3Ccircle cx='177.8' cy='454.6' r='0.48' opacity='0.28'/%3E%3Ccircle cx='486.3' cy='693.8' r='0.40' opacity='0.28'/%3E%3Ccircle cx='620.4' cy='107.5' r='1.40' opacity='0.35'/%3E%3Ccircle cx='619.1' cy='19.6' r='1.49' opacity='0.20'/%3E%3Ccircle cx='189.5' cy='137.1' r='1.19' opacity='0.61'/%3E%3Ccircle cx='151.5' cy='674.1' r='0.83' opacity='0.69'/%3E%3Ccircle cx='19.5' cy='392.7' r='0.51' opacity='0.26'/%3E%3Ccircle cx='272.2' cy='339.7' r='0.95' opacity='0.29'/%3E%3Ccircle cx='331.3' cy='164.3' r='1.59' opacity='0.99'/%3E%3Ccircle cx='584.8' cy='306.4' r='0.91' opacity='0.59'/%3E%3Ccircle cx='731.9' cy='736.0' r='1.44' opacity='0.64'/%3E%3Ccircle cx='746.9' cy='57.6' r='0.81' opacity='0.71'/%3E%3Ccircle cx='478.2' cy='562.2' r='1.27' opacity='0.37'/%3E%3Ccircle cx='737.5' cy='88.6' r='0.98' opacity='0.35'/%3E%3Ccircle cx='255.6' cy='23.7' r='0.86' opacity='0.31'/%3E%3Ccircle cx='461.8' cy='650.9' r='1.26' opacity='0.34'/%3E%3Ccircle cx='219.1' cy='96.3' r='1.10' opacity='0.53'/%3E%3Ccircle cx='128.4' cy='83.4' r='1.21' opacity='0.30'/%3E%3Ccircle cx='265.0' cy='370.9' r='1.04' opacity='0.46'/%3E%3Ccircle cx='27.1' cy='422.0' r='0.40' opacity='0.39'/%3E%3Ccircle cx='603.0' cy='306.8' r='0.97' opacity='0.24'/%3E%3Ccircle cx='428.5' cy='716.1' r='1.36' opacity='0.43'/%3E%3Ccircle cx='686.4' cy='316.6' r='1.71' opacity='0.95'/%3E%3Ccircle cx='421.2' cy='489.5' r='0.83' opacity='0.44'/%3E%3Ccircle cx='416.9' cy='268.9' r='1.18' opacity='0.60'/%3E%3Ccircle cx='332.5' cy='235.1' r='1.34' opacity='0.40'/%3E%3Ccircle cx='56.8' cy='302.2' r='1.33' opacity='0.40'/%3E%3Ccircle cx='131.2' cy='89.2' r='1.47' opacity='0.50'/%3E%3Ccircle cx='720.1' cy='538.3' r='1.27' opacity='0.39'/%3E%3Ccircle cx='366.6' cy='600.6' r='1.11' opacity='0.29'/%3E%3Ccircle cx='499.4' cy='379.6' r='1.45' opacity='0.36'/%3E%3Ccircle cx='217.2' cy='289.4' r='1.39' opacity='0.43'/%3E%3Ccircle cx='225.8' cy='672.2' r='0.79' opacity='0.44'/%3E%3Ccircle cx='496.7' cy='252.0' r='0.60' opacity='0.33'/%3E%3Ccircle cx='397.5' cy='298.3' r='0.81' opacity='0.20'/%3E%3Ccircle cx='589.4' cy='484.7' r='1.43' opacity='0.69'/%3E%3Ccircle cx='348.0' cy='287.0' r='1.51' opacity='0.82'/%3E%3Ccircle cx='187.6' cy='551.3' r='0.75' opacity='0.65'/%3E%3Ccircle cx='69.9' cy='490.2' r='1.27' opacity='0.61'/%3E%3Ccircle cx='350.7' cy='392.4' r='1.07' opacity='0.20'/%3E%3Ccircle cx='539.4' cy='357.5' r='0.97' opacity='0.55'/%3E%3Ccircle cx='374.5' cy='408.3' r='0.62' opacity='0.22'/%3E%3Ccircle cx='109.2' cy='342.9' r='0.39' opacity='0.39'/%3E%3Ccircle cx='58.5' cy='393.4' r='0.82' opacity='0.21'/%3E%3Ccircle cx='588.2' cy='532.2' r='1.34' opacity='0.49'/%3E%3Ccircle cx='420.8' cy='30.4' r='0.39' opacity='0.55'/%3E%3Ccircle cx='638.6' cy='1.7' r='0.46' opacity='0.32'/%3E%3Ccircle cx='547.7' cy='617.0' r='1.10' opacity='0.69'/%3E%3Ccircle cx='651.7' cy='315.6' r='0.52' opacity='0.26'/%3E%3Ccircle cx='12.1' cy='221.0' r='1.02' opacity='0.55'/%3E%3Ccircle cx='624.9' cy='413.0' r='1.60' opacity='0.78'/%3E%3Ccircle cx='308.1' cy='497.2' r='1.37' opacity='0.61'/%3E%3Ccircle cx='728.0' cy='527.9' r='1.13' opacity='0.68'/%3E%3Ccircle cx='513.4' cy='607.3' r='0.92' opacity='0.53'/%3E%3Ccircle cx='82.2' cy='251.6' r='0.74' opacity='0.22'/%3E%3Ccircle cx='171.7' cy='382.4' r='0.98' opacity='0.48'/%3E%3Ccircle cx='450.8' cy='153.4' r='0.63' opacity='0.58'/%3E%3Ccircle cx='88.5' cy='541.8' r='1.37' opacity='0.42'/%3E%3Ccircle cx='71.0' cy='202.4' r='0.82' opacity='0.48'/%3E%3Ccircle cx='553.7' cy='667.8' r='0.44' opacity='0.51'/%3E%3Ccircle cx='651.8' cy='25.7' r='0.35' opacity='0.44'/%3E%3Ccircle cx='190.7' cy='438.6' r='0.65' opacity='0.41'/%3E%3Ccircle cx='472.5' cy='415.8' r='0.89' opacity='0.67'/%3E%3Ccircle cx='461.5' cy='513.8' r='0.67' opacity='0.36'/%3E%3Ccircle cx='295.9' cy='668.6' r='1.32' opacity='0.87'/%3E%3Ccircle cx='589.4' cy='380.6' r='0.85' opacity='0.67'/%3E%3Ccircle cx='528.8' cy='432.5' r='1.20' opacity='0.44'/%3E%3Ccircle cx='685.3' cy='46.4' r='1.26' opacity='0.59'/%3E%3C/g%3E%3C/svg%3E");
  --near-dim: .72;
  --near-lit: .95;
}

/* ---------- الانسياق الدائم ----------
   الإزاحة بمقدار بلاطةٍ كاملة في المحورين، فالنقش ينطبق على نفسه
   عند نهاية الدورة ولا يظهر للحركة انقطاع. */
@keyframes sky-drift-near {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(760px, 760px, 0); }
}
@keyframes sky-drift-far {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-420px, 420px, 0); }
}

/* ---------- التلألؤ ---------- */
@keyframes sky-twinkle-near {
  from { opacity: var(--near-dim); }
  to   { opacity: var(--near-lit); }
}
@keyframes sky-twinkle-far {
  from { opacity: var(--far-dim); }
  to   { opacity: var(--far-lit); }
}

/* ---------- تنفّس السُّدُم والمجرّات ---------- */
@keyframes sky-nebula {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.2%, 1.4%, 0) scale(1.06); }
}
@keyframes sky-galaxy {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(6deg) scale(1.08); }
}

/* ===========================================================
   أثناء التلاوة: السماء تستجيب
   =========================================================== */
html[data-listening="on"]::after {
  --far-lit: .62;
  animation:
    sky-drift-far 150s linear infinite,
    sky-twinkle-far 3.6s ease-in-out infinite alternate;
}
html[data-dark][data-listening="on"]::after { --far-lit: .95; }

html[data-listening="on"] body::after {
  --near-lit: .52;
  animation:
    sky-drift-near 95s linear infinite,
    sky-twinkle-near 2.6s ease-in-out infinite alternate;
}
html[data-dark][data-listening="on"] body::after { --near-lit: 1; }

html[data-listening="on"] body::before {
  animation:
    sky-nebula 38s ease-in-out infinite alternate,
    sky-pulse 3.4s ease-in-out infinite;
}
@keyframes sky-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .74; }
}

/* ===========================================================
   الشهب
   خمسة شهبٍ تعبر الشاشة قُطريًّا من أعلى اليمين إلى أسفل اليسار،
   بفواصل ‎1.4s‎ بينها، فيمرّ شهابٌ كل ثانيةٍ ونصف تقريبًا.
   العنصر يُحقن من ‎initSky()‎ في app.js.
   =========================================================== */
.sky-meteors {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  overflow: hidden;
}
.sky-meteors i {
  position: absolute;
  top: var(--t); right: var(--r);
  width: var(--len); height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 0 50%;
  /* الرأس مضيءٌ في مقدّمة المسار والذيل يخفت وراءه */
  background: linear-gradient(to right,
    transparent 0%,
    hsl(196 80% 88% / .55) 62%,
    hsl(48 90% 96% / .95) 92%,
    #fff 100%);
  filter: drop-shadow(0 0 5px hsl(196 90% 82% / .5));
  animation: sky-meteor var(--dur) linear infinite;
  animation-delay: var(--delay);
}
/* في الوضع الفاتح: خيطٌ رفيعٌ خافت كأثرٍ على ورق */
html:not([data-dark]) .sky-meteors i {
  background: linear-gradient(to right,
    transparent 0%,
    hsl(220 30% 45% / .18) 62%,
    hsl(38 55% 42% / .45) 95%,
    hsl(38 60% 38% / .6) 100%);
  filter: none;
  height: 1.5px;
}

.sky-meteors i:nth-child(1) { --t: -6%;  --r: 4%;  --len: 13rem; --dur: 7s;   --delay: 0s; }
.sky-meteors i:nth-child(2) { --t: 2%;   --r: 32%; --len: 9rem;  --dur: 7s;   --delay: 1.4s; }
.sky-meteors i:nth-child(3) { --t: -12%; --r: 56%; --len: 16rem; --dur: 7s;   --delay: 2.8s; }
.sky-meteors i:nth-child(4) { --t: 14%;  --r: 14%; --len: 11rem; --dur: 7s;   --delay: 4.2s; }
.sky-meteors i:nth-child(5) { --t: -3%;  --r: 74%; --len: 8rem;  --dur: 7s;   --delay: 5.6s; }

@keyframes sky-meteor {
  0%   { opacity: 0; transform: rotate(145deg) translate3d(0, 0, 0) scaleX(.15); }
  3%   { opacity: 1; }
  15%  { opacity: 1; }
  19%  { opacity: 0; transform: rotate(145deg) translate3d(62vmax, 0, 0) scaleX(1); }
  100% { opacity: 0; transform: rotate(145deg) translate3d(62vmax, 0, 0) scaleX(1); }
}

/* أثناء التلاوة تتقارب الشهب */
html[data-listening="on"] .sky-meteors i { --dur: 4.4s; }
html[data-listening="on"] .sky-meteors i:nth-child(2) { --delay: .9s; }
html[data-listening="on"] .sky-meteors i:nth-child(3) { --delay: 1.8s; }
html[data-listening="on"] .sky-meteors i:nth-child(4) { --delay: 2.7s; }
html[data-listening="on"] .sky-meteors i:nth-child(5) { --delay: 3.5s; }

/* ===========================================================
   احترام تفضيل تقليل الحركة، والطباعة
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after,
  body::before, body::after {
    animation: none !important;
    translate: none !important;
    will-change: auto;
  }
  .sky-meteors { display: none; }
}

@media print {
  html::before, html::after,
  body::before, body::after,
  .sky-meteors { display: none !important; }
}