/* «عهد» — بابٌ أبيض يُفتح على قاعة النور.
   عاجٌ وذهبُ شمعٍ هادئ، وورقٌ محبّب تطفو فيه أضواءٌ ذهبية. القوس القوطيّ (شكل الباب والنافذة)
   يتكرّر في كل الصفحة: اللوحة تصير نافذةً قوسية، والموعد زجاجٌ معشّق، والمكان لوحةٌ محفورة. */
:root {
  --ivory: #fbf7ef;
  --paper: #fffdf8;
  --cream: #f4ead7;
  --gold: #b8925a;
  --gold-dp: #8a6a3a;
  --gold-lt: #e3c98f;
  --ink: #4a3b2a;
  --ink-sf: #8b7a63;
  --line: rgba(var(--gold-rgb, 184, 146, 90), 0.34);
  --title: "Gulzar", "Amiri", serif;
  --body: "Amiri", serif;
  --num: "Cormorant Garamond", "Amiri", serif;
  --latin: "Pinyon Script", "Cormorant Garamond", cursive;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bar: 0px; /* ارتفاع شريط «اطلبه» في الديمو — يضبطه script.js */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* ورقٌ عاجيّ محبّب بضوءٍ دافئ من الأعلى */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 246, 222, .9), rgba(255, 246, 222, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--ivory);
}
body.is-gate { overflow: hidden; height: 100%; }
img, video, canvas, svg { display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ═══════════════ الباب ═══════════════ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: #f3ead8;
  cursor: pointer;
  transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}
/* المسرح بنسبة الفيلم (9:16) يغطّي الشاشة، فالهالة تبقى على مقبضَي الباب في كل شاشة */
.gate__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 56.25vh);
  height: max(100vh, 177.78vw);
  transform: translate(-50%, -50%);
}
.gate__film { width: 100%; height: 100%; object-fit: cover; }
.gate__halo {
  position: absolute;
  left: 50%;
  top: 60.5%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 247, 226, .95);
  box-shadow: 0 0 26px 6px rgba(255, 222, 150, .55), inset 0 0 20px rgba(255, 236, 190, .55);
  animation: halo 2.6s var(--ease) infinite;
  pointer-events: none;
}
.gate__halo--late { animation-delay: 1.3s; }
@keyframes halo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
/* كلمةٌ واحدة تحت المقبضين، بلا صندوق — تبقى فوق شريط الديمو والحافة السفلى على أي شاشة */
.gate__hint {
  position: absolute;
  left: 50%;
  top: min(70.5%, calc(50% + 50vh - 96px - var(--bar)));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 26px;
  border: 0;
  background: none;
  cursor: pointer;
  animation: hint-in 1.4s var(--ease) .5s backwards;
  transition: opacity .6s ease;
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.gate__line {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #b8925a), transparent);
  box-shadow: 0 0 8px rgba(255, 250, 236, .9);
}
.gate__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #5e4626;
  text-shadow: 0 0 2px #fffaf0, 0 0 12px #fffaf0, 0 0 22px rgba(255, 250, 238, .9);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .55; } }
.gate.is-playing { cursor: default; }
.gate.is-playing .gate__hint,
.gate.is-playing .gate__halo { opacity: 0; animation: none; pointer-events: none; transition: opacity .5s; }
.gate.is-loading .gate__hint { opacity: 1; }
/* نور الباب المفتوح (أعلى الفيلم) يتّسع دائرةً من موضعه حتى يغمر الشاشة */
.gate__bloom {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 260vmax;
  height: 260vmax;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, #fffdf6 0, #fffaf0 40%, rgba(255, 250, 240, .94) 58%, rgba(255, 250, 240, 0) 70%);
  transform: translate(-50%, -50%) scale(.12);
}
.gate.is-blooming .gate__bloom { animation: bloom 2.1s cubic-bezier(.55, 0, .75, 1) forwards; }
@keyframes bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
  35% { opacity: .85; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
body.is-open .gate { opacity: 0; visibility: hidden; pointer-events: none; }

/* ═══════════════ الأجواء: أضواء شموعٍ بعيدة تطفو، وبتلات وغبار ذهبي (كانفاس) ═══════════════ */
.bokeh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 2s ease 1s; }
body.is-open .bokeh { opacity: 1; }
.bokeh i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 168, .2) 0, rgba(255, 226, 168, .16) 52%, rgba(255, 220, 160, .3) 60%, rgba(255, 220, 160, 0) 68%);
  scale: .55;
  animation: drift var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); opacity: .5; }
  50% { opacity: 1; }
  100% { transform: translate(18px, -46px) scale(1.15); opacity: .65; }
}
.fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
}
#page { position: relative; z-index: 1; }

