/* ============================================================
   قالب «مخمل» (makhmal) — نسخة عامّة من «ثريّا» بدخولية وواجهة أخرى
   (طلب كرار 2026-10-28، من دعوة VIP mstfa-6341): عروسٌ بطرحة طويلة
   تفتح باباً مقوّساً بين ورد أحمر على نور، فتنكشف القاعة بستائرها
   المخملية الحمراء. بقيّة الهوية كثريّا: شامبانيا وذهب وأرضية عاكسة.
   ============================================================ */

:root{
  --umber:#3d2b1d;        /* أعمق ظلّ بطيّات الستارة */
  --mocha:#6d5138;
  --taupe:#a98a6c;
  --sand:#d8c3a5;
  --champ:#ffffff;        /* أرضية الصفحة: بيضاء كبدلة العريس وفستان العروس (طلب كرار) — الأحمر والذهب يحملان اللون */
  --ivory:#faf5eb;
  --gold:#c2994f;
  --gold-hi:#ecd7a2;      /* خيوط الأنوار */
  --gold-ink:#8e692f;     /* ذهب مادّي للحبر — من شريط البشت بالصورة؛ --gold لونُ نورٍ لا حبر (تباينه ١٫٨٩:١) */
  --blush:#d7b0a8;        /* الورد الوردي بالأطراف */
  --ink:#4a3728;
  --ink-soft:#83705c;
  /* نصوص الدخولية (الباب) — متغيّرات كي يبدّلها زبون VIP من «ألوان القالب»
     بلا لمس القالب. */
  --cover-name:#fff7e7;    /* الأسماء على الباب */
  --cover-kicker:#f3e6cd;  /* سطر «دعوة زفاف» */
  --cover-hint:#efe1c8;    /* سطر «المسوا الباب…» */
  --disp:"Aref Ruqaa", serif;
  --serif:"Amiri", serif;
  --body:"Tajawal", system-ui, sans-serif;
  --bars:0px;             /* أشرطة المنصّة السفلية — يقيسها السكربت */
  --stage-h:100svh;       /* ارتفاع الواجهة الفعلي — يقيسه السكربت */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--champ);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100%}
img,video{max-width:100%}

/* ============================================================
   الدخولية — الباب
   ============================================================ */
.cover{
  position:fixed; inset:0; z-index:50;
  /* ملصق الفيديو خلفيةً للباب: بين الضغطة وأول إطار (آيفون لا يحمّل الفيديو قبل اللمسة)
     كان العنصر شفّافاً فوق البنّي الداكن فتومض الشاشة معتمة لجزء من الثانية */
  background:#241a12 url("/templates/makhmal/assets/poster.jpg") center/cover no-repeat;
  cursor:pointer; overflow:hidden;
  transition:opacity 1.15s ease, visibility 1.15s;
}
/* شفّاف حتى يُعرض أول إطار فعلاً (is-live): آيفون يرسم طبقة الفيديو سوداء بين play() وأول
   إطار، وملصق الباب (خلفية .cover) هو الإطار الأول نفسه فلا يُرى انتقال */
.cover__vid{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease;
}
.cover__vid.is-live{opacity:1}
/* حجاب دافئ: يعتم الأطراف ويترك قلب الصورة (الباب) صافياً */
.cover__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(132% 82% at 50% 40%, transparent 32%, rgba(28,18,10,.34) 70%, rgba(18,12,6,.70) 100%),
    linear-gradient(180deg,
      rgba(23,15,8,0) 0%, rgba(23,15,8,0) 34%,
      rgba(23,15,8,.16) 50%, rgba(22,14,8,.28) 68%,
      rgba(20,13,7,.42) 82%, rgba(17,11,6,.54) 92%, rgba(15,10,5,.62) 100%);
}
/* الأسماء بأعلى الغلاف: هناك الباب داكن فتُقرأ بلا أي حاجب. وأسفلُ الكادر
   ذيلُ الدانتيل — يُترك مضاءً، والتلميح يعتمد على ظلّه لا على تعتيم الكادر.
   وتعتيمُ التاج بطبقةٍ تخصّه: الحجاب يبهت عند is-playing فكان يبهت معه. */
.cover__top{
  position:absolute; inset:0 0 auto 0; z-index:3;
  padding:calc(46px + env(safe-area-inset-top)) 22px 0;
  text-align:center;
}
.cover__top::before{
  content:""; position:absolute; inset:0 0 auto 0; z-index:-1;
  height:clamp(190px, 34vh, 320px); pointer-events:none;
  background:linear-gradient(180deg,
    rgba(24,16,9,.60) 0%, rgba(24,16,9,.22) 53%, rgba(24,16,9,.04) 88%, rgba(24,16,9,0) 100%);
}
.cover__kicker{
  margin:0 0 9px;
  font-size:.82rem; font-weight:500; word-spacing:.4em;
  color:var(--cover-kicker);
  text-shadow:0 1px 3px rgba(16,10,4,.9), 0 2px 12px rgba(18,11,5,.75);
}
.cover__rule{
  display:block; width:132px; height:1px; margin:0 auto 14px;
  background:linear-gradient(90deg, transparent, rgba(var(--gold-hi-rgb, 236, 215, 162), 0.7), transparent);
}
.cover__ui{
  position:absolute; inset:auto 0 0 0;
  padding:0 26px calc(52px + var(--bars) + env(safe-area-inset-bottom));
  text-align:center; z-index:2;
  transition:opacity .55s ease, transform .55s ease;
}
.cover__names{
  /* inline-block + nowrap: بلا هذين يلتفّ النص بدل أن يفيض، فلا يقيس
     الحارس شيئاً (scrollWidth لعنصر block لا يتجاوز أباه أبداً). */
  display:inline-block; white-space:nowrap; max-width:100%;
  margin:0; -webkit-text-stroke:.4px rgba(216,178,108,.38);
  font-family:var(--disp); font-weight:700;
  /* ⚠️ لا letter-spacing مع «عرف رقعة» — يُعطّل الروابط الإلزامية فتسقط
     ميم «محمد» (٨٥٫٦ ← ٧١ بكسل: النصّ يضيق لأن حرفاً ذهب). */
  font-size:clamp(2.5rem, 11.4vw, 4.2rem);
  line-height:1.14;
  color:var(--cover-name);
  text-shadow:0 1px 2px rgba(16,10,4,.9), 0 2px 8px rgba(18,11,5,.85), 0 6px 26px rgba(18,11,5,.75), 0 0 40px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.28);
}
/* ⚠️ نصّ فوق فيديو متغيّر السطوع: هالة تتلاشى داخل الصندوق قبل حافته،
   فلا تظهر حوافّ مستطيلة ولا يذوب النص حين يغمر الضوءُ المشهد. */
.cover__hint{
  margin:0 0 26px;
  font-size:.95rem; font-weight:400;
  color:var(--cover-hint);
  text-shadow:0 1px 3px rgba(16,10,4,.95), 0 2px 12px rgba(18,11,5,.9);
  animation:hintPulse 3.4s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.82}50%{opacity:1}}

