: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;
  padding: 15px !important;
  /* أرضية اللوحة أسفل الكادر فاتحة (الأرض بين العروسين)، فالحبر الكريمي
     يذوب فيها — قرصٌ ورقيّ بحبر نبيذي يبقى مقروءاً مهما اختلف قصّ الصورة. */
  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: 18px;
}
.scroll-cue b { font-size: 20px !important; 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; }
.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; }
}