/* ═══════════════ الرحلة داخل اللوحة ═══════════════ */
/* الطول = الواجهة + مسافة التصغير؛ script.js يحسب التقدّم ويضبط المتغيّرات */
.journey { position: relative; height: 215vh; height: 215svh; }
.hero {
  --t: 0px; --s: 0px; --b: 0px; --r: 0px; --rb: 0px; --k: 1; --ring: 0; --cap: 0; --txt: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
.garland {
  position: absolute;
  top: -6px;
  width: min(62vw, 330px);
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 42%, transparent 74%);
  mask-image: radial-gradient(120% 110% at 100% 0%, #000 42%, transparent 74%);
  opacity: var(--ring);
  pointer-events: none;
}
.hero .garland { width: min(44vw, 230px); }
.garland--r { right: -10px; }
.garland--l { left: -10px; transform: scaleX(-1); }
/* الإطار: حاويةٌ بالتدفّق العادي (المنصّة تحقن صورة الخلفية داخله وتضبطه position:relative)،
   تُقصّ بقوسٍ يضيق مع التمرير */
.hero__frame {
  position: relative;
  height: 100%;
  -webkit-clip-path: inset(var(--t) var(--s) var(--b) var(--s) round var(--r) var(--r) var(--rb) var(--rb));
  clip-path: inset(var(--t) var(--s) var(--b) var(--s) round var(--r) var(--r) var(--rb) var(--rb));
  background: #efe4cf;
}
.hero__art { position: absolute; inset: 0; overflow: hidden; transform: scale(var(--k)); transform-origin: 50% 46%; }
/* اللوحة بنسبتها (2:3) تغطّي الواجهة: الوهج والأشعة بالنسب المئوية على مواضعها من اللوحة */
.hero__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(max(100svh, 560px) * 2 / 3));
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 2/3) {
  .hero__stage { top: 0; transform: translate(-50%, -12%); }
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.14;
  filter: brightness(1.32) saturate(.7);
}
body.is-open .hero__img {
  animation: adapt 3.4s var(--ease) forwards, breathe-img 18s ease-in-out 3.4s infinite alternate;
}
@keyframes adapt { to { scale: 1.02; filter: brightness(1) saturate(1); } }
@keyframes breathe-img { from { scale: 1.02; } to { scale: 1.07; } }

.rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(at 50% 9%,
    transparent 0deg 148deg,
    rgba(255, 243, 214, .5) 151deg, transparent 155deg,
    rgba(255, 243, 214, .3) 161deg, transparent 166deg,
    rgba(255, 243, 214, .55) 174deg, transparent 179deg,
    rgba(255, 243, 214, .35) 186deg, transparent 190deg,
    rgba(255, 243, 214, .45) 198deg, transparent 203deg,
    rgba(255, 243, 214, .28) 208deg, transparent 212deg 360deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 6%, rgba(0, 0, 0, .7) 34%, transparent 74%);
  mask-image: linear-gradient(to bottom, #000 6%, rgba(0, 0, 0, .7) 34%, transparent 74%);
  mix-blend-mode: screen;
  filter: blur(3px);
  transform-origin: 50% 9%;
  opacity: 0;
}
body.is-open .rays { animation: rays-in 2.4s ease 1.2s forwards, sway 11s ease-in-out 3.6s infinite alternate; }
@keyframes rays-in { to { opacity: .8; } }
@keyframes sway {
  0% { opacity: .8; transform: rotate(-2.2deg); }
  50% { opacity: .55; }
  100% { opacity: .9; transform: rotate(2.2deg); }
}
.glow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s, 1) * 6.5%);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 232, 170, .95) 0, rgba(255, 204, 120, .5) 26%, rgba(255, 190, 100, 0) 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flicker 2.7s ease-in-out var(--d, 0s) infinite;
}
.glow--soft { background: radial-gradient(circle, rgba(255, 220, 150, .5) 0, rgba(255, 200, 120, .18) 40%, rgba(255, 190, 100, 0) 70%); }
.glow--window {
  --x: 50%;
  --y: 15%;
  width: 52%;
  background: radial-gradient(ellipse at center, rgba(255, 248, 226, .75) 0, rgba(255, 240, 205, .3) 38%, rgba(255, 236, 196, 0) 70%);
  animation: window-breathe 7s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
  18% { opacity: 1; transform: translate(-50%, -52%) scale(1.08); }
  37% { opacity: .62; transform: translate(-50%, -49%) scale(.94); }
  58% { opacity: .96; transform: translate(-50%, -51%) scale(1.05); }
  79% { opacity: .7; transform: translate(-50%, -50%) scale(.97); }
}
@keyframes window-breathe { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.06); } }

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--txt);
  background: radial-gradient(130% 46% at 50% 0%, rgba(var(--ivory-rgb, 251, 247, 239), 0.92) 0, rgba(var(--ivory-rgb, 251, 247, 239), 0.72) 40%, rgba(251, 247, 239, 0) 76%);
}
/* إطار النافذة: خطّان ذهبيان بشكل القصّ نفسه، وتاجٌ صغير فوق القوس */
.hero__ring {
  position: absolute;
  top: var(--t);
  left: var(--s);
  right: var(--s);
  bottom: var(--b);
  border-radius: var(--r) var(--r) var(--rb) var(--rb);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 7px rgba(255, 252, 244, .9), 0 0 0 8.2px var(--gold-lt), 0 26px 50px rgba(120, 90, 50, .22);
  opacity: var(--ring);
  pointer-events: none;
}
.hero__crest {
  position: absolute;
  left: 50%;
  top: -40px;
  width: 64px;
  transform: translateX(-50%);
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
}
.hero__crest .fill { fill: var(--gold); stroke: none; }

