:root {
  --lh-bars: 0px;   /* ارتفاع أشرطة المنصّة السفلية — يُقاس بالسكربت */
  --paper: #f8e7c9;
  --paper-hi: #fff3db;
  --ink: #4a271d;
  --muted: #8c654d;
  --wine: #780d19;
  --wine-deep: #3a0710;
  --rose: #a40f21;
  --gold: #b57a2a;
  --gold-hi: #e8bd70;
  --line: rgba(146, 91, 35, .3);
  --serif: "Amiri", serif;
  --display: "Aref Ruqaa", serif;
  --title: "El Messiri", sans-serif;
  --body: "Tajawal", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.85;
  background:
    radial-gradient(80% 42% at 50% 8%, rgba(255,255,255,.72), transparent 75%),
    linear-gradient(180deg, #faebcf 0%, #f6dfbd 46%, #f9ead0 100%);
  -webkit-font-smoothing: antialiased;
}
body.locked { height: 100dvh; overflow: hidden; }

.paper-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background:
    url("./assets/hero.webp") center top / cover no-repeat;
  filter: blur(16px) saturate(.65);
}
.paper-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(249, 232, 201, .72);
}

.petals { position: fixed; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; }
.petal {
  position: absolute;
  top: -10vh;
  color: var(--rose);
  opacity: 0;
  font-family: var(--serif);
  filter: drop-shadow(0 3px 3px rgba(96, 30, 20, .15));
  animation: petalFall linear infinite;
}
@keyframes petalFall {
  0% { opacity: 0; transform: translate3d(0,-8vh,0) rotate(0deg); }
  12% { opacity: .68; }
  100% { opacity: 0; transform: translate3d(var(--drift),112vh,0) rotate(540deg); }
}

/* دخولية الستارة — الفيديو نفسه صار يكشف الصورة الرئيسية بدلاً من السواد */
.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #050303;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.gate.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gate__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 48%, rgba(5,2,2,.18), rgba(5,2,2,.56));
  transition: opacity .6s ease;
}
.gate.is-playing .gate__shade { opacity: 0; }
/* الكتلة تنزل تحت المنتصف قليلاً: انسدال الستارة وطيّاتها العلوية هي المشهد،
   وتوسيطها التام كان يحشر العنوان والأسماء والزرّ في كتلةٍ واحدة وسط الشاشة
   ويترك فراغاً ميتاً فوقها وتحتها. */
