/* ============================================================
   القلعة المسحورة — Enchanted Castle Wedding (candidate A)
   Whimsical vibrant storybook · magical twilight · rose+turquoise+gold
   ============================================================ */

:root {
  /* enchanted twilight sky stops */
  --sky-top: #3a1f6e;      /* deep violet (matches html+theme-color) */
  --sky-mid: #7b3a8e;      /* magenta */
  --sky-rose: #c85a9c;     /* rose */
  --sky-turq: #4bb8c9;     /* turquoise */
  --sky-gold: #ffcf8a;     /* warm gold horizon */

  --violet: #3a1f6e;
  --violet-2: #4a2a82;
  --plum: #5c2f7a;

  --gold: #ffd98a;
  --gold-deep: #f2b544;
  --gold-soft: #fff1cf;
  --rose: #ff9ecf;
  --rose-deep: #e86fb0;
  --turq: #7fe6da;
  --turq-deep: #43cbc0;

  --cream: #fff4e6;
  --text: #fff2fb;
  --text-dim: #e9d4f2;
  --lilac: #d9c2ff;
  --lilac-dim: #b79ae6;

  --radius: 20px;
  --maxw: 640px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html {
  /* MUST match the sky's top color so no iOS status-bar seam */
  background: var(--sky-top);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sky-top);
  color: var(--text);
  font-family: "Tajawal", "El Messiri", system-ui, sans-serif;
  line-height: 1.85;
  overflow-x: hidden;
  letter-spacing: normal;
}

body.locked { overflow: hidden; height: 100dvh; }

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

/* ---------- the enchanted twilight sky (shared) ---------- */
.cover, .scene {
  background:
    radial-gradient(120% 80% at 50% 108%, var(--sky-gold) 0%, rgba(255,207,138,0) 42%),
    radial-gradient(130% 70% at 50% 96%, var(--sky-turq) 0%, rgba(75,184,201,0) 46%),
    linear-gradient(180deg,
      var(--sky-top) 0%,
      #4a2a82 26%,
      var(--sky-mid) 50%,
      var(--sky-rose) 72%,
      #e88bb0 86%,
      var(--sky-gold) 100%);
}

/* soft aurora ribbon */
.aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 30% 22%, rgba(127,230,218,.30), transparent 70%),
    radial-gradient(55% 38% at 72% 30%, rgba(255,158,207,.28), transparent 70%),
    radial-gradient(50% 34% at 50% 14%, rgba(217,194,255,.26), transparent 70%);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: auroraDrift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.aurora-sm { opacity: .8; }
@keyframes auroraDrift {
  0% { transform: translateX(-3%) translateY(0) scale(1.02); opacity: .8; }
  100% { transform: translateX(4%) translateY(-2%) scale(1.08); opacity: 1; }
}