.hero__text {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + max(4.5svh, 26px));
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
  z-index: 2;
  opacity: var(--txt);
  transform: translateY(calc((1 - var(--txt)) * -30px));
}
.hero__kicker {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(.92rem, 3.9vw, 1.06rem);
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-line;
  opacity: 0;
  text-shadow: 0 1px 10px rgba(255, 252, 244, .9);
}
body.is-open .hero__kicker { animation: fade-up 1.4s var(--ease) 1.3s forwards; }
.hero__names {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .28em;
  font-family: var(--title);
  font-weight: 400;
  font-size: clamp(2.5rem, 12.5vw, 4.3rem);
  line-height: 1.75;
}
.hero__name {
  padding: .1em .12em .2em;
  background: linear-gradient(100deg, #7a5a2e 0%, #a8834c 30%, #e2c48a 45%, #a8834c 60%, #7a5a2e 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px rgba(255, 252, 244, .95)) drop-shadow(0 0 12px rgba(255, 250, 238, .95)) drop-shadow(0 6px 14px rgba(var(--gold-dp-rgb, 138, 106, 58), 0.2));
  clip-path: inset(-30% -10% -30% 110%);
  white-space: nowrap;
}
/* اسمان لا يتّسعان معاً: كلٌّ بسطره و«&» بينهما (script.js يقيس بعد تحميل الخط) */
.hero__names.is-stacked { flex-direction: column; align-items: center; line-height: 1.5; }
.hero__names.is-stacked > * { font-size: .86em; }
.hero__names.is-stacked .hero__amp { margin: -.15em 0 -.1em; }
body.is-open .hero__name { animation: write 1.9s cubic-bezier(.6, .1, .3, 1) 1.7s forwards, shimmer 7s linear 3.8s infinite; }
body.is-open .hero__name + .hero__amp + .hero__name { animation-delay: 2.5s, 4.6s; }
@keyframes write { to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.hero__amp {
  font-family: var(--num);
  font-weight: 500;
  font-size: .7em;
  line-height: 1;
  color: var(--gold);
  opacity: 0;
  text-shadow: 0 1px 8px rgba(255, 252, 244, .9);
}
body.is-open .hero__amp { animation: fade-in 1.2s ease 2.3s forwards; }
.hero__couple { display: none; white-space: normal; text-align: center; }
.hero__names.is-couple > :not(.hero__couple) { display: none; }
.hero__names.is-couple .hero__couple { display: block; }

/* حول النافذة: الآية فوقها، والاسمان تحتها كلوحةٍ معلّقة */
.hero__above, .hero__below {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  opacity: var(--cap);
  pointer-events: none;
}
.hero__above {
  bottom: calc(100% - var(--t) + 40px);
  transform: translateY(calc((1 - var(--cap)) * 14px));
  max-width: 30ch;
  font-family: var(--title);
  font-size: clamp(1.2rem, 5.4vw, 1.55rem);
  line-height: 1.75;
  color: var(--gold-dp);
  white-space: pre-line;
  text-shadow: 0 0 2px var(--ivory), 0 0 14px var(--ivory), 0 0 26px var(--ivory);
}
.hero__above:empty { display: none; }
.hero__below {
  top: calc(100% - var(--b) + 12px);
  transform: translateY(calc((1 - var(--cap)) * 18px));
}
.hero__plaque {
  margin: 0;
  font-family: var(--title);
  font-size: clamp(2rem, 9vw, 2.7rem);
  line-height: 1.6;
  color: var(--gold-dp);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  white-space: nowrap;
}
.hero__flourish { width: 150px; margin: -4px auto 0; fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; }

@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--bar) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb, 184, 146, 90), 0.55);
  background: rgba(255, 252, 244, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(120, 90, 50, .18);
  color: var(--gold-dp);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.scroll-cue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
body.is-open .scroll-cue { opacity: 1; visibility: visible; transition-delay: 3.6s, 0s; }
body.is-open.scrolled .scroll-cue { opacity: 0; visibility: hidden; transition-delay: 0s, .5s; }

/* ═══════════════ الظهور عند التمرير ═══════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-draw] .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1); }
[data-draw] .d:nth-child(2) { transition-delay: .5s; }
[data-draw] .d:nth-child(3) { transition-delay: .8s; }
[data-draw].in .d { stroke-dashoffset: 0; }
[data-draw] .fill { opacity: 0; transition: opacity 1s ease 1.4s; }
[data-draw].in .fill { opacity: 1; }

.sec-title {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--title);
  font-weight: 400;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  line-height: 1.9;
  color: var(--gold-dp);
}

/* ═══════════════ العهد ═══════════════ */
.vow { position: relative; padding: 18px 16px 40px; text-align: center; }
/* بطاقة العهد: ورقٌ أبيض بحافّة دانتيل مخرّمة أعلاها وأسفلها، وإطارٌ ذهبيّ مزدوج، وغصن ورد في زاويتها */
.vow__card {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 46px 22px 40px;
  background: linear-gradient(180deg, #fffefb, var(--paper));
  box-shadow: 0 30px 60px rgba(120, 90, 50, .12), inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--gold-lt), inset 0 0 0 15px var(--paper), inset 0 0 0 15.8px rgba(var(--gold-rgb, 184, 146, 90), 0.45);
}
.vow__card::before, .vow__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: radial-gradient(circle at 50% 0, var(--paper) 6px, transparent 6.5px) 0 0 / 16px 14px repeat-x;
}
.vow__card::before { top: -13px; transform: scaleY(-1); filter: drop-shadow(0 -2px 2px rgba(120, 90, 50, .06)); }
.vow__card::after { bottom: -13px; }
/* غصن الورد مقتطعٌ من حافّتَي إطار الفيلم العليا واليمنى — فيُلصق بزاوية البطاقة نفسها (حافّتاه على
   حافّتيها) فيبدو خارجاً من الزاوية لا مقصوصاً */