/* حلقة ضوء نابضة — دعوة للّمس */
/* قنديل صغير متدلٍّ من سلك، يتأرجح ويتنفّس — صدى ثريّات القاعة */
.cover__ring{
  display:block; width:2px; height:64px; margin:0 auto;
  position:relative; transform-origin:50% 0;
  background:linear-gradient(180deg, transparent, rgba(var(--gold-hi-rgb, 236, 215, 162), 0.5) 55%, rgba(var(--gold-hi-rgb, 236, 215, 162), 0.72));
  animation:pendSway 4.6s ease-in-out infinite;
}
.cover__ring b{
  position:absolute; inset:auto 50% -13px 50%;
  width:15px; height:19px; margin-inline-start:-7.5px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 42% 32%, #fffaec 0%, var(--gold-hi) 46%, var(--gold) 100%);
  box-shadow:0 0 16px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.85), 0 0 38px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.45);
  animation:pendGlow 2.8s ease-in-out infinite;
}
@keyframes pendSway{
  0%,100%{transform:rotate(-3.2deg)}
  50%{transform:rotate(3.2deg)}
}
/* ============================================================
   اليافطة المعلّقة — «دعوة» منقوشة على نحاسٍ متعتّق تتدلّى تحت الأسماء
   وتتمايل بإيقاع القنديل نفسه (pendSway) فتُقرأ معلّقةً لا مطبوعة.

   ⚠️ موضعها **داخل** كتلة الأسماء لا بإحداثيّ مطلق: العروس تقف وسط الكادر
   تماماً، وأيّ top محسوب بالنسبة يسقط على رأسها بشاشةٍ ما. بالتدفّق تنزل
   دائماً تحت آخر سطر وفوقها — بلا رقمٍ سحريّ.
   ⚠️ `display:flex` يغلب `[hidden]` بتنسيق المتصفح، فبلا السطر التالي تظهر
   اليافطة لكل زبائن ثريّا. لا تحذفه.
   ============================================================ */
.plaque{
  position:relative; margin:10px auto 0; width:max-content;
  display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 0;
  animation:pendSway 4.6s ease-in-out infinite;
  transition:opacity .55s ease;
}
.plaque[hidden]{display:none}
.plaque__cord{
  display:block; width:1.5px; height:26px;
  background:linear-gradient(180deg, rgba(var(--gold-hi-rgb, 236, 215, 162), 0.2), rgba(var(--gold-hi-rgb, 236, 215, 162), 0.66));
}
.plaque__board{
  display:block; position:relative;
  padding:6px 20px 8px; border-radius:4px;
  background:linear-gradient(157deg, #e8d3a4 0%, #cdae74 40%, #b8934f 72%, #dcc189 100%);
  box-shadow:
    0 5px 14px rgba(12,7,3,.5),
    inset 0 1px 0 rgba(255,248,228,.5),
    inset 0 -1px 0 rgba(78,54,20,.42);
}
/* حافّة داخلية محفورة — تعطيها سماكةً بلا صورة */
.plaque__board::before{
  content:""; position:absolute; inset:2.5px;
  border:1px solid rgba(86,60,22,.3); border-radius:2px; pointer-events:none;
}
.plaque__board b{
  display:block; font-family:var(--disp); font-weight:700;
  font-size:1.06rem; line-height:1.45; color:var(--umber);
  /* نقشٌ غائر: ضوءٌ تحت الحرف وظلٌّ فوقه */
  text-shadow:0 1px 0 rgba(255,246,222,.5), 0 -1px 0 rgba(66,45,16,.25);
}
/* مع انفتاح الباب تنسحب — يافطةٌ معلّقة أمام بابٍ ينفتح تبدو معلّقة بالهواء */
.cover.is-playing .plaque{opacity:0; pointer-events:none}

@keyframes pendGlow{
  0%,100%{box-shadow:0 0 12px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.6), 0 0 26px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.3)}
  50%{box-shadow:0 0 22px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.95), 0 0 52px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.55)}
}

/* أثر اللمسة */
.cover__taps{position:absolute; inset:0; pointer-events:none; z-index:3}
.tapring{
  position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; border:1px solid rgba(246,232,198,.8);
  box-shadow:0 0 14px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.5);
  animation:tapOut 1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes tapOut{to{transform:scale(4.6); opacity:0; border-color:rgba(246,232,198,0)}}

.cover.is-playing{cursor:default}
.cover.is-playing .cover__ui{opacity:0; transform:translateY(12px); pointer-events:none}
/* عند فتح الباب يبهت الحجاب فيغمر ضوءُ الداخل الشاشة */
.cover.is-playing .cover__veil{opacity:.45; transition:opacity 2.6s ease 3.4s}
/* لحظة العبور: الضوء يبتلع الشاشة ثم تظهر الدعوة من داخله — بدل ذوبانٍ
   مزدوج يُقرأ «انتهى مقطع فيديو» لا «دخلتُ من الباب».
   z-index:4 يعلو .cover__top (٣) فيبتلع أسماء الغلاف أيضاً — مقصود:
   تسليمٌ من أسماء الغلاف إلى أسماء الواجهة. */
