/* ═══════════════════════════════════════════════════════════════════════
   الحديقة المقدسة — عدنان ومروة
   Photoreal envelope opening · torn-paper cards · gold script · RTL Arabic
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (pulled from the envelope artwork) ─────────────── */
  --cream: #f7efdf;
  /* page background */
  --cream-hi: #fbf5e9;
  --ink: #4a3a33;
  /* warm grey-brown body text */
  --ink-soft: #5f4a3d;
  /* muted — 7.25:1 على الكريمي، يحتمل النقشة تحته */
  --burgundy: #7a1e28;
  /* wax */
  --burgundy-dk: #591319;
  --gold: #9d7530;
  /* ornaments/icons only — 3.66:1 على الكريمي */
  --gold-ink: #7d5615;
  /* gold TEXT — 5.71:1 على الكريمي و4.72:1 فوق أغمق مواضع النقشة الزهرية */
  --gold-soft: #d9c489;

  /* ── Type ────────────────────────────────────────────────────── */
  --f-script: "Aref Ruqaa", "Amiri", serif;
  /* gold script headings */
  --f-body: "Amiri", "Times New Roman", serif;
  --f-ui: "Reem Kufi", "Segoe UI", system-ui, sans-serif;
  /* الأرقام (لاتينية) بخطّ النصّ العربي نفسه — Amiri */
  --f-num: "Amiri", "Times New Roman", serif;

  /* ── Rhythm ──────────────────────────────────────────────────── */
  --col: min(92vw, 30rem);
  /* the narrow invitation column */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.9;
  font-size: clamp(1rem, .5vw + .92rem, 1.15rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body::before {
  /* soft vignette light */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 70% at 50% 0%, rgba(251, 245, 233, .9), transparent 55%);
}

body.is-locked {
  overflow: hidden;
  height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
   1) THE OPENING — glowing seal → golden seam-light → zoom → dissolve
   (the seal stays centered and glows; the whole envelope zooms & dissolves)
   ═══════════════════════════════════════════════════════════════════════ */
.opening {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2rem;
  background: var(--cream);
  padding: 4svh 6vw;
  /* الذوبان إلى البطاقة الرئيسية يبدأ في منتصف اللقطة */
  transition: opacity 1.3s ease 2.5s, visibility 0s linear 3.8s;
}

/* النقشة الزهرية نفسها خلف الظرف — z-index سالب لتبقى تحت الظرف والنصّ */
.opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../assets/floral-tile.webp") repeat;
  background-size: clamp(280px, 52vw, 400px);
  mix-blend-mode: multiply;
  opacity: .42;
}

.opening.is-opening {
  opacity: 0;
}

.opening.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.env-stage {
  position: relative;
  height: min(80svh, 760px);
  aspect-ratio: 941 / 1672;
  max-width: 90vw;
  isolation: isolate;
  /* احتواء مزج الإضاءة داخل المسرح */
  transform-origin: 49.6% 51.3%;
  /* مركز الختم الشمعي */
  transition: transform 3.3s cubic-bezier(.42, 0, .22, 1) .3s, filter 2.6s ease .4s;
}

.opening.is-opening .env-stage {
  transform: scale(2.55);
  filter: brightness(1.07);
}

.env-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 0 34px 70px -30px rgba(89, 19, 25, .35), 0 8px 24px rgba(74, 58, 51, .12);
}

/* تنفّس خفيف قبل الفتح (يتراكب مع تكبير المسرح) */
@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.014);
  }
}

.opening:not(.is-opening) .env-img {
  animation: breathe 6s var(--ease) infinite;
}

