:root {
  --ink: #111184;          /* dark blue — all text */
  --gold: #bd9a3f;         /* ornament / accent gold */
  --cream: #fbf8f1;
  --panel: rgba(252, 250, 244, 0.86);
  --panel-border: rgba(189, 154, 63, 0.45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  background: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Layer 0: background video ---------- */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* subtle cream tint to unify the palette + lift text contrast */
.bg-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(251, 248, 241, 0.35), rgba(251, 248, 241, 0.7)),
    linear-gradient(rgba(251, 248, 241, 0.25), rgba(238, 244, 250, 0.4));
}

/* ---------- Layer 1: ambient ornaments ---------- */
.ornaments {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.orn { position: absolute; color: var(--gold); }

.orn-corner { width: clamp(64px, 14vw, 130px); height: auto; }
.orn-tl { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }
.orn-tr { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }

.orn-lantern { width: clamp(26px, 6vw, 44px); height: auto; opacity: 0.8; }
.orn-lantern-l { top: 0; left: clamp(14px, 16vw, 12%); }
.orn-lantern-r { top: 0; right: clamp(14px, 16vw, 12%); }

.orn-moon { width: clamp(40px, 9vw, 76px); height: auto; bottom: clamp(18px, 5vh, 48px); left: clamp(14px, 5vw, 56px); opacity: 0.85; }
.orn-star { width: clamp(12px, 2.6vw, 20px); height: auto; opacity: 0.75; }
.orn-star1 { bottom: clamp(70px, 13vh, 130px); left: clamp(56px, 15vw, 130px); }
.orn-star2 { top: clamp(120px, 22vh, 220px); right: clamp(24px, 8vw, 90px); opacity: 0.6; }
.orn-star3 { bottom: clamp(28px, 8vh, 80px); right: clamp(30px, 10vw, 120px); opacity: 0.55; }

/* ---------- Layer 2: content ---------- */
.invite {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(28px, 8vw, 56px) clamp(16px, 5vw, 28px);
}
/* roomier box from tablet up */
@media (min-width: 600px) {
  .invite { max-width: 560px; }
}
@media (min-width: 960px) {
  .invite { max-width: 640px; padding-top: 72px; padding-bottom: 72px; }
}
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 28px 28px 22px 22px;
  padding: clamp(30px, 7vw, 56px) clamp(20px, 6vw, 48px);
  text-align: center;
  box-shadow: 0 18px 50px -20px rgba(17, 17, 132, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Bismillah — Arabic */
.bismillah {
  font-family: "Amiri", serif;
  font-size: clamp(1.7rem, 8.5vw, 2.5rem);
  line-height: 1.7;
  margin: 0 0 1.4em;
}

/* invite words (2b, 2f, 2h share styling) */
.invite-words {
  font-size: clamp(1rem, 4.3vw, 1.14rem);
  line-height: 1.85;
  margin: 0 auto 1.5em;
  max-width: 34ch;
}
.doa { font-weight: 500; }

/* title (2c) — biggest */
.title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 11.5vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: 0;
  margin: 0.2em 0 0.15em;
}

.subtitle {
  font-size: clamp(0.95rem, 4vw, 1.1rem);
  font-style: italic;
  margin: 0 0 0.7em;
  opacity: 0.9;
}

/* name (2e) — second biggest */
.name {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 7.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.1em 0 0.9em;
}

/* dividers */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
  font-size: 0.9rem;
  margin: 1.4em auto;
  max-width: 220px;
}
.divider span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

/* detail rows (2g) */
.details { list-style: none; margin: 0.4em 0; padding: 0; text-align: left; display: inline-block; }
.detail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 1.3em;
}
.detail-row:last-child { margin-bottom: 0; }
.detail-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  place-items: center;
}
.detail-icon svg { width: 22px; height: 22px; }
.detail-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.detail-value {
  display: block;
  font-weight: 600;
  font-size: clamp(0.98rem, 4vw, 1.1rem);
  line-height: 1.35;
}

/* salam (2i) — smallest */
.salam {
  font-style: italic;
  font-size: clamp(0.82rem, 3.5vw, 0.92rem);
  line-height: 1.6;
  margin: 1.6em auto 0.4em;
  opacity: 0.9;
}

/* footer (2j) */
.sign { margin-top: 1.6em; }
.sign-lead { font-size: 0.95rem; margin: 0 0 0.3em; }
.sign-family { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.2em; }
.sign-names {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  margin: 0;
}

/* ---------- entrance animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}