/* nebula glow bloom */
.nebula {
  position: absolute; inset: 0;
  background:
    radial-gradient(38% 30% at 22% 34%, rgba(255,158,207,.22), transparent 70%),
    radial-gradient(34% 28% at 80% 24%, rgba(127,230,218,.20), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(10px);
  pointer-events: none;
}
.nebula-sm { opacity: .7; }

/* ---------- twinkling colorful stars ---------- */
.stars {
  position: absolute; inset: 0;
  background-repeat: repeat;
  pointer-events: none;
}
.stars-far {
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 20%, #ffd6ef 50%, transparent),
    radial-gradient(1.4px 1.4px at 40% 66%, #fff 50%, transparent),
    radial-gradient(1px 1px at 85% 54%, #c7fff6 50%, transparent),
    radial-gradient(1.1px 1.1px at 15% 80%, #fff 50%, transparent),
    radial-gradient(1px 1px at 55% 42%, #ffe9b8 50%, transparent);
  background-size: 320px 320px;
  animation: twinkle 5.5s ease-in-out infinite;
  opacity: .95;
}
.stars-near {
  background-image:
    radial-gradient(1.7px 1.7px at 33% 20%, #fff 50%, transparent),
    radial-gradient(1.9px 1.9px at 78% 36%, #ffe9b8 50%, transparent),
    radial-gradient(1.6px 1.6px at 12% 54%, #ffd6ef 50%, transparent),
    radial-gradient(2px 2px at 62% 70%, #fff 50%, transparent),
    radial-gradient(1.7px 1.7px at 90% 82%, #c7fff6 50%, transparent);
  background-size: 460px 460px;
  animation: twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%,100% { opacity: .4; }
  50% { opacity: 1; }
}

/* luminous moon */
.moon {
  position: absolute;
  top: 8%; left: 15%;
  width: 82px; height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf6, #fff0cf 55%, #ffdf9e);
  box-shadow:
    0 0 44px 16px rgba(255,232,180,.5),
    0 0 90px 30px rgba(255,200,150,.25);
  animation: moonGlow 6s ease-in-out infinite;
}
.moon-sm { width: 60px; height: 60px; top: 6%; left: 79%; opacity: .95; }
@keyframes moonGlow {
  0%,100% { box-shadow: 0 0 44px 16px rgba(255,232,180,.5), 0 0 90px 30px rgba(255,200,150,.22); }
  50% { box-shadow: 0 0 58px 22px rgba(255,232,180,.62), 0 0 120px 40px rgba(255,200,150,.3); }
}

/* shooting stars */
.shoot {
  position: absolute;
  width: 130px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 60%, #ffe9b8);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(-24deg);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
}
.shoot-1 { top: 18%; left: 60%; animation: shoot 9s ease-in 2s infinite; }
.shoot-2 { top: 30%; left: 30%; animation: shoot 11s ease-in 6s infinite; }
.shoot-3 { top: 12%; left: 80%; animation: shoot 13s ease-in 9s infinite; }
@keyframes shoot {
  0% { opacity: 0; transform: translate(0,0) rotate(-24deg) scaleX(.2); }
  4% { opacity: 1; }
  14% { opacity: 1; transform: translate(-220px,100px) rotate(-24deg) scaleX(1); }
  16%,100% { opacity: 0; transform: translate(-240px,110px) rotate(-24deg) scaleX(1); }
}

/* rising magical fairy-dust */
.dust {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 25% 88%, rgba(255,225,150,.95), transparent),
    radial-gradient(1.6px 1.6px at 60% 92%, rgba(255,158,207,.9), transparent),
    radial-gradient(2.2px 2.2px at 80% 85%, rgba(127,230,218,.9), transparent),
    radial-gradient(1.4px 1.4px at 45% 95%, rgba(255,235,190,.9), transparent),
    radial-gradient(1.8px 1.8px at 12% 90%, rgba(255,210,240,.9), transparent),
    radial-gradient(1.6px 1.6px at 92% 93%, rgba(200,245,240,.85), transparent);
  background-size: 500px 500px;
  animation: rise 14s linear infinite;
  opacity: .7;
  pointer-events: none;
}
@keyframes rise {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0; }
  10% { opacity: .7; }
  100% { background-position: 20px -460px, -30px -520px, 30px -500px, -20px -480px, 25px -540px, -15px -510px; opacity: 0; }
}

/* ---------- BIG colorful fireworks ---------- */
.firework {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  opacity: 0;
}
/* gold burst */
.fw-1 {
  top: 16%; left: 34%;
  box-shadow:
    0 0 0 0 #fff3c8,
    30px -8px 0 -1px #ffe08a, -30px -8px 0 -1px #ffd76a,
    20px 24px 0 -1px #ffe9a8, -20px 24px 0 -1px #ffe08a,
    0 -36px 0 -1px #fff3c8, 0 34px 0 -1px #ffd76a,
    36px 10px 0 -2px #ffedb8, -36px 10px 0 -2px #ffedb8,
    24px -26px 0 -2px #ffe08a, -24px -26px 0 -2px #ffe08a;
  animation: burst 7.5s ease-out 1.2s infinite;
}
/* rose burst */
.fw-2 {
  top: 22%; left: 63%;
  box-shadow:
    0 0 0 0 #ffd9ee,
    28px -6px 0 -1px #ff9ecf, -28px -6px 0 -1px #ff8ac6,
    18px 22px 0 -1px #ffb3dd, -18px 22px 0 -1px #ff9ecf,
    0 -32px 0 -1px #ffc2e2, 0 30px 0 -1px #ff8ac6,
    32px 8px 0 -2px #ffd0e8, -32px 8px 0 -2px #ffd0e8;
  animation: burst 7.5s ease-out 3.6s infinite;
}
/* turquoise burst */
.fw-3 {
  top: 12%; left: 50%;
  box-shadow:
    0 0 0 0 #d4fff9,
    26px -8px 0 -1px #7fe6da, -26px -8px 0 -1px #63dccf,
    16px 20px 0 -1px #9af3e9, -16px 20px 0 -1px #7fe6da,
    0 -30px 0 -1px #a7f2ea, 0 28px 0 -1px #63dccf,
    30px 6px 0 -2px #bafaf3, -30px 6px 0 -2px #bafaf3;
  animation: burst 7.5s ease-out 5.6s infinite;
}
@keyframes burst {
  0% { opacity: 0; transform: scale(.15); }
  5% { opacity: 1; transform: scale(1); }
  13% { opacity: .9; transform: scale(1.55); }
  22% { opacity: 0; transform: scale(2); }
  100% { opacity: 0; transform: scale(2); }
}

/* castle window flicker */
.windows rect, .windows circle, .windows path { animation: winFlicker 4.4s ease-in-out infinite; }
.windows *:nth-child(2n) { animation-delay: 1.1s; }
.windows *:nth-child(3n) { animation-delay: 2.2s; }
.windows *:nth-child(4n) { animation-delay: .6s; }
@keyframes winFlicker {
  0%,100% { opacity: .7; }
  45% { opacity: 1; }
  70% { opacity: .82; }
}

/* soaring light beam + flags shimmer */
.beam { animation: beamPulse 5s ease-in-out infinite; }
@keyframes beamPulse {
  0%,100% { opacity: .35; }
  50% { opacity: .7; }
}
.flag { transform-box: fill-box; transform-origin: right center; animation: flagWave 3.4s ease-in-out infinite; }
@keyframes flagWave {
  0%,100% { transform: scaleX(1) skewY(0deg); }
  50% { transform: scaleX(.86) skewY(-3deg); }
}

/* ============================================================
   COVER / ENTRY SCREEN
   ============================================================ */
.cover {
  position: fixed; inset: 0;
  z-index: 60;
  display: grid; place-items: center;
  min-height: 100lvh;
  cursor: pointer;
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  overflow: hidden;
}
.cover.is-open { opacity: 0; transform: scale(1.06); pointer-events: none; }
.cover-sky { position: absolute; inset: 0; }
.cover-castle {
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(640px, 116%);
  height: auto;
  filter: drop-shadow(0 8px 40px rgba(58,31,110,.5));
}
.cover-inner {
  position: relative; z-index: 2;
  text-align: center;
  padding: 24px;
  margin-bottom: 30vh;
}
.cover-orn { margin: 0 auto 14px; opacity: .95; filter: drop-shadow(0 0 8px rgba(255,230,168,.5)); }
.cover-eyebrow {
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  margin: 0 0 6px;
  letter-spacing: normal;
  text-shadow: 0 2px 16px rgba(58,31,110,.7);
}
.cover-names {
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 4.4rem);
  margin: 0;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--gold-soft);
  background: linear-gradient(180deg, #fffaf0, var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(255,217,138,.55)) drop-shadow(0 0 30px rgba(255,158,207,.35));
}
.cover-hint {
  display: inline-flex; align-items: center; gap: 10px;
  position: relative;
  margin-top: 26px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,230,168,.6);
  color: var(--gold-soft);
  font-family: "Tajawal", sans-serif;
  font-size: 1rem;
  background: rgba(58,31,110,.42);
  backdrop-filter: blur(4px);
  cursor: pointer;
  letter-spacing: normal;
  box-shadow: 0 6px 24px rgba(58,31,110,.4);
  animation: floaty 3s ease-in-out infinite;
}
.cover-hint-ring {
  position: absolute; inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(255,230,168,.45);
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   INVITATION
   ============================================================ */
.invite {
  position: relative;
  min-height: 100lvh;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.invite[aria-hidden="false"] { opacity: 1; }

/* fixed background scene */
.scene {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.scene-sky { position: absolute; inset: 0; }
.scene-castle {
  position: absolute;
  bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 146%;
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 6px 34px rgba(58,31,110,.5));
}

/* content column */
.page {
  position: relative; z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: max(34px, env(safe-area-inset-top)) 20px calc(60px + env(safe-area-inset-bottom));
}

/* ---------- HERO ---------- */
.hero {
  min-height: 88lvh;
  display: grid; place-items: center;
  text-align: center;
  padding: 40px 0;
}
.hero-frame {
  position: relative;
  padding: 40px 26px;
  border: 1px solid rgba(255,230,168,.45);
  border-radius: var(--radius);
  /* soft scrim so gold names stay legible over the bright sky */
  background: linear-gradient(180deg, rgba(58,31,110,.5), rgba(92,47,122,.34));
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 60px rgba(40,18,80,.5), inset 0 0 0 1px rgba(255,230,168,.1);
}
.hero-frame::before, .hero-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  border: 1.5px solid var(--gold); opacity: .85;
}
.hero-frame::before { top: 10px; inset-inline-start: 10px; border-inline-end: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.hero-frame::after { bottom: 10px; inset-inline-end: 10px; border-inline-start: 0; border-top: 0; border-radius: 0 0 8px 0; }
.hero-crown { margin: 0 auto 16px; filter: drop-shadow(0 0 12px rgba(255,230,168,.6)); }
.hero-eyebrow {
  font-family: "Amiri", serif;
  color: var(--gold-soft);
  font-size: clamp(.95rem, 4vw, 1.15rem);
  margin: 0 0 20px;
  letter-spacing: normal;
}
.names {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 14px;
}
.name {
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 13vw, 4.6rem);
  line-height: 1.15;
  letter-spacing: normal;
  background: linear-gradient(180deg, #fffaf0, var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 16px rgba(255,217,138,.5)) drop-shadow(0 0 26px rgba(255,158,207,.3));
}
.amp {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  color: var(--rose);
  line-height: 1;
  letter-spacing: normal;
}
.hero-sub {
  font-family: "El Messiri", serif;
  color: var(--text-dim);
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  margin: 6px auto 18px;
  max-width: 30ch;
  letter-spacing: normal;
}
.hero-age {
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  margin: 4px auto 14px;
  letter-spacing: normal;
}
.hero-age #ageNum {
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: 1.7em;
  color: #ffe6a8;
  margin-inline-start: 4px;
}
.host-line {
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  font-size: clamp(.98rem, 4vw, 1.15rem);
  margin: 12px 0 0;
  text-align: center;
  letter-spacing: normal;
}
.hero-photo {
  width: 168px; height: 168px;
  margin: 8px auto 18px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--gold-soft), var(--rose) 50%, var(--turq));
  box-shadow: 0 12px 34px rgba(40,18,80,.55);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hero-date {
  font-family: "Tajawal", sans-serif;
  color: var(--gold-soft);
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  margin: 8px 0 0;
  letter-spacing: normal;
}

/* ---------- scroll-down cue (hero bottom) ---------- */
.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 22px auto 0;
  font-family: "Tajawal", sans-serif;
  color: var(--gold-soft);
  letter-spacing: normal;
  text-shadow: 0 1px 8px rgba(58,31,110,.55);
}
.scroll-cue-text {
  font-size: .88rem;
  opacity: .92;
}
.scroll-cue-arrow {
  font-size: 1.2rem;
  line-height: 1;
  animation: scrollBob 1.8s ease-in-out infinite;
}
@keyframes scrollBob {
  0%,100% { transform: translateY(0); opacity: .88; }
  50% { transform: translateY(7px); opacity: 1; }
}

/* ---------- dividers ---------- */
.divider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px auto 0; max-width: 260px;
}
.divider-line {
  height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider svg { filter: drop-shadow(0 0 6px rgba(255,230,168,.6)); }

/* ---------- cards ---------- */
.card {
  position: relative;
  margin: 30px auto;
  padding: 30px 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(74,42,130,.66), rgba(58,31,110,.5));
  border: 1px solid rgba(255,230,168,.16);
  box-shadow: 0 16px 44px rgba(40,18,80,.42), inset 0 1px 0 rgba(255,240,220,.08);
  backdrop-filter: blur(4px);
}
.section-title {
  text-align: center;
  font-family: "El Messiri", serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  color: var(--gold-soft);
  margin: 0 0 24px;
  letter-spacing: normal;
}
.section-title span {
  position: relative; padding: 0 18px;
}
.section-title span::before, .section-title span::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section-title span::before { inset-inline-end: 100%; }
.section-title span::after { inset-inline-start: 100%; transform: scaleX(-1); }

/* verse */
.verse-card { text-align: center; }
.verse {
  font-family: "Amiri", serif;
  font-size: clamp(1.25rem, 5.6vw, 1.6rem);
  line-height: 2.1;
  color: var(--cream);
  margin: 0;
  letter-spacing: normal;
}
.corner {
  position: absolute; width: 20px; height: 20px;
  border: 1.4px solid var(--gold); opacity: .7;
}
.corner.tl { top: 12px; inset-inline-start: 12px; border-inline-end: 0; border-bottom: 0; }
.corner.tr { top: 12px; inset-inline-end: 12px; border-inline-start: 0; border-bottom: 0; }
.corner.bl { bottom: 12px; inset-inline-start: 12px; border-inline-end: 0; border-top: 0; }
.corner.br { bottom: 12px; inset-inline-end: 12px; border-inline-start: 0; border-top: 0; }

/* invitation text + parents */
.invite-card { text-align: center; }
.invitation-text {
  font-family: "El Messiri", serif;
  font-size: clamp(1.05rem, 4.6vw, 1.25rem);
  color: var(--text);
  margin: 0 0 26px;
  letter-spacing: normal;
}
.parents {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.parent { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.parent-label {
  font-family: "Tajawal", sans-serif;
  font-size: .82rem; color: var(--lilac);
  letter-spacing: normal;
}
.parent-name {
  font-family: "El Messiri", serif;
  font-size: clamp(1rem, 4.6vw, 1.2rem);
  color: var(--gold-soft);
  letter-spacing: normal;
}
.parent-sep { flex: 0 0 auto; opacity: .8; }

/* details */
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.detail-item {
  text-align: center;
  padding: 18px 12px;
  border-radius: 14px;
  background: rgba(58,31,110,.42);
  border: 1px solid rgba(255,230,168,.12);
}
.detail-venue { grid-column: 1 / -1; }
.detail-ico { margin-bottom: 10px; filter: drop-shadow(0 0 6px rgba(255,230,168,.45)); }
.detail-label {
  display: block; font-family: "Tajawal", sans-serif;
  font-size: .82rem; color: var(--lilac); margin-bottom: 4px;
  letter-spacing: normal;
}
.detail-value {
  display: block; font-family: "El Messiri", serif;
  font-size: clamp(1rem, 4.4vw, 1.15rem); color: var(--text);
  letter-spacing: normal;
}
.detail-addr {
  display: block; font-family: "Tajawal", sans-serif;
  font-size: .9rem; color: var(--text-dim); margin-top: 4px;
  letter-spacing: normal;
}
.venue-photo {
  margin-top: 18px; height: 0;
  border-radius: 14px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,230,168,.28);
  transition: height .5s var(--ease);
}
.venue-photo.has-img { height: 190px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin: 22px auto 0;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: "Tajawal", sans-serif;
  font-weight: 500; font-size: 1rem;
  text-decoration: none;
  letter-spacing: normal;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  width: fit-content;
}
.btn-map {
  color: #4a2410;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 10px 26px rgba(255,217,138,.35);
  display: flex;
}
.btn-wa {
  color: var(--gold-soft);
  border: 1px solid rgba(255,230,168,.55);
  background: rgba(58,31,110,.5);
  display: flex;
}
.btn:active { transform: translateY(1px) scale(.99); }
@media (hover:hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255,217,138,.4); } }

/* countdown */
.count-card { text-align: center; }
.countdown {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.cd-unit {
  padding: 16px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(200,90,156,.32), rgba(58,31,110,.5));
  border: 1px solid rgba(255,230,168,.26);
}
.cd-num {
  display: block;
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  color: var(--gold-soft);
  line-height: 1.1;
  letter-spacing: normal;
}
.cd-lbl {
  display: block; margin-top: 6px;
  font-family: "Tajawal", sans-serif;
  font-size: .8rem; color: var(--lilac);
  letter-spacing: normal;
}
.cd-arrived {
  font-family: "El Messiri", serif;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  color: var(--gold-soft);
  margin: 8px 0 0;
  letter-spacing: normal;
}

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 6px; bottom: 6px;
  inset-inline-start: 13px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.timeline li {
  position: relative;
  padding-inline-start: 40px;
  padding-block: 12px;
}
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 20px;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft), var(--rose-deep));
  box-shadow: 0 0 10px rgba(255,230,168,.7);
}
.tl-time {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem; color: var(--turq);
  letter-spacing: normal;
}
.tl-title {
  display: block;
  font-family: "El Messiri", serif;
  font-size: clamp(1.05rem, 4.6vw, 1.2rem); color: var(--text);
  letter-spacing: normal;
}