/* ضوء ذهبي يتدفّق على طول طيّات الظرف الأربع (شكل X) */
.env-seams {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.env-seams .beam {
  position: absolute;
  left: 49.6%;
  top: 51.3%;
  width: 8.5%;
  height: 150%;
  translate: -50% -50%;
  background: linear-gradient(to bottom,
      rgba(255, 206, 128, 0) 0%,
      rgba(255, 214, 150, .8) 40%,
      rgba(255, 243, 212, 1) 50%,
      rgba(255, 214, 150, .8) 60%,
      rgba(255, 206, 128, 0) 100%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.1s ease .45s, height 2.6s ease .45s;
}

.beam--a {
  rotate: 29.4deg;
}

/* طيّة أعلى-اليسار ↔ أسفل-اليمين */
.beam--b {
  rotate: -29.4deg;
}

/* طيّة أعلى-اليمين ↔ أسفل-اليسار */
.opening.is-opening .env-seams .beam {
  opacity: 1;
  height: 200%;
}

/* هالة دافئة تتفتّح حول الختم */
.env-halo {
  position: absolute;
  left: 49.6%;
  top: 51.3%;
  z-index: 3;
  width: 62%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 228, 158, .95) 0%,
      rgba(255, 205, 120, .5) 32%,
      rgba(255, 190, 100, 0) 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .8s ease, transform 2.9s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.opening.is-opening .env-halo {
  opacity: 1;
  transform: scale(1.95);
}

/* فيضان الضوء النهائي قبل الذوبان */
.env-flash {
  position: absolute;
  left: 49.6%;
  top: 51.3%;
  z-index: 4;
  width: 130%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 250, 238, 1) 0%,
      rgba(255, 244, 224, .7) 24%,
      rgba(255, 240, 214, 0) 58%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease 1.5s;
  pointer-events: none;
}

.opening.is-opening .env-flash {
  opacity: .95;
}

.open-hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 7px;
}

.open-hit:focus-visible {
  outline: 2px dashed var(--gold);
  outline-offset: 6px;
}

.open-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: var(--ink-soft);
  font-family: var(--f-ui);
  font-size: .85rem;
  transition: opacity .5s ease;
}

.open-hint .chevron {
  width: 18px;
  height: 11px;
  color: var(--gold);
  animation: nudge 1.8s var(--ease) infinite;
}

.opening.is-opening .open-hint {
  opacity: 0;
}

@keyframes nudge {

  0%,
  100% {
    transform: translateY(0);
    opacity: .7;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Shared column + paper cards + headings
   ═══════════════════════════════════════════════════════════════════════ */
.invitation {
  position: relative;
  z-index: 1;
  /* خلفية صريحة: عناصر mix-blend-mode تمتزج داخل سياق التراص هذا */
  background: var(--cream);
}

/* ═══════════════════════════════════════════════════════════════════════
   الخلفية الزهرية — نقشة متكرّرة ناعمة + باقات كبيرة على طرفَي العمود
   الرسمات على ورق أبيض، وmix-blend-mode: multiply يذيب الأبيض في الكريمي
   ═══════════════════════════════════════════════════════════════════════ */
.invitation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/floral-tile.webp") repeat;
  background-size: clamp(300px, 56vw, 440px);
  mix-blend-mode: multiply;
  opacity: .55;
}

/* عمود بعرض البطاقة تقريبًا، فتبقى الباقات ملتصقة بالنصّ لا بحواف الشاشة */
.bloom-field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100vw, 46rem);
  z-index: 0;
  pointer-events: none;
}

.bloom {
  position: absolute;
  mix-blend-mode: multiply;
  opacity: .38;
}

/* توزيع الباقات على طول الصفحة — نسبة من ارتفاع الدعوة كلّها */
.bloom:nth-child(1) {
  top: 18.5%;
  inset-inline-end: -21%;
  width: 56%;
  rotate: -8deg;
}

.bloom:nth-child(2) {
  top: 24%;
  inset-inline-start: -24%;
  width: 52%;
  rotate: 171deg;
}

.bloom:nth-child(3) {
  top: 29.5%;
  inset-inline-end: -9%;
  width: 22%;
  rotate: 14deg;
  opacity: .3;
}

.bloom:nth-child(4) {
  top: 34%;
  inset-inline-end: -23%;
  width: 54%;
  rotate: 6deg;
}

.bloom:nth-child(5) {
  top: 41%;
  inset-inline-start: -22%;
  width: 50%;
  rotate: 186deg;
}

.bloom:nth-child(6) {
  top: 48.5%;
  inset-inline-end: -25%;
  width: 55%;
  rotate: -5deg;
}

.bloom:nth-child(7) {
  top: 55%;
  inset-inline-start: -8%;
  width: 20%;
  rotate: -18deg;
  opacity: .28;
}

.bloom:nth-child(8) {
  top: 59%;
  inset-inline-start: -24%;
  width: 52%;
  rotate: 168deg;
}

.bloom:nth-child(9) {
  top: 67%;
  inset-inline-end: -22%;
  width: 50%;
  rotate: 9deg;
  opacity: .32;
}