.gate__start {
  position: relative;
  z-index: 2;
  width: min(88vw, 430px);
  margin-top: 12vh;
  padding: 26px 20px calc(22px + var(--lh-bars));
  text-align: center;
  color: #f8e5bb;
  transition: opacity .5s ease, transform .5s ease;
}
.gate.is-playing .gate__start { opacity: 0; transform: scale(1.04); pointer-events: none; }
.gate__orn { display: block; color: var(--gold-hi); font-size: 22px; margin-bottom: 12px; }
.gate__eyebrow { font-family: var(--title); font-size: clamp(16px,4.4vw,20px); color: #e9c786; }
.gate__names {
  /* هواء بين الأسماء والزرّ: كانا متلاصقين فبدا الزرّ ملحقاً بالاسم لا دعوةً للفتح */
  margin: 7px 0 40px;
  font-family: var(--display);
  font-size: clamp(34px,10vw,54px);
  font-weight: 700;
  line-height: 1.55;
  color: #fff0c9;
  text-shadow: 0 5px 24px rgba(0,0,0,.75);
}
/* بلا صندوق: نصّ ذهبي تحته خيط رفيع. كتلة الذهب المصمتة كانت تُقرأ زرّ موقعٍ
   عادي فوق المخمل. الحشوة سخيّة رغم اختفاء الصندوق كي تبقى مساحة اللمس ≥ ٤٤px،
   والخيط يومض وميضاً هادئاً فيبقى واضحاً أنه شيء يُضغط. */
.gate__button {
  position: relative;
  min-width: auto;
  border: 0;
  border-radius: 0;
  padding: 13px 8px 15px;
  color: #f3dca8;
  background: none;
  box-shadow: none;
  font: 700 17px var(--title);
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.gate__button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(240,214,150,.95),transparent);
  animation: gateLine 2.6s ease-in-out infinite;
}
@keyframes gateLine {
  0%, 100% { opacity: .55; transform: scaleX(.72); }
  50%      { opacity: 1;   transform: scaleX(1); }
}
.gate__button:not(:disabled):hover { color: #fff1c8; }
.gate__button:active { transform: translateY(1px); }
.gate__button:disabled { opacity: .66; cursor: wait; }
.gate__hint { margin-top: 16px; font-size: 12px; color: rgba(255,237,203,.62); }
.gate__reveal {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 50%;
  width: min(78vw, 420px);
  transform: translate(-50%,18px);
  text-align: center;
  color: var(--wine-deep);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
  text-shadow: 0 2px 18px rgba(255,244,221,.88);
}
.gate.is-revealing .gate__reveal { opacity: 1; transform: translate(-50%,0); }
.gate__reveal p { font: 600 clamp(14px,4vw,19px) var(--title); }
.gate__reveal strong { display: block; font: 700 clamp(38px,11vw,62px)/1.55 var(--display); color: var(--wine); }
.gate__reveal span { display: block; font: 600 clamp(14px,4vw,18px) var(--title); }

.invite { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; opacity: 0; transition: opacity .7s ease; }
.invite.is-visible { opacity: 1; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero__picture, .hero__picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__picture { z-index: -3; }
.hero__picture img { object-fit: cover; object-position: center; }
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 62% 34% at 50% 29%, rgba(255,245,222,.38), transparent 78%),
    linear-gradient(180deg, rgba(255,244,221,.14), rgba(255,244,221,0) 62%, rgba(58,7,16,.18));
}
.hero__copy {
  align-self: start;
  width: min(88%, 470px);
  margin-top: clamp(80px, 12vh, 132px);
  text-align: center;
  color: var(--wine-deep);
}
.bismillah { font: 400 clamp(18px,4.7vw,24px) var(--serif); color: #8c541f; }
/* لا letter-spacing على نصٍّ عربي: الخطّ العربي متّصل، والمسافة تفكّ وصلات
   الحروف فتُقرأ الكلمة متقطّعة. تبقى فقط على صفّ الزخارف (رموز منفصلة أصلاً). */
.hero__kicker { margin-top: 12px; font: 600 clamp(14px,3.8vw,18px) var(--title); }
.diamond { display: block; margin: 5px auto 0; color: var(--gold); font-size: 12px; }
.hero__names {
  padding: .08em .1em;
  font: 700 clamp(43px,13vw,72px)/1.48 var(--display);
  background: linear-gradient(125deg,#7a101d 4%,#b47925 46%,#e0b25f 54%,#721019 96%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(96,50,20,.16));
  animation: nameShine 6s ease-in-out infinite;
}
@keyframes nameShine { 50% { background-position: 100% 0; } }
.hero__sub { width: min(92%,390px); margin: 3px auto 0; font: 600 clamp(13px,3.7vw,17px)/1.9 var(--title); color: #714334; }
.hero__date { margin-top: 13px; font: 700 clamp(15px,4vw,19px) var(--serif); color: #73311d; }
.hero__time { font: 500 clamp(13px,3.6vw,16px) var(--title); color: var(--muted); }
.scroll-cue {
  position: absolute;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--lh-bars));
  left: 50%;
  transform: translateX(-50%);
  /* السهم بجانب النص لا تحته — سطران يفصلان الإشارة عن معناها */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  /* أرضية اللوحة أسفل الكادر فاتحة (الأرض بين العروسين)، فالحبر الكريمي
     يذوب فيها — قرصٌ ورقيّ بحبر نبيذي يبقى مقروءاً مهما اختلف قصّ الصورة. */
  color: var(--wine);
  text-decoration: none;
  background: rgba(255, 243, 219, .84);
  padding-inline: 15px 13px;
  padding-block: 6px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(48, 5, 10, .16);
  font-size: 12px;
}
.scroll-cue b { font-size: 15px; line-height: 1; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(4px); } }

.section { position: relative; padding: clamp(54px,10vw,82px) 20px; text-align: center; }
.section__eyebrow { color: var(--rose); font: 700 13px var(--title); }
.section__title { margin: 4px 0 22px; color: var(--wine); font: 700 clamp(26px,7vw,38px)/1.5 var(--display); }
.creveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.creveal.is-visible { opacity: 1; transform: none; }

.ornament { display: flex; align-items: center; justify-content: center; gap: 13px; width: min(260px,80%); margin: 0 auto 20px; color: var(--gold); }
.ornament i { height: 1px; flex: 1; background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.ornament span { font-size: 20px; }
.verse__text { max-width: 500px; margin: auto; color: #74311f; font: 400 clamp(21px,5.6vw,30px)/2 var(--serif); }

.invitation-card, .details-card, .families__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(153,98,38,.34);
  background:
    linear-gradient(135deg,rgba(255,251,238,.94),rgba(247,225,188,.9)),
    var(--paper-hi);
  box-shadow: 0 24px 54px rgba(91,46,25,.13), inset 0 0 0 6px rgba(255,255,255,.28);
}
.invitation-card { border-radius: 30px 8px 30px 8px; padding: 46px 26px; }
.invitation-card::before, .invitation-card::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(181,122,42,.42);
  border-radius: 50%;
}
.invitation-card::before { top: -52px; right: -42px; box-shadow: 0 0 0 12px rgba(181,122,42,.08); }
.invitation-card::after { bottom: -52px; left: -42px; box-shadow: 0 0 0 12px rgba(181,122,42,.08); }
.card-corner { position: absolute; z-index: 1; color: var(--rose); font-size: 38px; opacity: .52; }
.card-corner--a { top: 7px; right: 13px; transform: rotate(-36deg); }
.card-corner--b { bottom: 7px; left: 13px; transform: rotate(144deg); }
.invitation__text { position: relative; z-index: 2; max-width: 470px; margin: auto; color: #644237; font: 500 clamp(17px,4.6vw,21px)/2.05 var(--title); }

.hands {
  position: relative;
  min-height: 620px;
  margin: 10px 0 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,251,237,.94),rgba(247,223,183,.72) 55%,rgba(122,13,25,.1)),
    linear-gradient(180deg,#f9e9ca,#f4d8ad);
  border-block: 1px solid rgba(153,98,38,.25);
}
.hands::before, .hands::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(181,122,42,.28);
  transform: rotate(45deg);
}
.hands::before { top: -120px; left: -90px; }
.hands::after { top: -120px; right: -90px; }
.hands__halo { position: absolute; left: 50%; top: 120px; width: 360px; height: 360px; transform: translateX(-50%); border: 1px solid rgba(181,122,42,.32); border-radius: 50%; box-shadow: 0 0 0 18px rgba(181,122,42,.05),0 0 0 36px rgba(181,122,42,.03); }
/* الكتلة تنزل داخل الدائرة: كانت ملتصقة بحافّة القسم العليا وفوق الدائرة
   كلّها، فتبدو معلّقة بلا سند. الآن «ومن هنا / تبدأ الحكاية» وجملتها كلّها
   داخل الهالة وفوق اليدين مباشرة. */