/* notes */
.notes { list-style: none; margin: 0; padding: 0; }
.notes li {
  position: relative;
  padding-inline-start: 26px;
  padding-block: 8px;
  color: var(--text-dim);
  font-family: "Tajawal", sans-serif;
  letter-spacing: normal;
}
.notes li::before {
  content: "✦"; position: absolute; inset-inline-start: 0; top: 8px;
  color: var(--gold); font-size: .9rem;
}

/* contact */
.contact-card { text-align: center; }
.contact-name {
  font-family: "El Messiri", serif;
  color: var(--text); font-size: 1.1rem; margin: 0;
  letter-spacing: normal;
}

/* closing */
.closing { text-align: center; padding: 34px 0 10px; }
.closing-note {
  font-family: "Aref Ruqaa", serif;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  color: var(--gold-soft);
  margin: 22px 0 10px;
  letter-spacing: normal;
  background: linear-gradient(180deg, #fffaf0, var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,158,207,.3));
}
.closing-families {
  font-family: "El Messiri", serif;
  color: var(--text-dim); font-size: 1.05rem; margin: 0 0 8px;
  letter-spacing: normal;
}
.closing-hashtag {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--turq);
  font-size: 1.1rem; margin: 4px 0 0;
  /* hashtag may contain Arabic — keep normal to avoid متقطع glyphs */
  letter-spacing: normal;
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .stars-far, .stars-near, .shoot, .dust, .firework,
  .aurora, .moon, .beam, .flag,
  .windows rect, .windows circle, .windows path,
  .cover-hint, .cover-hint-ring, .scroll-cue-arrow {
    animation: none !important;
  }
  .reveal { transition: opacity .3s ease; transform: none; }
  .cover { transition: opacity .4s ease; }
  .stars-far, .stars-near { opacity: .85; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 560px) {
  .name { font-size: 4.6rem; }
}
@media (max-width: 360px) {
  .countdown { gap: 7px; }
  .cd-unit { padding: 13px 4px; }
  .parents { gap: 10px; }
}

/* أسطر Enter في حقل «العبارة» تُعرض كما كتبها الزبون */
p.verse, .verse { white-space: pre-line; }