.cover::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:
    radial-gradient(62% 42% at 54% 32%, #fffdf6 0%, rgba(255,252,242,.97) 40%, rgba(248,239,220,.93) 100%),
    linear-gradient(180deg, #f8efdc, var(--champ));
}
.cover.is-flood::after{opacity:1; transition:opacity 1.15s cubic-bezier(.4,0,.2,1)}
.cover.is-flood .cover__vid{filter:brightness(1.22); transition:filter 1.15s ease}
.cover.is-open{opacity:0; visibility:hidden; pointer-events:none}

/* ============================================================
   الدعوة
   ============================================================ */
.invite{opacity:0; transition:opacity 1s ease; padding-bottom:var(--bars)}
.invite.visible{opacity:1}

/* ذرّات ضوء طافية بالهواء */
.fx{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden}
/* ✦ اللمعان: نقاط ضوء ثابتة تتنفّس مكانها — لا تتساقط.
   على الغلاف تلمع، وداخل الدعوة تلمع وتطفو طفواً خفيفاً. */
.glints, .crystal-dust{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.glints{z-index:2; transition:opacity .5s ease}
.cover.is-playing .glints{opacity:0}
.crystal-dust{position:fixed; z-index:1}
.glints i, .crystal-dust i{
  position:absolute;
  width:var(--spark-size, 3px); height:var(--spark-size, 3px);
  border-radius:50%;
  background:#fff4d2;
  box-shadow:0 0 7px #f0d49c, 0 0 16px rgba(240,212,156,.5);
  animation:glint var(--spark-duration, 3.6s) ease-in-out infinite;
  animation-delay:var(--spark-delay, 0s);
}
.crystal-dust i{animation-name:crystalFloat}
@keyframes glint{
  0%,100%{opacity:.08; transform:scale(.55)}
  50%{opacity:.95; transform:scale(1.4)}
}
@keyframes crystalFloat{
  0%,100%{opacity:.07; transform:translateY(7px) scale(.6)}
  50%{opacity:.72; transform:translateY(-9px) scale(1.18)}
}

/* ===== الواجهة ===== */
/* عمودٌ مرن: كتلة النصّ أعلاه والسطر يُدفع للقاع بـmargin-top:auto.
   الوضع المطلق كان يضعه بمكانٍ ثابت فيتراكب مع النصّ على الشاشات القصيرة
   (٣٢٠×٥٦٨ بنصّ زبونٍ طويل: النصّ ينتهي عند ٣٧٩ والسطر يبدأ عند ٣٥٧).
   بالتدفّق يستحيل التراكب مهما طال النصّ أو قصرت الشاشة. */
.stage{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
/* أطول من الواجهة بـ١٢٪ ومثبّتة بأعلاها: العروسان ينزلان إلى ~٥٢٪ من الشاشة (كانا ~٤٦٪)
   فتبقى الكتابة فوق الستارة لا على الوجوه، وما يُقصّ أسفلها أرضيةٌ وذيلُ فستان */
.stage__photo{
  position:absolute; inset:0 0 auto 0; height:112%;
  background-image:url("/templates/makhmal/assets/hero.webp");
  background-size:cover;
  /* صورة ٩:١٦ مركزها العروسان والستارة فوقهما — تُعرض بمركزها */
  background-position:50% 50%;
  transform:scale(1.02);
  animation:stageDrift 26s ease-in-out infinite alternate;
}
/* صورة القالب مضبوطة على 42% لأن ستائرها بالأعلى. أمّا الصورة المرفوعة فقد
   قصّها الزبون بنفسه ٩:١٦، فتُعرض بمركزها كما اختارها لا كما يناسب صورتنا. */
.stage__photo.is-custom{background-position:50% 50%}
@keyframes stageDrift{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.08) translateY(-10px)}}
/* الصورة ساطعة بأعلاها (ستائر وأنوار) — الحجاب يُنزل السطوع تحت النص فقط */
.stage__veil{
  position:absolute; inset:0;
  /* الحماية تتركّز تحت النصّ لا على الكادر كلّه: اسم القالب من خيوط
     الأنوار، والتعتيم العريض كان ينزل بسطوعها من ١٣٨ إلى ٦٠. */
  background:
    radial-gradient(78% 47% at 50% 16%, rgba(46,29,15,.66) 0%, rgba(46,29,15,.34) 52%, transparent 80%),
    linear-gradient(180deg, rgba(52,34,19,.30) 0%, rgba(52,34,19,.20) 18%, rgba(52,34,19,.10) 32%, rgba(52,34,19,.03) 44%, transparent 56%),
    linear-gradient(0deg, var(--champ) 0%, rgba(var(--champ-rgb, 236, 220, 196), 0.55) 4%, transparent 15%);
}
.stage__inner{
  position:relative; z-index:2;
  width:100%; max-width:560px;
  padding:calc(26px + env(safe-area-inset-top)) 20px 0;
  text-align:center;
}
.stage__kicker{
  display:inline-block;
  margin:0 0 10px;
  font-family:var(--body); font-size:.9rem; font-weight:500;
  word-spacing:.36em; color:#f6ecd8;
  text-shadow:0 1px 3px rgba(22,14,6,.9), 0 2px 12px rgba(24,15,7,.7);
}
.stage__orn{
  display:block; margin:2px auto 8px;
  font-size:1rem; color:var(--gold-hi);
  text-shadow:0 0 14px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.7), 0 2px 6px rgba(24,15,7,.8);
}
.couple{
  display:grid; justify-items:center;
  margin:0 0 14px;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(3rem, 13.4vw, 5rem);
  line-height:1.14; color:#fff8e9;
  text-shadow:0 2px 8px rgba(22,13,6,.85), 0 4px 24px rgba(22,13,6,.7), 0 0 46px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.26);
}
/* هامش سالب طفيف يقارب السطرين فيُقرآن اسماً واحداً لا سطرين منفصلين.
   والشعرة الذهبية بـtext-stroke: التقنية الوحيدة التي تُذهّب النصّ العربي
   بلا خطر — لا تباعدَ يفكّ الوصل ولا background-clip يكسر التشكيل.
   على الاسم لا على .couple كي لا ترثها العلامة.
   الاسم الطويل يلتفّ («عبدالقادر شامل / الكبيسي»)، وبسطر 1.14 تلامس ألِفات
   الرقعة ولاماتُها قافَ السطر فوقها. سطرٌ 1.38 يفصلهما، والهامشان يسحبان
   نصف الزيادة (.12em) من كل جهة فيبقى الاسم ذو السطر الواحد بمكانه تماماً. */
.couple__name{
  display:block; max-width:92vw; margin:-.18em 0 -.12em;
  line-height:1.38;
  -webkit-text-stroke:.5px rgba(216,178,108,.42);
}
.couple__amp{
  display:block; margin:.22em 0 .08em;
  /* ⚠️ بلا italic: أميري المائل يستبدل «&» بصيغة swash مزخرفة تُقرأ
     حرفاً مشوّهاً. الطراز العادي يعطي علامةً كلاسيكية أنيقة. */
  font-family:var(--serif);
  font-size:.5em; color:var(--gold-hi);
  text-shadow:0 1px 3px rgba(20,12,5,.9), 0 0 20px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.7);
}
.stage__date{
  display:inline-block;
  margin:0 0 10px; padding:8px 26px;
  font-family:var(--serif); font-size:1.03rem; color:#f8efdd;
  border-top:1px solid rgba(var(--gold-hi-rgb, 236, 215, 162), 0.4);
  border-bottom:1px solid rgba(var(--gold-hi-rgb, 236, 215, 162), 0.4);
  text-shadow:0 1px 3px rgba(22,14,6,.9), 0 2px 12px rgba(24,15,7,.66);
}
.stage__sub{
  display:inline-block;
  margin:0 auto; max-width:34ch;
  font-size:.97rem; line-height:1.95; color:#f0e3cb;
  text-shadow:0 1px 3px rgba(22,14,6,.88), 0 2px 12px rgba(24,15,7,.64);
}
/* ⚠️ مثبّت أسفل الواجهة لا آخرَ كتلة النصّ: هناك كان يقع عند ٣٩٣-٤٤٧ بينما
   رأس العريس يبدأ عند ٤٤٠ (مقيسٌ على الصورة) — فالسهم يهبط على الوجه.
   وأسفلُ الكادر أرضيةٌ وذيلُ فستان، فلا وجه يُحجب مهما طال نصّ الزبون. */