.vow__card .garland { opacity: 1; top: 0; right: 0; width: min(46vw, 220px); }
.filigree { width: min(72vw, 280px); margin: 0 auto 18px; fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; overflow: visible; }
.filigree .fill { fill: var(--gold); stroke: none; }
.lead {
  max-width: 24em;
  margin: 0 auto 30px;
  font-size: clamp(1.14rem, 4.9vw, 1.32rem);
  line-height: 2.15;
  color: var(--ink);
  white-space: pre-line;
}
/* نصّ الدعوة يُكتب كلمةً كلمة */
.lead .w {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i) * 55ms);
}
.lead.in .w { opacity: 1; filter: none; transform: none; }
.families {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.family { display: grid; gap: 2px; }
.family__label { font-size: .84rem; font-weight: 700; color: var(--gold); letter-spacing: .03em; line-height: 1.6; }
.family__name { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.85; }
.families__heart { display: grid; justify-items: center; gap: 6px; align-self: stretch; padding: 4px 0; }
.families__heart i { width: 1px; flex: 1; min-height: 26px; background: linear-gradient(to bottom, transparent, var(--gold), transparent); }
.families__heart b { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4px var(--gold-lt); }

/* ═══════════════ نافذة الموعد (زجاجٌ معشّق تحت الذهب) ═══════════════ */
.when { position: relative; padding: 26px 18px 34px; text-align: center; overflow: hidden; } /* ضوء الزجاج بمنظوره لا يمدّ الصفحة أفقياً */
.script-line {
  margin: 0 0 4px;
  font-family: var(--latin);
  font-size: clamp(2.2rem, 10vw, 2.8rem);
  line-height: 1.4;
  color: var(--gold);
  direction: ltr;
}
.scratch {
  position: relative;
  width: min(76vw, 310px);
  aspect-ratio: 100 / 140;
  margin: 8px auto 0;
}
/* بلا filter على النافذة: Safari يرسم طبقةً مفلترة فيها كانفاس بدقّة منخفضة فتبقى ضبابية —
   الظهور شفافيةٌ وحركة فقط، والظلّ قطعٌ ناقص مموَّه تحتها */
.scratch[data-reveal] { filter: none; }
.scratch::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 90, 50, .28), rgba(120, 90, 50, 0));
  pointer-events: none;
}
/* قناع القوس القوطيّ نفسه على الزجاج وعلى طبقة الذهب */
.scratch__under,
.scratch__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V52C0 23.5 23.5 6 50 0c26.5 6 50 23.5 50 52v88z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V52C0 23.5 23.5 6 50 0c26.5 6 50 23.5 50 52v88z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.scratch__under { overflow: hidden; background: linear-gradient(180deg, #fffdf6, #f8efdc); }
.glass { position: absolute; inset: 0; width: 100%; height: 100%; }
/* الزجاج: وردةٌ ملوّنة في رأس القوس، وحجارةٌ على طوله — تشتعل ألوانها حين يُمسح الذهب */
.glass__panes > * { opacity: .55; transition: opacity 1.8s ease; }
.glass .p1 { fill: #efc27e; }
.glass .p2 { fill: #e3a3ab; }
.glass .p3 { fill: #9fc1dc; }
.glass .p4 { fill: #fbf1dc; }
.glass .p5 { fill: #d9b46a; }
.glass .jewel { fill: none; stroke-width: 4.2; stroke-dasharray: 2.2 2.8; opacity: .45; transition: opacity 1.8s ease; }
.glass .jewel--a { stroke: #9fc1dc; }
.glass .jewel--b { stroke: #e3a3ab; stroke-dashoffset: 2.5; }
.glass__light { opacity: .5; transition: opacity 1.8s ease; }
.glass__lead { fill: none; stroke: #9c7a45; stroke-width: .6; opacity: .8; }
.scratch.is-revealed .glass__panes > * { opacity: 1; }
.scratch.is-revealed .glass .jewel { opacity: .95; }
.scratch.is-revealed .glass__light { opacity: 1; animation: glass-glow 3.5s ease-in-out 2s infinite alternate; }
@keyframes glass-glow { to { opacity: .55; } }
/* الموعد على وسامٍ عاجيّ صافٍ وسط الزجاج */
.date {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 45%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 46% 46% 12px 12px / 22% 22% 12px 12px;
  background: radial-gradient(110% 80% at 50% 48%, rgba(255, 253, 246, .97) 0, rgba(255, 251, 240, .92) 58%, rgba(255, 251, 240, .55) 100%);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb, 184, 146, 90), 0.45), inset 0 0 0 4px rgba(255, 255, 255, .6);
}
.date::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
}
.scratch.is-revealed .date::after { animation: sweep 1.8s ease .5s; }
@keyframes sweep { to { transform: translateX(100%); } }
.scratch__kicker { font-size: .84rem; font-weight: 700; color: var(--gold); line-height: 1.5; }
.sd-wd { font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.6; }
.sd-day {
  font-family: var(--num);
  font-weight: 600;
  font-size: clamp(3.9rem, 19vw, 5rem);
  font-variant-numeric: lining-nums;
  line-height: 1;
  margin: 2px 0;
  background: linear-gradient(180deg, #d6b578, var(--gold-dp));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sd-my { font-size: 1.1rem; font-weight: 700; color: var(--gold-dp); line-height: 1.6; }
.sd-rule { width: 54%; height: 1px; margin: 6px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.sd-time { font-size: .96rem; color: var(--ink-sf); line-height: 1.6; }
.scratch__cv {
  touch-action: none;
  cursor: grab;
  outline: none;
  transition: opacity 1.1s ease, transform 1.1s var(--ease);
}
.scratch.is-revealed .scratch__cv { opacity: 0; transform: scale(1.05); pointer-events: none; }
.scratch__frame {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  overflow: visible;
  pointer-events: none;
}
.scratch__frame path { fill: none; stroke: var(--gold); stroke-width: 1.2; }
/* ضوء الزجاج الملوّن يسقط على الأرض تحت النافذة */
.scratch__beams {
  position: absolute;
  left: -22%;
  right: -22%;
  top: 99%;
  height: 120px;
  z-index: -1;
  background:
    radial-gradient(34% 70% at 26% 0, rgba(188, 212, 230, .75), rgba(188, 212, 230, 0)),
    radial-gradient(30% 80% at 50% 0, rgba(243, 211, 154, .8), rgba(243, 211, 154, 0)),
    radial-gradient(34% 70% at 74% 0, rgba(233, 191, 194, .75), rgba(233, 191, 194, 0));
  filter: blur(10px);
  opacity: 0;
  transition: opacity 2.2s ease .4s;
  pointer-events: none;
}
.scratch.is-revealed .scratch__beams { opacity: 1; animation: beams 4s ease-in-out 2.6s infinite alternate; }
@keyframes beams { to { opacity: .7; } }
.scratch__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 26px auto 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold-dp);
  line-height: 1.6;
}
.scratch__hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: rub 1.8s ease-in-out infinite; }
@keyframes rub { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-8deg); } 75% { transform: translateX(5px) rotate(8deg); } }
.scratch__hint.is-done { opacity: 0 !important; transition: opacity .5s; }

/* «احفظ الموعد» من المنصّة ينتظر مسح النافذة — يكشف الموعد نفسه */
#da3wa-cal.ahd-wait { display: none; }
#da3wa-cal.ahd-show { animation: fade-up 1.2s var(--ease) both; }

/* ═══════════════ الفوانيس ═══════════════ */
.count { padding: 40px 14px 34px; overflow: hidden; } /* هالات الفوانيس لا تمدّ الصفحة أفقياً */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lanterns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: clamp(6px, 2.6vw, 14px);
  max-width: 380px;
  margin: 6px auto 0;
}
.lantern { position: relative; display: grid; justify-items: center; cursor: pointer; }
/* هالةٌ دافئة خلف كل فانوس حين يُضاء */
.lantern::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 170%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 214, 140, .38), rgba(255, 214, 140, 0));
  opacity: 0;
  transition: opacity 1.6s ease;
  transition-delay: calc(var(--n) * .45s + .3s);
  pointer-events: none;
  z-index: -1;
}
.count.in .lantern::before { opacity: 1; }
/* فانوسا الوسط أطول من الطرفين — كفوانيس الممرّ */
.lantern__box { position: relative; width: 82%; aspect-ratio: 80 / 150; }
.lantern:nth-child(2) .lantern__box, .lantern:nth-child(3) .lantern__box { width: 100%; }
.lantern__box::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -5px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 90, 50, .3), rgba(120, 90, 50, 0));
}
.lantern__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* ضوء الشمعة داخل الزجاج */
.lantern__glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 78%;
  aspect-ratio: .78;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 222, 150, .95), rgba(255, 214, 140, .35) 55%, rgba(255, 214, 140, 0));
  opacity: 0;
  transition: opacity 1.4s ease;
  transition-delay: calc(var(--n) * .45s + .3s);
}
.count.in .lantern__glow { opacity: 1; }
.flame {
  position: absolute;
  left: 50%;
  top: 53.3%;
  width: 14%;
  aspect-ratio: .5;
  margin-top: -1px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 74%, #fff 0, #fff6cf 22%, #ffcc6a 52%, rgba(255, 150, 50, 0) 76%);
  box-shadow: 0 0 10px 4px rgba(255, 200, 100, .42), 0 0 30px 12px rgba(255, 210, 130, .2);
  transform: translate(-50%, -100%) scale(0);
  transform-origin: 50% 100%;
  opacity: 0;
}
.flame::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 34%;
  height: 30%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(120, 160, 255, .55), rgba(120, 160, 255, 0) 70%);
}
.count.in .flame { animation: ignite .9s var(--ease) forwards, flame 2.2s ease-in-out .9s infinite; animation-delay: calc(var(--n) * .45s), calc(var(--n) * .45s + .9s); }
.count.in .flame.flare { animation: flare 1s var(--ease), flame 2.2s ease-in-out 1s infinite; opacity: 1; transform: translate(-50%, -100%) scale(1); }
@keyframes ignite { 0% { opacity: 0; transform: translate(-50%, -100%) scale(0); } 60% { opacity: 1; transform: translate(-50%, -100%) scale(1.25, 1.35); } 100% { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
@keyframes flame {
  0%, 100% { opacity: 1; transform: translate(-50%, -100%) scale(1) skewX(0); }
  25% { opacity: 1; transform: translate(-50%, -100%) scale(.96, 1.06) skewX(2deg); }
  50% { opacity: 1; transform: translate(-50%, -100%) scale(1.04, .95) skewX(-1.5deg); }
  75% { opacity: 1; transform: translate(-50%, -100%) scale(.98, 1.04) skewX(1deg); }
}
@keyframes flare { 0% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 30% { opacity: 1; transform: translate(-50%, -100%) scale(1.5, 1.8); } 100% { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.num { display: grid; justify-items: center; margin-top: 12px; }
.num b {
  font-family: var(--num);
  font-weight: 600;
  font-size: clamp(1.15rem, 5.6vw, 1.5rem);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--gold-dp);
}
.num small { margin-top: 3px; font-size: clamp(.58rem, 2.6vw, .7rem); font-weight: 700; color: var(--ink-sf); line-height: 1.2; }

/* ═══════════════ البرنامج ═══════════════ */
.program { padding: 26px 18px 18px; }
.program__list {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.program__list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 19px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}
.program__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.program__dot {
  position: relative;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(120, 90, 50, .1);
}
.program__dot::after {
  content: "";
  width: 8px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff 0, #ffd47a 50%, rgba(255, 160, 60, 0) 78%);
  box-shadow: 0 0 10px 3px rgba(255, 200, 100, .35);
  animation: dot-flame 2.2s ease-in-out infinite;
}
@keyframes dot-flame { 50% { transform: scale(.94, 1.08); opacity: .85; } }
.program__item:nth-child(2n) .program__dot::after { animation-delay: -.7s; }
.program__time { display: block; font-size: .9rem; font-weight: 700; color: var(--gold); line-height: 1.5; }
.program__title { display: block; font-size: 1.08rem; font-weight: 700; color: var(--ink); line-height: 1.7; }

/* ═══════════════ المكان ═══════════════ */
.venue { padding: 30px 18px 18px; }
.venue__card {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
  padding: 54px 22px 30px;
  text-align: center;
  border-radius: 170px 170px 22px 22px;
  background: linear-gradient(180deg, #fffefa, var(--paper) 40%, #fbf3e3);
  border: 1px solid var(--line);
  box-shadow: 0 22px 40px rgba(120, 90, 50, .12), inset 0 0 0 6px rgba(255, 255, 255, .7), inset 0 0 0 7px rgba(var(--gold-rgb, 184, 146, 90), 0.18);
}
.venue__arch svg { width: 40px; height: 50px; margin: 0 auto 6px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.venue__arch circle { fill: var(--gold); stroke: none; }
.venue__k { display: block; font-size: .82rem; font-weight: 700; color: var(--gold); line-height: 1.6; }
.venue__name { margin: 2px 0 0; font-family: var(--title); font-size: clamp(1.45rem, 6.4vw, 1.75rem); color: var(--ink); line-height: 1.9; }
.venue__addr { margin: 0; font-size: 1rem; color: var(--ink-sf); line-height: 1.8; }
.venue__addr:empty { display: none; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #cfac6d, var(--gold) 55%, #a07c45);
  color: #fffaf0;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(var(--gold-dp-rgb, 138, 106, 58), 0.28), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .18s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn--soft { background: var(--paper); color: var(--gold-dp); border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(120, 90, 50, .1); }

/* ═══════════════ التنويهات: قائمةٌ بأرقام لاتينية ذهبية، بلا صناديق ═══════════════ */
.notes { padding: 24px 22px 6px; }
.notes__list { max-width: 380px; margin: 0 auto; padding: 0; list-style: none; counter-reset: note; }
.note {
  counter-increment: note;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.note:last-child { border-bottom: 0; }
.note::before {
  content: counter(note, upper-roman);
  font-family: var(--num);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  text-align: center;
}
.note p { margin: 0; font-size: 1.04rem; font-weight: 700; color: var(--ink); line-height: 1.8; }
.contact { padding: 18px 18px 4px; text-align: center; }
.contact__label { display: block; font-size: .86rem; font-weight: 700; color: var(--ink-sf); line-height: 1.6; }
.contact .btn { margin-top: 8px; }

/* ═══════════════ الختام: الأبواب المفتوحة حيّة ═══════════════ */
.closing {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: grid;
  place-items: center;
  margin-top: 30px;
  overflow: hidden;
  isolation: isolate;
}
.closing__film {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.closing.in .closing__film { animation: doors-in 6s var(--ease) both; }
@keyframes doors-in { from { transform: scale(1.12); } to { transform: none; } }
.closing__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--ivory) 0%, rgba(251, 247, 239, 0) 20%, rgba(251, 247, 239, 0) 72%, var(--ivory) 100%),
    radial-gradient(62% 30% at 50% 54%, rgba(var(--ivory-rgb, 251, 247, 239), 0.82) 0, rgba(251, 247, 239, 0) 100%);
}
.closing__body { position: relative; padding: 40px 24px; text-align: center; max-width: 380px; }
.closing__note { margin: 0; font-size: clamp(1.3rem, 5.6vw, 1.55rem); font-weight: 700; color: var(--ink); line-height: 1.9; text-shadow: 0 1px 12px rgba(255, 252, 244, .95); white-space: pre-line; }
.closing__names {
  margin: 4px 0 0;
  font-family: var(--title);
  font-size: clamp(2.3rem, 11vw, 3.2rem);
  line-height: 1.8;
  color: var(--gold-dp);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 0 18px rgba(255, 250, 236, .95);
  overflow-wrap: anywhere;
}
.closing__fam { margin: 2px 0 0; font-size: 1rem; font-weight: 700; color: var(--ink-sf); line-height: 1.8; white-space: pre-wrap; text-shadow: 0 1px 10px rgba(255, 252, 244, .95); }
.closing__tag { margin: 8px 0 0; font-family: var(--num); font-style: italic; font-size: 1.15rem; color: var(--gold-dp); line-height: 1.6; direction: ltr; unicode-bidi: plaintext; }
.closing__note:empty, .closing__fam:empty, .closing__tag:empty { display: none; }

/* أقسام المنصّة المحقونة فوق طبقة الأضواء */
#da3wa-rsvp, #da3wa-note, #da3wa-cal { position: relative; z-index: 2; }

@media (min-width: 720px) {
  body { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .journey { height: auto; }
  .hero { position: relative; }
  .hero__name { clip-path: none; }
  .lead .w, [data-reveal] { opacity: 1; transform: none; filter: none; }
  .bokeh { display: none; }
}