.bloom:nth-child(10) {
  top: 76%;
  inset-inline-start: -23%;
  width: 53%;
  rotate: 178deg;
}

.bloom:nth-child(11) {
  top: 84%;
  inset-inline-end: -7%;
  width: 21%;
  rotate: 22deg;
  opacity: .3;
}

.bloom:nth-child(12) {
  top: 90%;
  inset-inline-end: -24%;
  width: 54%;
  rotate: -7deg;
}

.column {
  width: var(--col);
  margin-inline: auto;
  padding-block: clamp(2.2rem, 6vw, 3.5rem);
  text-align: center;
  position: relative;
}

/* ورقة ممزّقة الحواف — الصورة تُشدّ على كامل البطاقة */
.paper-card {
  position: relative;
  background-image: url("../assets/paper-card.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: clamp(2.6rem, 9vw, 3.8rem) clamp(1.6rem, 7vw, 2.6rem);
  /* drop-shadow يتبع حواف الورقة الممزّقة (قناة ألفا) */
  filter: drop-shadow(0 16px 24px rgba(74, 58, 51, .14));
}

/* العناوين الذهبية */
.script-title {
  font-family: var(--f-script);
  font-weight: 700;
  color: var(--gold-ink);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  line-height: 1.5;
  margin: 0 0 .35em;
}

.script-title--sm {
  font-size: clamp(1.35rem, 5.5vw, 1.8rem);
  margin-top: 1.1em;
}

.script-title--sm:first-of-type {
  margin-top: 0;
}

.flourish {
  width: 110px;
  height: 22px;
  margin: .1rem auto 1rem;
  /* خطّه رفيع (1.1px) فيحتاج اللون الأغمق ليُرى فوق الورد */
  color: var(--gold-ink);
}

.flourish svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── وضوح النصّ فوق النقشة الزهرية ────────────────────────────────
   ظلّ نصّي يفصل الحروف عن الورد، وخلفه هالة كريمية ناعمة (مستطيل
   مموّه) تُهدّئ النقشة تحت كتلة النصّ وحدها فيبقى الورد حولها كما هو.
   نصوص البطاقات الورقية مستثناة لأنّها فوق ورق معتم أصلًا. */
.haloed {
  position: relative;
  /* يُبقي z-index السالب داخل العنصر بدل هروبه تحت النقشة */
  isolation: isolate;
  text-shadow: 0 1px 8px rgba(251, 245, 233, .95);
}

.haloed::before {
  content: "";
  position: absolute;
  inset: -.32em -.7em;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(250, 244, 232, .9);
  filter: blur(17px);
}

/* الظهور عند التمرير */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.chevron {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   2) HERO — قوس الحديقة (خلفية صورة + أسماء ذهبية)
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
  /* أبعاد الصورة بعد الاقتصاص (cover) — الصورة 1400×2508 */
  --img-w: max(100vw, 55.82svh);
  --img-h: max(100svh, 179.14vw);
  /* فتحة القوس = 43% من عرض الصورة، ومركزها عند 58.5% من ارتفاعها */
  --arch-w: min(calc(var(--img-w) * .43), 32rem);
  --arch-cy: min(calc(var(--img-h) * .285 + 30svh), 60svh);

  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* حجاب ناعم يرفع وضوح النص فوق الصورة */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(72% 50% at 50% 44%, rgba(251, 245, 233, .74), rgba(251, 245, 233, 0) 74%),
    linear-gradient(to bottom, rgba(251, 245, 233, .3), rgba(251, 245, 233, 0) 24%);
}

/* يجلس داخل فتحة القوس تمامًا — عرضًا وارتفاعًا */
.hero-inner {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--arch-cy);
  translate: -50% -50%;
  width: var(--arch-w);
  max-width: calc(100vw - 2 * var(--pad));
}

.hero-bism {
  font-family: var(--f-body);
  color: var(--burgundy);
  font-size: clamp(.9rem, calc(var(--arch-w) * .088), 1.22rem);
  line-height: 1.5;
  margin: 0 0 .9rem;
  text-shadow: 0 1px 12px rgba(251, 245, 233, .95);
}