.scroll-cue{
  position:relative; z-index:3;
  margin-top:auto;                              /* يدفعه للقاع بلا تراكب */
  margin-bottom:calc(14px + var(--bars));
  width:100%; display:block; padding:0 20px; text-align:center;
  font-size:.78rem; word-spacing:.28em; color:#f6ecd8;
  text-shadow:0 1px 3px rgba(16,10,4,.95), 0 2px 10px rgba(18,11,5,.9), 0 0 24px rgba(18,11,5,.7);
}
/* تدرّج بعرض الشاشة يتلاشى صعوداً — يعيد التباين فوق الفستان الأبيض بلا صندوق */
.stage__floorfade{
  position:absolute; inset:auto 0 0 0; height:calc(190px + var(--bars)); z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(38,24,13,0) 0%, rgba(38,24,13,.10) 34%, rgba(38,24,13,.26) 62%, rgba(38,24,13,.42) 100%);
}
.scroll-cue em{font-style:normal; margin:0 8px; color:var(--gold-hi); opacity:.9}
.scroll-cue b{display:block; margin-top:6px; font-weight:400; animation:cueBob 2.2s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0); opacity:.55}50%{transform:translateY(6px); opacity:1}}

/* ظهور عناصر الواجهة */
.sreveal{
  opacity:0; transform:translateY(-20px);
  transition:opacity .85s ease, transform 1s cubic-bezier(.22,1.15,.36,1);
}
.sreveal.is-in{opacity:1; transform:none}

/* ============================================================
   القاعة — ستائر وخيوط ضوء
   ============================================================ */
/* الستائر على `main` كلّه لا على `.hall` وحدها: المنصّة تحقن التقويم وتأكيد
   الحضور **بعد** `</article>` وقبل `</main>`، فلو بقيت الخلفية داخل `.hall`
   جلست تلك الأقسام على لونٍ مسطّح منفصلٍ عن القاعة. */
/* بلا خطوط عمودية: أي `repeating-linear-gradient` هنا يُقرأ شعيراتٍ مزعجة
   على الشاشة مهما خفّ. الجوّ يجيء من التدرّج ووهجٍ ناعم بالأعلى وحدهما. */
.invite{
  /* الوهج يُرسم من سقف القاعة لا من رأس الصفحة (كان خلف الصورة)، والتدرّج
     يبدأ بعد الواجهة بالبكسل فلا يقع خطٌّ أفقي عند حافّتها مهما طال النصّ. */
  background:
    radial-gradient(150% 480px at 50% calc(var(--stage-h) + 300px),
      rgba(255,246,232,.55) 0%, transparent 62%),
    linear-gradient(180deg,
      var(--champ) 0px,
      var(--champ) calc(var(--stage-h) + 40px),
      #fffcf7 calc(var(--stage-h) + 340px),
      var(--champ, #ffffff) 62%,
      #fdf8f0 100%);
}
.hall{position:relative; z-index:2; padding:8px 0 0}
/* خيوط الأنوار المتساقطة على جانبَي القاعة */
.hall__strands{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.strand{
  position:absolute; top:0; width:15px;
  background-image:
    radial-gradient(circle, rgba(var(--gold-rgb, 194, 153, 79), .75) 0 1px,   transparent 1.6px),
    radial-gradient(circle, rgba(var(--gold-rgb, 194, 153, 79), .5) 0 .85px, transparent 1.4px),
    radial-gradient(circle, rgba(var(--gold-rgb, 194, 153, 79), .38) 0 .75px, transparent 1.3px);
  background-size:5px 7px, 5px 9px, 5px 8px;
  background-position:0 0, 5px 3px, 10px 5px;
  background-repeat:repeat-y;
  filter:drop-shadow(0 0 1.8px rgba(255,247,228,.85)) drop-shadow(0 0 5px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.35));
  /* تتلاشى نزولاً فلا تنتهي بحافّة مقصوصة */
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.25) 0%, #000 14%, #000 52%, transparent 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.25) 0%, #000 14%, #000 52%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:.6;
  /* ⚠️ متغيّران منفصلان: السكربت كان يكتب animation-duration واحدة لاختصارٍ
     فيه حركتان، فتُسحق مدّة التأرجح من ٧٫٥ث إلى مدّة التوهّج. */
  animation:strandGlow var(--glowDur,4s) ease-in-out var(--glowDelay,0s) infinite,
            strandSway var(--swayDur,7.5s) ease-in-out var(--swayDelay,0s) infinite;
  transform-origin:50% 0;
}
@keyframes strandGlow{0%,100%{opacity:.38}50%{opacity:.8}}
@keyframes strandSway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}

/* ===== الأقسام ===== */
.sec{
  position:relative; z-index:2;
  max-width:560px; margin:0 auto;
  padding:40px 26px; text-align:center;
}
.creveal{
  opacity:0; transform:translateY(-26px);
  transition:opacity .8s ease, transform 1.05s cubic-bezier(.22,1.15,.36,1);
}
.creveal.is-visible{opacity:1; transform:none}

.sec__title{
  position:relative; display:inline-block;
  margin:0 0 22px; padding:0 4px .8em;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.62rem, 6.8vw, 2.05rem); color:var(--umber);
}
/* قوس صغير تحت العنوان — صدى قنطرة الباب */
.sec__title::after{
  content:""; position:absolute; inset:auto 0 0 0;
  height:11px;
  border-top:1px solid rgba(var(--gold-ink-rgb, 142, 105, 47), 0.55);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

/* قنديل — الزخرفة الأساسية بدل الأيقونات المكرّرة */
.lamp{
  display:block; width:12px; height:12px; margin:0 auto 18px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 36%, #fff7e4 0%, var(--gold-hi) 42%, var(--gold) 100%);
  box-shadow:0 0 16px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.9), 0 0 34px rgba(var(--gold-rgb, 194, 153, 79), 0.42);
  position:relative;
}
.lamp::before{
  content:""; position:absolute; inset:auto 50% 100% 50%;
  width:1px; height:26px; margin-right:-.5px;
  background:linear-gradient(180deg, transparent, rgba(var(--gold-rgb, 194, 153, 79), 0.55));
}

/* فاصل: خيط ضوء أفقي بقنديل بوسطه */
.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  max-width:340px; margin:0 auto; padding:4px 26px;
}
.divider i{
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--gold-ink-rgb, 142, 105, 47), 0.42), transparent);
}
.divider span{
  font-size:.72rem; color:var(--gold-ink);
  text-shadow:0 0 10px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.5);
}

/* ===== الآية ===== */
.verse{padding-top:46px}
.bismillah{
  margin:0 0 20px;
  font-family:var(--disp); font-weight:700; font-size:1.14rem; color:var(--gold-ink);
}
.verse__text{
  margin:0 auto; max-width:26ch;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.18rem, 5vw, 1.42rem);
  line-height:2.1;
  color:var(--mocha);
  white-space:pre-line;
  text-wrap:balance;   /* ⚠️ بعد white-space لا قبلها: المختصرة تمحوها صامتةً */
}

/* ===== بطاقة الدعوة ===== */
.invitation__text{
  margin:0; font-size:1.04rem; line-height:2.15; color:var(--ink);
  font-weight:400; white-space:pre-line;
}