.hands__copy { position: relative; z-index: 2; padding-top: 148px; text-align: center; }
.hands__copy p { color: var(--rose); font: 600 14px var(--title); }
.hands__copy h2 { color: var(--wine); font: 700 clamp(34px,9vw,52px)/1.45 var(--display); }
.hands__copy span { color: var(--muted); font: italic 400 clamp(16px,4.2vw,20px) var(--serif); }
.hands__couple { position: relative; z-index: 2; align-self: center; width: 116%; max-width: 720px; height: auto; margin: -180px -8% -46px; filter: drop-shadow(0 22px 22px rgba(75,25,14,.22)); }

.families__card { border-radius: 22px; padding: 20px 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: stretch; }
.family { min-width: 0; padding: 18px 10px 16px; border: 1px solid rgba(153,98,38,.2); border-radius: 16px; background: rgba(255,249,233,.52); text-align: center; }
.family__label { display: block; color: var(--rose); font: 700 13px var(--title); }
.family p { margin-top: 7px; color: #5e342a; white-space: pre-line; font: 600 clamp(14px,3.8vw,18px)/1.75 var(--serif); }

.countdown-section { background: linear-gradient(145deg,#650b17,#3a0710); color: #fff1cf; border-block: 1px solid rgba(232,189,112,.28); }
.countdown-section .section__eyebrow { color: #e5b967; }
.countdown-section .section__title { color: #fff0c9; }
.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; direction: ltr; }
.countdown div { min-width: 0; padding: 14px 4px 11px; border: 1px solid rgba(232,189,112,.32); border-radius: 16px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.countdown strong { display: block; color: var(--gold-hi); font: 700 clamp(24px,7.5vw,38px)/1.15 var(--serif); }
.countdown span { display: block; color: rgba(255,239,204,.72); font-size: 11px; }
.countdown__arrived { color: var(--gold-hi); font: 700 22px var(--title); }

.details-card { padding: 40px 24px 32px; border-radius: 8px 30px 8px 30px; }
.detail-row { display: grid; grid-template-columns: 46px 1fr; gap: 13px; align-items: center; padding: 17px 0; text-align: right; border-top: 1px solid rgba(153,98,38,.18); }
.detail-row__icon { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 22px; }
.detail-row strong, .detail-row small { display: block; }
.detail-row strong { color: #5b261d; font: 700 17px/1.7 var(--title); }
.detail-row small { color: var(--muted); font-size: 14px; }

/* صورة القاعة التي يرفعها الزبون — الحالة الأصل: مطويّة تماماً، بلا ارتفاع
   ولا إطار ولا هامش، فالدعوات التي بلا صورة لا تتغيّر بذرّة. وحين تصل صورة
   وتُحمّل بنجاح تنفتح بخيط ذهبي وبطانة عاجيّة تفصل حافّتها عن ورق البطاقة،
   وبزوايا متباينة على مذهب زوايا بطاقة التفاصيل نفسها. */
.venue__photo {
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 6px 22px 6px 22px;
  background: center/cover no-repeat;
  transition: height .55s ease;
}
.venue__photo.has-img {
  height: 190px;
  max-width: 430px;
  margin: 10px auto 0;
  border: 1px solid rgba(153,98,38,.34);
  box-shadow: 0 10px 22px rgba(91,46,25,.14), inset 0 0 0 3px rgba(255,251,238,.55);
}
/* الصورة نفسها تفصل صفّ الموعد عن صفّ المكان، فالخيط الذي تحتها زائد
   ويقطعها عن اسم القاعة الذي تخصّه (في حال الصورة وحدها) */
.venue__photo.has-img + .detail-row { border-top-color: transparent; }

.map-button { display: inline-flex; justify-content: center; margin-top: 18px; padding: 12px 26px; border-radius: 999px; color: #fff2d4; background: linear-gradient(135deg,var(--wine),#9a1525); box-shadow: 0 11px 24px rgba(122,13,25,.23); text-decoration: none; font-weight: 700; }

.timeline { max-width: 460px; margin: 4px auto 0; }
.timeline__row { position: relative; display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; min-height: 76px; }
/* الخيط الواصل بين نقاط البرنامج: لونٌ واحد لا تدرّج. التدرّج كان يخبو إلى
   ٠٫١٨ قبل النقطة التالية فتُقرأ الوصلات خطوطاً متقطّعة لا خيطاً واحداً.
   وتوسيطه بـtranslateX لأن left:50% وحده يزيح الخطّ نصف بكسل عن مركز النقطة. */
.timeline__row:not(:last-child)::after { content: ""; position: absolute; top: 50%; bottom: -50%; left: 50%; transform: translateX(-50%); width: 1px; background: rgba(181,122,42,.55); }
.timeline__time { text-align: left; padding-right: 13px; color: var(--rose); font: 700 14px var(--title); direction: rtl; }
.timeline__dot { position: relative; z-index: 1; width: 13px; height: 13px; margin: auto; border: 3px solid #f8e5c4; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.timeline__title { text-align: right; padding-left: 13px; color: var(--ink); font: 600 16px var(--title); }

.notes__list { display: grid; gap: 10px; list-style: none; }
.notes__list li { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid rgba(153,98,38,.22); border-radius: 14px; background: rgba(255,249,233,.68); color: #644237; text-align: right; }
.notes__list li::before { content: "✦"; flex: 0 0 auto; color: var(--rose); }

.closing { position: relative; overflow: hidden; padding: 78px 22px 104px; text-align: center; color: #fff0cf; background: linear-gradient(160deg,#680c18,#3a0710 70%); }
.closing::before { content: ""; position: absolute; inset: 0; opacity: .17; background: url("./assets/hero.webp") top right / cover no-repeat; mix-blend-mode: screen; }
.closing > * { position: relative; z-index: 1; }
.closing__roses { color: var(--gold-hi); letter-spacing: .6em; text-indent: .6em; }
.closing__note { max-width: 470px; margin: 18px auto 6px; font: 700 clamp(30px,8vw,48px)/1.7 var(--display); }
.closing__families { color: #e8c783; font: 500 clamp(16px,4.2vw,20px) var(--serif); }
.closing__hashtag { margin-top: 12px; color: rgba(255,239,204,.72); }
.contact { margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(232,189,112,.24); }
.contact span, .contact a { display: block; }
.contact span { color: rgba(255,239,204,.7); font-size: 12px; }
.contact a { width: fit-content; margin: 4px auto 0; color: var(--gold-hi); font-weight: 700; text-decoration: none; }

@media (min-width: 621px) {
  body { padding-inline: calc((100vw - 620px)/2); }
  .gate { inset-inline: calc((100vw - 620px)/2); box-shadow: 0 0 80px rgba(45,12,8,.35); }
  .paper-glow { inset-inline: calc((100vw - 620px)/2); }
  .invite { box-shadow: 0 0 70px rgba(85,42,20,.12); }
}
@media (max-width: 390px) {
  .hero__copy { margin-top: 62px; }
  .hands { min-height: 560px; }
  .hands__couple { width: 126%; margin-top: -150px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .petals { display: none; }
  /* تجميد الحركة يترك خيط الزرّ عند آخر إطار (باهت وقصير) — نُثبّته كاملاً */
  .gate__button::after { opacity: 1; transform: none; }
}