/* الآية داخل القوس — هالة كريمية للوضوح فوق الصورة */
.hero .ayah-text {
  color: var(--burgundy-dk);
  font-size: clamp(.85rem, calc(var(--arch-w) * .080), 1.2rem);
  line-height: 2;
  margin: 0 0 .6rem;
  text-shadow:
    0 1px 12px rgba(251, 245, 233, .95),
    0 0 26px rgba(251, 245, 233, .9);
}

.hero .ayah-ref {
  /* صغير وفوق الصورة — الذهبي لا يكفيه، فيأخذ لون البسملة */
  color: var(--burgundy);
  font-size: clamp(.7rem, calc(var(--arch-w) * .062), .9rem);
  line-height: 1.5;
  margin: 0 0 1.3rem;
  text-shadow: 0 1px 12px rgba(251, 245, 233, .95);
}

.hero-eyebrow {
  font-family: var(--f-script);
  color: var(--gold-ink);
  font-size: clamp(1.1rem, calc(var(--arch-w) * .135), 1.85rem);
  line-height: 1.45;
  margin: 0 0 .1rem;
  text-shadow: 0 1px 12px rgba(251, 245, 233, .95);
}

.hero-date {
  font-family: var(--f-num);
  color: var(--burgundy);
  font-size: clamp(.9rem, calc(var(--arch-w) * .088), 1.25rem);
  letter-spacing: .03em;
  line-height: 1.5;
  margin: 0 0 1.2rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(251, 245, 233, .95);
}

.couple {
  font-family: var(--f-script);
  font-weight: 700;
  color: var(--gold-ink);
  margin: 0;
  line-height: 1.12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .04em;
  font-size: clamp(2.1rem, calc(var(--arch-w) * .27), 4.6rem);
  text-shadow: 0 2px 18px rgba(251, 245, 233, .9), 0 1px 2px rgba(120, 90, 30, .25);
}

.couple .amp {
  font-size: .48em;
  color: var(--burgundy);
  margin: .02em 0;
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.6rem, 5vh, 3rem);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--gold-ink);
  font-family: var(--f-ui);
  font-size: .78rem;
  text-shadow: 0 1px 10px rgba(251, 245, 233, .95);
}

.scroll-cue .chevron {
  width: 18px;
  height: 11px;
  color: var(--gold-ink);
  animation: nudge 1.8s var(--ease) infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   3) BLESSING — الوعد والآية ونصّ الدعوة على الكريمي
   ═══════════════════════════════════════════════════════════════════════ */
.blessing {
  text-align: center;
  padding-top: clamp(3rem, 9vw, 5.5rem);
}

.vow {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-family: var(--f-script);
  color: var(--gold-ink);
  font-size: clamp(1.4rem, 5.5vw, 1.95rem);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.ayah-text {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 2.1;
  color: var(--burgundy);
  margin: 0 0 .4rem;
}

.ayah-ref {
  font-family: var(--f-num);
  color: var(--gold-ink);
  font-size: .9rem;
  margin: 0 0 1.4rem;
}

.invite-note {
  color: var(--ink);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   4) COUNTDOWN — على الكريمي مباشرة
   ═══════════════════════════════════════════════════════════════════════ */
.cd-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.35rem, 2vw, .9rem);
  margin-top: .6rem;
}

.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(3rem, 16vw, 4.6rem);
}

.cd-num {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(2rem, 10vw, 3.2rem);
  line-height: 1.1;
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}

.cd-label {
  font-family: var(--f-ui);
  font-size: clamp(.68rem, 2.4vw, .85rem);
  color: var(--ink-soft);
  margin-top: .3rem;
}

.cd-sep {
  font-family: var(--f-script);
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  color: var(--gold);
  line-height: 1.4;
}

.cd-done {
  font-family: var(--f-script);
  font-size: clamp(1.3rem, 6vw, 2rem);
  color: var(--burgundy);
  margin: .5rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   5) SCHEDULE — خيط عموديّ ووردة
   ═══════════════════════════════════════════════════════════════════════ */
.timeline {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 44px;
  inset-inline-start: 50%;
  width: 1px;
  transform: translateX(50%);
  background: color-mix(in srgb, var(--ink-soft) 45%, transparent);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  /* عمود أوسط يتّسع للوردة */
  align-items: center;
  padding-block: 1.15rem;
}

.tl-time {
  grid-column: 1;
  text-align: end;
  font-family: var(--f-num);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  padding-inline-end: .4rem;
  font-variant-numeric: tabular-nums;
}