/* ===== العائلتان ===== */
.families{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:14px;
}
.family__label{
  display:block; margin-bottom:8px;
  font-size:.76rem; word-spacing:.26em; color:var(--taupe);
}
.family__names{
  margin:0; font-family:var(--serif); font-size:.99rem; line-height:1.85;
  color:var(--mocha); white-space:pre-line;
}
.families__heart{
  font-size:.9rem; color:var(--gold-ink);
  text-shadow:0 0 10px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.5);
}

/* ===== العدّاد: أربعة قناديل معلّقة ===== */
.countdown{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.55rem; max-width:360px;
  /* ٢٢ (هامش العنوان) + ٤ + ٢٦ (الخيط) = ٥٢ = المسافة السابقة بالضبط،
     فلا تتحرّك بطاقة بكسلاً والخيط يشغل فراغاً موجوداً أصلاً. */
  position:relative; margin:4px auto 0; padding-top:26px;
}
.cd__u{
  position:relative;
  min-width:0; padding:1rem .25rem .8rem;
  border:1px solid rgba(var(--gold-rgb, 194, 153, 79), 0.34);
  border-radius:1.6rem 1.6rem .7rem .7rem;
  background:linear-gradient(180deg, rgba(255,253,248,.92) 0%, rgba(250,242,229,.7) 100%);
  box-shadow:0 10px 26px rgba(var(--mocha-rgb, 109, 81, 56), 0.1), inset 0 1px 0 rgba(255,255,255,.9);
}
/* السلك — منسوخ حرفياً من .lamp::before فيقرأه القالب لغته لا زخرفة جديدة */
.cd__u::before{
  content:""; position:absolute; inset:auto 50% 100% 50%;
  width:1px; height:26px; margin-right:-.5px;
  background:linear-gradient(180deg, transparent, rgba(var(--gold-rgb, 194, 153, 79), 0.55));
}
.cd__n{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem, 7.6vw, 2.35rem); line-height:1;
  color:var(--gold-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.cd__l{
  display:block; margin-top:.55rem;
  font-size:.76rem; color:var(--ink-soft);
}
.count__arrived{
  margin:22px 0 0; font-family:var(--serif); font-size:1.05rem; color:var(--gold-ink);
}

/* ===== البرنامج: خيط الضوء هو خطّ الوقت ===== */
.sched{position:relative; margin-top:26px; padding:4px 0}
.sched__line{
  position:absolute; top:6px; bottom:6px; right:50%;
  width:1px; margin-right:-.5px;
  background:linear-gradient(180deg, transparent, rgba(var(--gold-ink-rgb, 142, 105, 47), 0.42) 12%, rgba(var(--gold-ink-rgb, 142, 105, 47), 0.42) 88%, transparent);
}
.sched__row{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
  align-items:center; gap:8px;
  padding:13px 0;
}
.sched__time{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.18rem, 4.6vw, 1.35rem);
  line-height:1.5; color:var(--gold-ink);
  text-align:left; padding-left:6px;
}
.sched__dot{
  width:9px; height:9px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff7e4, var(--gold-hi) 45%, var(--gold));
  box-shadow:0 0 12px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.95), 0 0 24px rgba(var(--gold-rgb, 194, 153, 79), 0.4);
}
.sched__event{
  font-size:clamp(.95rem, 3.8vw, 1.05rem);
  line-height:1.6; color:var(--mocha);
  text-align:right; padding-right:6px;
}

/* ===== المكان ===== */
.venue__photo{
  display:none;                          /* الإظهار من .venue.has-photo */
  width:100%; max-width:300px; height:250px; margin:0 auto 18px;
  border-radius:150px 150px 18px 18px;   /* قنطرة — صدى الباب */
  background-color:#e7dcc0;              /* وإلا بانت قنطرة مثقوبة ريثما تُحمّل */
  background-size:cover; background-position:center;
  border:1px solid rgba(var(--gold-rgb, 194, 153, 79), 0.34);
  box-shadow:0 14px 34px rgba(var(--mocha-rgb, 109, 81, 56), 0.16);
}
.venue.has-photo .venue__photo{display:block}
.venue__name{
  margin:0 0 8px; font-family:var(--disp); font-weight:700; font-size:1.2rem; color:var(--mocha);
}
.venue__addr{margin:0 0 20px; font-size:.93rem; color:var(--ink-soft); white-space:pre-line}
.venue__map{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 30px; border-radius:999px;
  /* ذهبٌ مُضاء لا معدنٌ مصقول: كل ذهب الصورة ضوء، ولا انعكاس معدني فيها */
  background:linear-gradient(180deg, #dcb877 0%, var(--gold) 100%);
  border:1px solid rgba(255,241,205,.40);
  color:#3a2a16; text-decoration:none; font-weight:700; font-size:.94rem;
  box-shadow:0 10px 26px rgba(var(--gold-rgb, 194, 153, 79), 0.28),
             0 0 26px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.45),
             inset 0 1px 0 rgba(255,250,235,.65);
  transition:transform .16s cubic-bezier(.3,.8,.4,1), box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
/* ⚠️ الهوفر محاطٌ بـhover:hover: على آيفون يعلق بعد النقر فيبقى الزرّ
   مرفوعاً وتُمحى هالته (box-shadow يستبدل ولا يتراكم) بقيّة الجلسة. */
@media (hover:hover){
  .venue__map:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(var(--gold-rgb, 194, 153, 79), 0.34),
               0 0 30px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.55),
               inset 0 1px 0 rgba(255,250,235,.7);
  }
}
.venue__map:active{
  transform:translateY(0) scale(.965);
  box-shadow:0 6px 16px rgba(var(--gold-rgb, 194, 153, 79), 0.3),
             0 0 18px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.4),
             inset 0 1px 0 rgba(255,250,235,.65);
}

/* ===== التنويهات ===== */
.notes__list{margin:0; padding:0; list-style:none; text-align:right}
.notes__item{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 0; font-size:.94rem; line-height:1.9; color:var(--ink);
  border-bottom:1px solid rgba(var(--gold-rgb, 194, 153, 79), 0.18);
}
.notes__item:last-child{border-bottom:none}
.notes__mark{
  flex:0 0 auto; margin-top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff8e6, #d9b878 55%, #96702c 100%);
  box-shadow:0 0 9px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.7);
}

/* ===== التواصل ===== */
.contact__label{
  display:block; margin-bottom:12px;
  font-size:.78rem; word-spacing:.26em; color:var(--taupe);
}
.contact__link{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 26px; border-radius:999px; max-width:100%;
  border:1px solid rgba(var(--gold-rgb, 194, 153, 79), 0.34);
  /* نفس مادّة بطاقة العدّاد — كريميٌّ منقوش لكل فعلٍ عدا الخريطة.
     هدوءه مقصود: ذهبٌ ممتلئ لفعلٍ واحد فقط. */
  background:linear-gradient(180deg, rgba(255,253,248,.95) 0%, rgba(250,242,229,.78) 100%);
  box-shadow:0 8px 20px rgba(var(--mocha-rgb, 109, 81, 56), 0.1), inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--mocha); text-decoration:none;
  font-family:var(--serif); font-weight:400; font-size:1.05rem;
  transition:transform .16s cubic-bezier(.3,.8,.4,1), background-color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.contact__link:active{
  transform:scale(.965);
  background:rgba(var(--champ-rgb, 236, 220, 196), 0.92);
  border-color:rgba(var(--gold-rgb, 194, 153, 79), 0.62);
}