.tl-title {
  grid-column: 3;
  text-align: start;
  font-family: var(--f-body);
  color: var(--ink-soft);
  font-size: clamp(1rem, 3.8vw, 1.2rem);
  padding-inline-start: .4rem;
}

.tl-dot {
  grid-column: 2;
  justify-self: center;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--gold-ink);
  box-shadow: 0 0 0 3px var(--cream-hi);
  z-index: 1;
}

.tl-rose {
  grid-column: 2;
  justify-self: center;
  width: 62px;
  z-index: 1;
}

.tl-rose img {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   6) LOCATION
   ═══════════════════════════════════════════════════════════════════════ */
.loc-venue {
  font-family: var(--f-body);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.35rem, 5.2vw, 1.7rem);
  margin: .5rem 0 1.4rem;
}

/* سطور العنوان — أوضح وأقرب بعضها من بعض لتُقرأ ككتلة واحدة */
.loc-address {
  color: var(--ink);
  margin: 0 0 .3rem;
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  line-height: 1.85;
  letter-spacing: .01em;
}

.venue-art {
  width: min(88%, 22rem);
  margin: 0 auto 1.6rem;
  /* خلفية الورق الفاتحة في الرسمة تذوب في النقشة الزهرية بدل أن تحجبها */
  mix-blend-mode: multiply;
}

.map-frame {
  position: relative;
  width: min(88%, 20rem);
  margin: 0 auto .8rem;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  padding: 6px;
  background: var(--cream-hi);
  box-shadow: 0 14px 26px -16px rgba(74, 58, 51, .3);
}

.map-frame::before,
.map-frame::after {
  /* زخرفة ذهبية أعلى/أسفل الإطار */
  content: "❦";
  position: absolute;
  inset-inline-start: 50%;
  translate: 50% 0;
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
  background: var(--cream);
  padding-inline: .5rem;
}

.map-frame::before {
  top: -0.6em;
}

.map-frame::after {
  bottom: -0.6em;
}

.map-frame iframe {
  width: 100%;
  height: 230px;
  border: 0;
  border-radius: 6px;
  display: block;
}

.map-open {
  font-family: var(--f-ui);
  font-size: .9rem;
  color: var(--gold-ink);
  text-underline-offset: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   7) DETAILS — أكاليل الورد على الزوايا
   ═══════════════════════════════════════════════════════════════════════ */
.garland-card {
  overflow: visible;
}

.garland {
  position: absolute;
  width: clamp(120px, 42%, 190px);
  pointer-events: none;
  /* يُذيب الخلفية البيضاء للأكاليل في الورق/الخلفية */
  mix-blend-mode: multiply;
}

.garland--top {
  top: -8%;
  inset-inline-end: -10%;
  transform: rotate(6deg);
}

.garland--bottom {
  bottom: -8%;
  inset-inline-start: -10%;
  transform: rotate(186deg);
}

.detail-body {
  margin: 0 0 .6rem;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   8) RSVP — ختم الشمع
   ═══════════════════════════════════════════════════════════════════════ */
/* الصورة الظلّية تلتصق بالأسماء فوقها */
.rsvp {
  padding-bottom: .5rem;
}

.rsvp-lead {
  color: var(--ink-soft);
  margin: 0 auto 1.6rem;
  max-width: 24rem;
}

.seal-btn {
  width: clamp(120px, 38vw, 170px);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  transition: transform .45s var(--ease);
  filter: drop-shadow(0 10px 16px rgba(89, 19, 25, .35));
}

.seal-btn:hover {
  transform: scale(1.05) rotate(2deg);
}

.seal-btn:focus-visible {
  outline: 2px dashed var(--gold);
  outline-offset: 8px;
  border-radius: 50%;
}

.seal-btn img {
  width: 100%;
}

.open-hint--static {
  margin-top: .7rem;
}

.rsvp-form-wrap {
  margin-top: 1.8rem;
}

.rsvp-form {
  text-align: start;
  display: grid;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.field label,
.field-legend {
  font-family: var(--f-ui);
  font-size: .88rem;
  color: var(--gold-ink);
}

.field input,
.field textarea {
  font-family: var(--f-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--cream-hi);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: .7em .9em;
  width: 100%;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.choice {
  flex: 1 1 11rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--cream-hi);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: .6em .9em;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: .98rem;
  transition: background .25s, border-color .25s;
}

.choice:has(input:checked) {
  background: color-mix(in srgb, var(--gold-soft) 30%, var(--cream-hi));
  border-color: var(--gold);
}

.choice input {
  accent-color: var(--burgundy);
  width: 1.05em;
  height: 1.05em;
}

.btn-submit {
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 500;
  background: linear-gradient(140deg, #953240, var(--burgundy));
  color: var(--gold-soft);
  border: 1px solid rgba(217, 196, 137, .4);
  border-radius: 999px;
  padding: .85em 1.6em;
  cursor: pointer;
  justify-self: center;
  transition: transform .3s var(--ease);
  box-shadow: 0 12px 24px -12px rgba(89, 19, 25, .6);
}

.btn-submit:hover {
  transform: translateY(-2px);
}

.btn-submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.rsvp-fallback {
  text-align: center;
  font-family: var(--f-ui);
  font-size: .85rem;
  color: var(--ink-soft);
  margin: 0;
}

.rsvp-fallback a {
  color: var(--gold-ink);
  text-underline-offset: 3px;
}

.rsvp-status {
  text-align: center;
  min-height: 1.2em;
  font-family: var(--f-ui);
  font-size: .9rem;
  color: var(--burgundy);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   9) FOOTER — صورة العروسين مع الأكاليل
   ═══════════════════════════════════════════════════════════════════════ */
.footer {
  padding-top: 0;
  padding-bottom: clamp(3rem, 10vw, 5rem);
}

.footer-couple {
  font-family: var(--f-body);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  margin: 0 0 .4rem;
}

.couple-photo {
  position: relative;
  margin: 0 auto 1.6rem;
  width: min(88%, 22rem);
  /* الصورة الظلّية شبه شفّافة — هالة كريمية تمنع ظهور الورد من خلالها */
  background: radial-gradient(58% 54% at 50% 56%, var(--cream) 48%, rgba(247, 239, 223, 0) 80%);
}

/* الصورة الظلّية — خلفيّتها شفّافة في الملف نفسه، فتجلس على الكريمي بلا إطار */
.couple-photo>img:first-child {
  width: 100%;
  display: block;
}

.garland--photo-start {
  bottom: -5%;
  inset-inline-start: -14%;
  width: clamp(120px, 48%, 190px);
}

.garland--photo-end {
  top: auto;
  bottom: -5%;
  inset-inline-end: -14%;
  transform: scaleX(-1);
  width: clamp(120px, 48%, 190px);
}

.footer-note {
  font-family: var(--f-ui);
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   موسيقى الخلفية — زرّ التبديل العائم
   ═══════════════════════════════════════════════════════════════════════ */
.music-toggle {
  position: fixed;
  z-index: 90;
  inset-block-end: clamp(1rem, 3vw, 1.6rem);
  inset-inline-end: clamp(1rem, 3vw, 1.6rem);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(217, 196, 137, .5);
  background: radial-gradient(circle at 35% 30%, #953240, var(--burgundy) 78%);
  box-shadow: 0 8px 18px -8px rgba(89, 19, 25, .6);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s, filter .3s ease;
}

.music-toggle.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.music-toggle:hover {
  filter: brightness(1.09);
}

.music-toggle:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.music-ico {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.music-ico .wave {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold-soft);
  transition: height .3s ease, opacity .3s ease;
}

.music-toggle.is-playing .music-ico .wave {
  animation: eq 1s ease-in-out infinite;
}

.music-toggle.is-playing .music-ico .wave:nth-child(2) {
  animation-delay: .28s;
}

.music-toggle.is-playing .music-ico .wave:nth-child(3) {
  animation-delay: .55s;
}

@keyframes eq {

  0%,
  100% {
    height: 5px;
  }

  50% {
    height: 16px;
  }
}

/* حالة الكتم: أعمدة ثابتة + شرطة مائلة */
.music-toggle:not(.is-playing) .music-ico .wave {
  height: 5px;
  opacity: .5;
}

.music-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--gold-soft);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  transition: opacity .3s ease;
}

.music-toggle:not(.is-playing)::after {
  opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive + reduced motion
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .cd-sep {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .opening:not(.is-opening) .env-stage {
    animation: none;
  }
}