/* ===== الختام على الأرضية العاكسة ===== */
.closing{padding-bottom:52px}
.closing__note{
  margin:0 0 16px; font-family:var(--serif); font-size:1.08rem;
  line-height:2.1; color:var(--mocha); white-space:pre-line;
}
.closing__families{
  margin:0 0 10px; font-family:var(--disp); font-size:1.06rem; color:var(--gold-ink);
}
.closing__hashtag{
  margin:0; font-size:.9rem; letter-spacing:.05em; color:var(--taupe);
}
.closing__hashtag:empty{display:none}
/* أرضية القاعة: انعكاس ناعم يقفل الصفحة */
.hall__floor{
  /* ارتفاعٌ محسوب لا ثابت: بطاقة «دعوة» تسكن داخلها، فالرخام يمتدّ خلفها */
  position:relative; min-height:170px; padding-top:38px; overflow:hidden;
  background:linear-gradient(180deg, #fdf8f0 0%, #fffdf9 30%, #fbf5ec 66%, #f4ebdc 100%);
}
/* رخام الصورة نفسها — القصّة تُقفل على المادّة التي فُتحت عليها */
.hall__floor::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("/templates/makhmal/assets/floor.jpg") 50% 0/cover;
  opacity:.2;
  /* يثبت حتى القاع: الصفحة تنتهي هنا، فتلاشيه قبلها يُظهر الرخام مقطوعاً */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 100%);
}
/* خطّ الأفق: وميضٌ ناعم حيث تلتقي الستائر بالأرضية بدل حافّة قاطعة.
   z-index صريح على الاثنين: ::after يُرسم فوقه بترتيب المصدر فيطمسه. */
.hall__floor::before{
  content:""; position:absolute; inset:0 0 auto 0; height:26px; z-index:1;
  background:linear-gradient(180deg, rgba(var(--champ-rgb, 236, 220, 196), 0.9) 0%, rgba(255,250,240,.55) 45%, transparent 100%);
}

/* ============================================================
   الأقسام المحقونة من المنصّة (تأكيد الحضور، التقويم، الملاحظة)
   ⚠️ box-sizing يُضبط صراحةً — الأقسام المحقونة لا ترث قاعدة الصفحة
   ============================================================ */
#da3wa-rsvp, #da3wa-note, #da3wa-calendar{position:relative; z-index:2}
#da3wa-rsvp *, #da3wa-note *, #da3wa-calendar *{box-sizing:border-box}

/* ============================================================
   شاشات أضيق
   ============================================================ */
@media (max-width:380px){
  .sec{padding:34px 20px}
  .countdown{gap:.38rem}
  .cd__u{padding-inline:.1rem}
  .cd__l{font-size:.72rem}
  .sched__row{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
}

@media (prefers-reduced-motion: reduce){
  .stage__photo{animation:none; transform:none}
  .strand, .cover__ring, .cover__ring b, .cover__hint, .scroll-cue b, .plaque{animation:none}
  .glints, .crystal-dust{display:none}
  .sreveal, .creveal{opacity:1; transform:none; transition:none}
}

/* ============================================================
   ميزات «مخمل» — ما يميّزه عن ثريّا
   ============================================================ */

/* ── الاسمان بسطرٍ واحد حين يتّسعان (السكربت يقيس بعد وصول الخط): ثلاثة أسطر بالرقعة
   كانت تنزل بالكتابة على وجهَي العروسين. الاسم الطويل يعود للتكديس كما في ثريّا ── */
.couple.is-line{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:.16em;
  white-space:nowrap;
}
.couple.is-line .couple__name{display:inline-block; max-width:none; margin:0}
.couple.is-line .couple__amp{display:inline-block; margin:0 .06em; transform:translateY(.08em)}

/* ── بطاقة الدعوة خلف ستارة مخملية ── */
.inv-card{
  position:relative; overflow:hidden;
  margin:0 auto; max-width:440px;
  padding:46px 40px 34px;
  border-radius:26px 26px 18px 18px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,252,244,.96) 0%, rgba(250,242,228,.9) 70%, rgba(244,232,212,.9) 100%);
  border:1px solid rgba(var(--gold-rgb, 194, 153, 79), 0.4);
  box-shadow:
    0 18px 40px rgba(var(--mocha-rgb, 109, 81, 56), 0.14),
    inset 0 0 0 6px rgba(255,255,255,.55),
    inset 0 0 0 7px rgba(var(--gold-rgb, 194, 153, 79), 0.22);
}
/* الحاشية العلوية: أطرافٌ مخملية مقوّسة بحدٍّ ذهبي */
.inv-card__valance{
  position:absolute; inset:0 0 auto 0; height:22px; z-index:4; pointer-events:none;
  background:
    radial-gradient(circle at 50% -6px, #8d1424 0 15px, transparent 15.5px) 0 0/30px 22px repeat-x,
    linear-gradient(180deg, #5d0a17, #8d1424) 0 0/100% 7px no-repeat;
}
/* حدٌّ ذهبي يلي حافّة الأطراف: حلقةٌ بالمركز نفسه خلف نصف القطر */
.inv-card__valance::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% -6px, transparent 15px, rgba(var(--gold-hi-rgb, 236, 215, 162), 0.95) 15.4px 16.6px, transparent 17px) 0 0/30px 22px repeat-x;
}
/* ستارتان من مخملٍ أحمر بطيّات — تنفرجان نحو الجانبين وتبقيان معقودتين كإطار */
.drape{
  position:absolute; top:0; bottom:0; width:51%; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,190,190,.16) 0%, transparent 28%, rgba(20,0,5,.28) 100%),
    repeating-linear-gradient(90deg,
      #4e0812 0px, #7a1020 7px, #b01d31 12px, #c8283c 14px, #941628 19px, #5e0a17 26px);
  transition:transform 1.9s cubic-bezier(.66,0,.22,1) .45s;
}
.drape--r{right:0; transform-origin:100% 50%}
.drape--l{left:0;  transform-origin:0 50%}
/* حبل الربط الذهبي */
.drape i{
  position:absolute; inset:58% 0 auto 0; height:9px;
  background:linear-gradient(180deg, #f3dfa6, var(--gold, #c2994f) 55%, var(--gold-ink, #8e692f));
  box-shadow:0 1px 3px rgba(40,6,10,.45);
  opacity:0; transition:opacity .6s ease 1.9s;
}
.invitation.is-visible .drape--r, .invitation.is-visible .drape--l{transform:scaleX(.075)}
.invitation.is-visible .drape i{opacity:1}

/* ── الموعد تحت المخمل ── */
.when{padding-top:34px}
.when__kicker{
  margin:0 0 6px;
  font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.42em;
  color:var(--gold-ink);
}
/* قوسٌ نصف دائري بأعلاه كباب الدخولية: الأفقي ٥٠٪ والعمودي (٥٠٪×٥/٧) ≈ ٣٥٫٧٪ */
.vscratch{
  position:relative; overflow:hidden; isolation:isolate;
  width:min(76vw, 290px); aspect-ratio:5/7; margin:4px auto 0;
  border-radius:50% 50% 16px 16px / 35.7% 35.7% 16px 16px;
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb, 194, 153, 79), 0.75),
    0 0 0 5px rgba(255,251,242,.95),
    0 0 0 6.5px rgba(var(--gold-rgb, 194, 153, 79), 0.6),
    0 22px 46px rgba(70,10,18,.28);
  touch-action:none;
}
.vscratch__card{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30% 16px 12%;
  background:
    radial-gradient(90% 55% at 50% 30%, rgba(255,250,236,.98) 0%, rgba(248,236,214,.94) 62%, #efdcbd 100%);
  text-align:center;
}
/* قوسٌ ذهبي داخلي يكرّر إطار الباب، ونجمةٌ في قمّته */
.vscratch__card::before{
  content:""; position:absolute; inset:13px; pointer-events:none;
  border:1px solid rgba(var(--gold-rgb, 194, 153, 79), 0.55);
  border-radius:50% 50% 8px 8px / 35.7% 35.7% 8px 8px;
}
.vscratch__card::after{
  content:"\2726"; position:absolute; top:16%; left:0; right:0;
  font-size:1rem; color:var(--gold); text-shadow:0 0 12px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.9);
}
.vd-wd{font-family:var(--serif); font-size:1.08rem; color:var(--mocha)}
.vd-day{
  display:block; padding:.06em .1em 0;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(4.4rem, 23vw, 5.8rem); line-height:1;
  background:linear-gradient(100deg, #7d5a24 0%, #b78a3f 28%, #f3dfa6 46%, #b78a3f 64%, #7d5a24 100%);
  background-size:240% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.vd-my{margin-top:4px; font-family:var(--disp); font-weight:700; font-size:1.34rem; color:var(--umber)}
.vd-rule{
  display:block; width:64px; height:1px; margin:12px auto 10px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.vd-time{font-size:.96rem; color:var(--ink-soft)}
.vscratch.is-revealed .vscratch__card > *{animation:mkRise .9s cubic-bezier(.22,1.2,.36,1) backwards}
.vscratch.is-revealed .vd-day{animation:mkRise .9s cubic-bezier(.22,1.2,.36,1) backwards, mkSweep 2.6s ease .6s backwards}
@keyframes mkSweep{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes mkRise{from{transform:scale(.94); opacity:.6}to{transform:none; opacity:1}}

.vscratch__cv{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  cursor:grab; touch-action:none; outline:none;
}
/* يرتفع المخمل إلى داخل القوس كستارة مسرح، ويخفّ في آخر رحلته */
.vscratch.is-revealed .vscratch__cv{
  transform:translateY(-104%); opacity:.25; pointer-events:none;
  transition:transform 1.6s cubic-bezier(.66,0,.24,1), opacity .5s ease 1.2s;
}
/* بريقٌ يمرّ على المخمل يدعو للّمس — يتوقّف عند أول مسحة */
.vscratch__sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,214,214,.22) 50%, transparent 62%) 0 0/260% 100% no-repeat;
  animation:mkSheen 3.6s ease-in-out 1s infinite;
}
.vscratch.is-started .vscratch__sheen, .vscratch.is-revealed .vscratch__sheen{animation:none; opacity:0}
@keyframes mkSheen{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
.vscratch__hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:18px auto 0; font-size:.9rem; color:var(--mocha);
  transition:opacity .5s ease;
}
.vscratch__hint svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; animation:mkRub 1.8s ease-in-out infinite}
@keyframes mkRub{0%,100%{transform:translateX(-5px) rotate(-8deg)}50%{transform:translateX(5px) rotate(6deg)}}
.vscratch__hint.is-done{opacity:0}
/* «احفظ الموعد» من المنصّة تحمل التاريخ نفسه — تنتظر تحت القوس حتى يُمسح */
#da3wa-cal.mk-wait{display:none}
#da3wa-cal.mk-show{animation:mkRise .8s ease backwards}

/* ── بتلات الورد: طبقةٌ فوق الدعوة وتحت الغلاف وأشرطة المنصّة، لا تلتقط اللمس ── */
.petals{position:fixed; inset:0; width:100%; height:100%; z-index:45; pointer-events:none}

/* ── «انثروا الورد» ── */
.roses{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 auto 26px; padding:11px 24px 11px 22px;
  font:700 1rem/1.2 var(--disp); color:#fff6e6;
  border:1px solid rgba(var(--gold-hi-rgb, 236, 215, 162), 0.85); border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,200,200,.18), transparent 46%),
    repeating-linear-gradient(90deg, #6a0c19 0px, #8f1426 8px, #b41f33 12px, #7c1020 18px);
  box-shadow:0 10px 24px rgba(90,10,22,.3), inset 0 0 0 3px rgba(255,236,200,.12);
  text-shadow:0 1px 2px rgba(30,4,8,.6);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:mkGlow 2.8s ease-in-out infinite;
  transition:transform .18s ease;
}
.roses:active{transform:scale(.95)}
.roses__ic{width:20px; height:20px; fill:none; stroke:#f3dfa6; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
@keyframes mkGlow{0%,100%{box-shadow:0 10px 24px rgba(90,10,22,.3), 0 0 0 0 rgba(194,40,60,.0)}50%{box-shadow:0 10px 24px rgba(90,10,22,.3), 0 0 0 8px rgba(194,40,60,.12)}}

@media (max-width:380px){
  .inv-card{padding-inline:34px}
}
@media (prefers-reduced-motion: reduce){
  .drape{transition:none; transform:scaleX(.075)}
  .drape i{opacity:1; transition:none}
  .vscratch__sheen, .vscratch__hint svg, .roses{animation:none}
}

/* ============================================================
   أنيميشن على طول الدعوة — فخامةٌ هادئة (طلب كرار 2026-10-29)
   كلّه يُطلقه وصول القسم إلى الشاشة (.creveal.is-visible)، ولا شيء يتكرّر بلا سبب
   ============================================================ */

/* ── الفواصل: خيطا الذهب يُسحبان من النجمة نحو الطرفين، والنجمة تدور إلى مكانها ── */
.divider i{transform:scaleX(0); transition:transform 1.4s cubic-bezier(.22,1,.36,1) .3s}
.divider i:first-child{transform-origin:0 50%}      /* RTL: الأول يميناً، حافّته اليسرى عند النجمة */
.divider i:last-child{transform-origin:100% 50%}
.divider span{display:inline-block; transform:scale(0) rotate(-200deg); transition:transform 1s cubic-bezier(.34,1.56,.64,1) .1s}
.divider.is-visible i{transform:scaleX(1)}
.divider.is-visible span{transform:none}

/* ── القناديل الصغيرة تتنفّس ضوءاً ── */
.lamp{animation:mkLamp 3.4s ease-in-out infinite}
@keyframes mkLamp{
  0%,100%{box-shadow:0 0 14px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.8), 0 0 30px rgba(var(--gold-rgb, 194, 153, 79), 0.35)}
  50%{box-shadow:0 0 22px rgba(var(--gold-hi-rgb, 236, 215, 162), 1), 0 0 52px rgba(var(--gold-rgb, 194, 153, 79), 0.55)}
}

/* ── العناوين: تصعد بوهجٍ ذهبي يخبو، وقوسها الصغير يُرسم تحتها ──
   ⚠️ لا background-clip على الرقعة (يكسر التشكيل ويقصّ النقاط) — الوهج ظلٌّ لا قصّ */
.creveal .sec__title::after{transform:scaleX(0); transition:transform 1.1s cubic-bezier(.22,1,.36,1) .7s}
.creveal.is-visible .sec__title::after{transform:scaleX(1)}
.creveal.is-visible .sec__title{animation:mkTitle 2s ease .25s backwards}
@keyframes mkTitle{
  0%{opacity:0; transform:translateY(10px) scale(.96); text-shadow:none}
  55%{opacity:1; transform:none; text-shadow:0 0 18px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.95), 0 0 36px rgba(var(--gold-rgb, 194, 153, 79), 0.45)}
  100%{text-shadow:none}
}

/* ── الآية ونصّ الدعوة كلمةً كلمة (السكربت يلفّ الكلمات، والمسافات وفواصل الأسطر تبقى نصّاً) ── */
.mk-w{display:inline-block; opacity:0; transform:translateY(.38em); transition:opacity .75s ease, transform .9s cubic-bezier(.22,1,.36,1); transition-delay:var(--d, 0ms)}
.is-visible .mk-w{opacity:1; transform:none}

/* ── العائلتان تتقابلان من الجانبين والنجمة بينهما تنبض ── */
.families .family{opacity:0; transition:opacity 1s ease, transform 1.1s cubic-bezier(.22,1,.36,1)}
.families .family:first-child{transform:translateX(28px); transition-delay:.15s}
.families .family:last-child{transform:translateX(-28px); transition-delay:.35s}
.families.is-visible .family{opacity:1; transform:none}
.families.is-visible .families__heart{animation:mkPulse 2.6s ease-in-out .9s infinite}
@keyframes mkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35); text-shadow:0 0 16px rgba(var(--gold-hi-rgb, 236, 215, 162), 1)}}

/* ── العدّاد: أربعة قناديل تتدلّى بخيوطها وتتأرجح ثم تستقرّ، والثواني تنبض ── */
.count .cd__u{opacity:0; transform-origin:50% -26px}
.count.is-visible .cd__u{opacity:1; animation:mkHang 1.5s cubic-bezier(.3,1.5,.5,1) backwards}
.count .cd__u:nth-child(1){animation-delay:.15s}
.count .cd__u:nth-child(2){animation-delay:.3s}
.count .cd__u:nth-child(3){animation-delay:.45s}
.count .cd__u:nth-child(4){animation-delay:.6s}
@keyframes mkHang{
  0%{opacity:0; transform:translateY(-46px) rotate(-7deg)}
  55%{opacity:1; transform:translateY(5px) rotate(3deg)}
  78%{transform:translateY(-2px) rotate(-1.4deg)}
  100%{transform:none}
}
.cd__u.mk-tick .cd__n{animation:mkTick .55s ease}
@keyframes mkTick{0%{opacity:.35; transform:translateY(-4px)}100%{opacity:1; transform:none}}

/* ── البرنامج: خيط الضوء يمتدّ نزولاً، والنقاط تضيء واحدةً واحدة ── */
.program .sched__line{transform:scaleY(0); transform-origin:50% 0; transition:transform 1.8s cubic-bezier(.4,0,.2,1) .3s}
.program.is-visible .sched__line{transform:scaleY(1)}
.program .sched__row{opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--r, 0) * 260ms + 500ms)}
.program .sched__dot{transform:scale(0); transition:transform .7s cubic-bezier(.34,1.8,.64,1); transition-delay:calc(var(--r, 0) * 260ms + 700ms)}
.program.is-visible .sched__row{opacity:1; transform:none}
.program.is-visible .sched__dot{transform:none}

/* ── التنويهات تنساب واحدةً بعد أخرى ── */
.notes .notes__item{opacity:0; transform:translateX(20px); transition:opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--r, 0) * 180ms + 300ms)}
.notes.is-visible .notes__item{opacity:1; transform:none}

/* ── زرّ الخريطة: لمعةٌ ذهبية تمرّ عليه كل حين ── */
.venue__map{position:relative; overflow:hidden; isolation:isolate}
.venue__map::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,250,232,.65) 50%, transparent 65%) 0 0/260% 100% no-repeat;
  animation:mkSheen 4.2s ease-in-out 1.5s infinite;
}

/* ── زوايا ذهبية مزخرفة تُرسم حول الآية والختام ── */
.mk-corners{position:absolute; inset:12px 10px; pointer-events:none; z-index:0}
.mk-corners svg{position:absolute; width:46px; height:46px; overflow:visible}
.mk-corners svg:nth-child(1){top:0; right:0}
.mk-corners svg:nth-child(2){top:0; left:0; transform:scaleX(-1)}
.mk-corners svg:nth-child(3){bottom:0; right:0; transform:scaleY(-1)}
.mk-corners svg:nth-child(4){bottom:0; left:0; transform:scale(-1,-1)}
.mk-corners path{fill:none; stroke:rgba(var(--gold-rgb, 194, 153, 79), .7); stroke-width:1.1; stroke-linecap:round; stroke-dasharray:130; stroke-dashoffset:130; transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .4s}
.mk-corners circle{fill:var(--gold); opacity:0; transition:opacity .6s ease 2s}
.is-visible > .mk-corners path{stroke-dashoffset:0}
.is-visible > .mk-corners circle{opacity:.85}
.verse > :not(.mk-corners), .closing > :not(.mk-corners){position:relative; z-index:1}

/* ── الختام: اسما العائلتين بوهجٍ ذهبي هادئ ── */
.closing.is-visible .closing__families{animation:mkGlow2 3.6s ease-in-out 1s infinite}
@keyframes mkGlow2{0%,100%{text-shadow:none}50%{text-shadow:0 0 14px rgba(var(--gold-hi-rgb, 236, 215, 162), 0.9)}}

@media (prefers-reduced-motion: reduce){
  .divider i, .divider span, .creveal .sec__title::after, .mk-w, .families .family, .count .cd__u,
  .program .sched__line, .program .sched__row, .program .sched__dot, .notes .notes__item{opacity:1; transform:none; transition:none; animation:none}
  .lamp, .venue__map::after, .families__heart, .closing__families, .creveal.is-visible .sec__title{animation:none}
  .mk-corners path{stroke-dashoffset:0; transition:none}
  .mk-corners circle{opacity:.85; transition:none}
}