/* ============================================================
   ليلة ذهبية — Golden Night Glam (candidate B)
   Sequin-curtain reveal · black & champagne gold · adult chic
   ============================================================ */

:root {
  --black: #000000;
  --coal: #0d0a06;
  --night: #171106;
  --gold: #e8c884;        /* champagne */
  --gold-deep: #d4af37;   /* metallic */
  --gold-dark: #9c7a2f;
  --gold-soft: #f6e3b8;
  --cream: #fff7e8;
  --rosegold: #e8b4a0;    /* a whisper */
  --text: #f3e8d2;
  --text-dim: #cdbb99;

  --radius: 18px;
  --maxw: 620px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-curtain: cubic-bezier(.65,.02,.28,1);
}

* { box-sizing: border-box; }

html {
  /* MUST match the black scene — no iOS status-bar seam */
  background: var(--black);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--black);
  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; }

/* ============================================================
   COVER — SEQUIN CURTAIN OVER THE GOLDEN-NIGHT PHOTO
   ============================================================ */
.cover {
  position: fixed; inset: 0;
  z-index: 60;
  display: grid; place-items: center;
  min-height: 100lvh;
  cursor: pointer;
  overflow: hidden;
  background: var(--black);
  transition: opacity .9s var(--ease) .9s;
}
.cover.is-open { opacity: 0; pointer-events: none; }

/* the luxury photo, waiting behind the curtain */
.cover-photo {
  position: absolute; inset: 0;
  background: url("/templates/glam/assets/hero-glam.jpg") center top / cover no-repeat var(--black);
  transform: scale(1.04);
  animation: kenBurns 16s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0% { transform: scale(1.04); }
  100% { transform: scale(1.1) translateY(-1.2%); }
}
.cover-photo-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 30%, rgba(0,0,0,.4) 82%, rgba(0,0,0,.66));
}

/* ---------- the veil: two draped sequin panels ---------- */
.veil { position: absolute; inset: 0; z-index: 2; }

.veil-panel {
  position: absolute; top: -2%; bottom: -2%;
  width: 51.5%;
  overflow: hidden;
  background:
    linear-gradient(180deg, #241a08 0%, #171106 34%, #0e0a04 72%, #090603 100%);
  transition: transform 1.45s var(--ease-curtain);
  will-change: transform;
}
.veil-left  { left: 0;  transform-origin: top left;
  box-shadow: inset -28px 0 42px -22px rgba(0,0,0,.85); }
.veil-right { right: 0; transform-origin: top right;
  box-shadow: inset 28px 0 42px -22px rgba(0,0,0,.85); }

/* sweep aside — a grand theatrical part, with a hint of lift */
.cover.is-open .veil-left  { transform: translateX(-114%) rotate(-3.5deg); }
.cover.is-open .veil-right { transform: translateX(114%)  rotate(3.5deg); transition-delay: .06s; }

/* sequin paillettes — two offset layers twinkling against each other */
.veil-sequins {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, #f2d894 1.7px, rgba(242,216,148,.32) 2.5px, transparent 3.4px),
    radial-gradient(circle, #d4af37 1.5px, rgba(212,175,55,.3) 2.3px, transparent 3.2px),
    radial-gradient(circle, #b9973f 1.4px, rgba(185,151,63,.28) 2.1px, transparent 3px),
    radial-gradient(circle, #8a6a24 1.3px, rgba(138,106,36,.25) 2px, transparent 2.8px);
  background-size: 34px 40px, 46px 52px, 28px 34px, 56px 62px;
  background-position: 0 0, 17px 23px, 9px 6px, 31px 41px;
  animation: sequinTwinkleA 3.2s ease-in-out infinite;
}
.veil-sequins-b {
  background-image:
    radial-gradient(circle, #fff1cf 1.4px, rgba(255,241,207,.3) 2.1px, transparent 3px),
    radial-gradient(circle, #e8c884 1.6px, rgba(232,200,132,.3) 2.4px, transparent 3.3px),
    radial-gradient(circle, #caa14d 1.3px, rgba(202,161,77,.26) 2px, transparent 2.8px);
  background-size: 40px 46px, 52px 58px, 30px 38px;
  background-position: 21px 11px, 5px 37px, 15px 25px;
  animation: sequinTwinkleB 2.6s ease-in-out infinite;
}
@keyframes sequinTwinkleA {
  0%, 100% { opacity: .9; }
  50% { opacity: .55; }
}
@keyframes sequinTwinkleB {
  0%, 100% { opacity: .45; }
  50% { opacity: .95; }
}

/* vertical drape folds — soft fabric shadow bands */
.veil-folds {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.52) 0px, rgba(0,0,0,0) 26px,
    rgba(255,230,175,.05) 40px, rgba(0,0,0,0) 56px,
    rgba(0,0,0,.42) 82px);
}

/* travelling glint of light down the sequins */
.veil-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(112deg,
    transparent 32%,
    rgba(232,200,132,.1) 43%,
    rgba(255,241,207,.3) 50%,
    rgba(232,200,132,.1) 57%,
    transparent 68%);
  background-size: 300% 300%;
  mix-blend-mode: screen;
  animation: sheenSweep 5.6s ease-in-out infinite;
}
@keyframes sheenSweep {
  0% { background-position: 120% 0; }
  62%, 100% { background-position: -60% 0; }
}

/* glowing inner hem of each panel */
.veil-edge {
  position: absolute; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep) 40%, #8a6a24 80%, var(--gold-deep));
  box-shadow: 0 0 16px 3px rgba(232,200,132,.55);
  opacity: .85;
}
.veil-left  .veil-edge { right: 0; }
.veil-right .veil-edge { left: 0; }
.cover.is-open .veil-edge {
  animation: edgeFlare 1.2s var(--ease) forwards;
}
@keyframes edgeFlare {
  0% { box-shadow: 0 0 16px 3px rgba(232,200,132,.55); opacity: 1; }
  35% { box-shadow: 0 0 46px 14px rgba(255,241,207,.95); opacity: 1; }
  100% { box-shadow: 0 0 10px 2px rgba(232,200,132,.3); opacity: .6; }
}

/* the pulsing golden seam where the curtain will part */
.veil-seam {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 22%, var(--gold-soft) 78%, transparent);
  filter: drop-shadow(0 0 8px rgba(246,227,184,.8));
  animation: seamPulse 2.6s ease-in-out infinite;
}
@keyframes seamPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
.cover.is-open .veil-seam { opacity: 0; transition: opacity .25s ease; animation: none; }

/* the wave of sparkle at the moment of parting */
.veil-burst {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2.6px 2.6px at 50% 24%, #fff7e8 50%, transparent),
    radial-gradient(2px 2px at 46% 40%, #f6e3b8 50%, transparent),
    radial-gradient(2.8px 2.8px at 54% 52%, #ffffff 50%, transparent),
    radial-gradient(2.2px 2.2px at 48% 66%, #e8c884 50%, transparent),
    radial-gradient(2.4px 2.4px at 53% 80%, #fff1cf 50%, transparent),
    radial-gradient(2px 2px at 44% 14%, #e8c884 50%, transparent),
    radial-gradient(2.4px 2.4px at 57% 33%, #fff7e8 50%, transparent),
    radial-gradient(2px 2px at 42% 88%, #f6e3b8 50%, transparent);
  opacity: 0;
  pointer-events: none;
}
.cover.is-open .veil-burst { animation: sparkleWave 1.3s ease-out .1s forwards; }
@keyframes sparkleWave {
  0% { opacity: 0; transform: scale(.7); }
  18% { opacity: 1; }
  60% { opacity: .8; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.1); }
}

/* ---------- text on the curtain ---------- */
.cover-inner {
  position: relative; z-index: 3;
  text-align: center;
  padding: 24px calc(20px + env(safe-area-inset-left)) 0 calc(20px + env(safe-area-inset-right));
  transition: opacity .45s ease, transform .5s var(--ease);
}
.cover.is-open .cover-inner { opacity: 0; transform: scale(1.06); }

.cover-orn { margin: 0 auto 10px; opacity: .95; filter: drop-shadow(0 0 8px rgba(232,200,132,.5)); }

/* Latin-only accent line — letter-spacing allowed here */
.cover-kicker,
.latin {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .42em;
  margin: 0 0 4px;
  text-transform: uppercase;
  opacity: .9;
}
.cover-eyebrow {
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  margin: 0 0 4px;
  letter-spacing: normal;
  text-shadow: 0 2px 18px rgba(0,0,0,.85);
}
.cover-names {
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 11.5vw, 4.5rem);
  margin: 0;
  line-height: 1.3;
  max-width: 100%;
  letter-spacing: normal;
  background: linear-gradient(180deg, #fff7e8 4%, var(--gold) 46%, var(--gold-deep) 74%, #f6e3b8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 22px rgba(212,175,55,.5)) drop-shadow(0 0 40px rgba(232,180,160,.22));
}
.cover-hint {
  display: inline-flex; align-items: center; gap: 10px;
  position: relative;
  margin-top: 28px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(232,200,132,.65);
  color: var(--gold-soft);
  font-family: "Tajawal", sans-serif;
  font-size: 1rem;
  background: rgba(9,6,3,.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
  letter-spacing: normal;
  box-shadow: 0 8px 28px rgba(0,0,0,.6), inset 0 0 14px rgba(232,200,132,.12);
  animation: floaty 3s ease-in-out infinite;
}
.cover-hint-ring {
  position: absolute; inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(232,200,132,.5);
  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); }
}

/* ============================================================
   SHARED GOLDEN-NIGHT ATMOSPHERE
   ============================================================ */

/* rising champagne bubbles — fine mist layer */
.bubbles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(3px 3px at 22% 92%, rgba(232,200,132,.6), transparent),
    radial-gradient(2.2px 2.2px at 58% 96%, rgba(246,227,184,.5), transparent),
    radial-gradient(3.6px 3.6px at 81% 90%, rgba(212,175,55,.45), transparent),
    radial-gradient(2px 2px at 40% 94%, rgba(255,247,232,.5), transparent),
    radial-gradient(2.6px 2.6px at 10% 88%, rgba(232,200,132,.5), transparent),
    radial-gradient(2.2px 2.2px at 93% 95%, rgba(246,227,184,.45), transparent);
  background-size: 480px 520px;
  background-repeat: repeat;
  animation: bubblesRise 15s linear infinite;
  opacity: .7;
  pointer-events: none;
}
.bubbles-b { animation-duration: 21s; animation-delay: -8s; opacity: .45; transform: scale(1.4); }
.bubbles-cover { z-index: 3; opacity: .4; }
@keyframes bubblesRise {
  0% { background-position: 0 0; opacity: 0; }
  12% { opacity: .7; }
  88% { opacity: .7; }
  100% { background-position: 26px -520px; opacity: 0; }
}

/* a few hand-placed larger bubbles with glass rims */
.bub {
  position: absolute; bottom: -40px;
  border-radius: 50%;
  border: 1px solid rgba(232,200,132,.5);
  background: radial-gradient(circle at 32% 28%, rgba(255,247,232,.5), rgba(232,200,132,.08) 55%, transparent 75%);
  box-shadow: 0 0 10px rgba(232,200,132,.25), inset 0 0 6px rgba(255,247,232,.2);
  animation: bubFloat 12s linear infinite;
  pointer-events: none;
}
.bub-1 { left: 12%; width: 14px; height: 14px; animation-duration: 13s; }
.bub-2 { left: 30%; width: 9px;  height: 9px;  animation-duration: 10s; animation-delay: 3s; }
.bub-3 { left: 55%; width: 16px; height: 16px; animation-duration: 15s; animation-delay: 6s; }
.bub-4 { left: 74%; width: 10px; height: 10px; animation-duration: 11s; animation-delay: 1.5s; }
.bub-5 { left: 90%; width: 12px; height: 12px; animation-duration: 14s; animation-delay: 8s; }
@keyframes bubFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: .9; }
  50% { transform: translateY(-55lvh) translateX(-14px); }
  92% { opacity: .8; }
  100% { transform: translateY(-108lvh) translateX(10px); opacity: 0; }
}

/* micro glitter twinkle */
.glitter {
  position: absolute; inset: 0;
  background-repeat: repeat;
  pointer-events: none;
}
.glitter-far {
  background-image:
    radial-gradient(1.2px 1.2px at 24% 28%, #fff7e8 50%, transparent),
    radial-gradient(1px 1px at 68% 18%, #e8c884 50%, transparent),
    radial-gradient(1.4px 1.4px at 44% 62%, #fff1cf 50%, transparent),
    radial-gradient(1px 1px at 86% 50%, #e8b4a0 50%, transparent),
    radial-gradient(1.1px 1.1px at 12% 78%, #f6e3b8 50%, transparent);
  background-size: 340px 340px;
  animation: twinkle 5.5s ease-in-out infinite;
  opacity: .85;
}
.glitter-near {
  background-image:
    radial-gradient(1.8px 1.8px at 35% 22%, #fff7e8 50%, transparent),
    radial-gradient(1.6px 1.6px at 76% 38%, #e8c884 50%, transparent),
    radial-gradient(2px 2px at 15% 56%, #fff1cf 50%, transparent),
    radial-gradient(1.7px 1.7px at 60% 74%, #f6e3b8 50%, transparent),
    radial-gradient(1.5px 1.5px at 91% 84%, #e8b4a0 50%, transparent);
  background-size: 470px 470px;
  animation: twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

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

/* fixed scene: the photo lives behind the whole page */
.scene {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}
.scene-photo {
  position: absolute; inset: 0;
  background: url("/templates/glam/assets/hero-glam.jpg") center top / cover no-repeat var(--black);
}
.scene-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.12) 26%,
    rgba(0,0,0,.55) 58%,
    rgba(0,0,0,.82) 82%,
    rgba(0,0,0,.92) 100%);
}

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

/* ---------- HERO ---------- */
.hero {
  min-height: 92lvh;
  display: grid; place-items: center;
  text-align: center;
  padding: 36px 0;
}
.hero-frame {
  position: relative;
  width: 100%;
  padding: 42px 26px 36px;
  border: 1px solid rgba(232,200,132,.4);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(6,4,2,.5), rgba(13,10,6,.36));
  backdrop-filter: blur(3px);
  box-shadow: 0 24px 70px rgba(0,0,0,.65), inset 0 0 0 1px rgba(232,200,132,.08);
}
/* double hairline — a jewelry-box inner frame */
.hero-frame::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(232,200,132,.22);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
.hero-orn { margin: 0 auto 12px; opacity: .95; filter: drop-shadow(0 0 8px rgba(232,200,132,.45)); }
.hero-eyebrow {
  font-family: "Amiri", serif;
  color: var(--gold-soft);
  font-size: clamp(.95rem, 4vw, 1.15rem);
  margin: 0 0 14px;
  letter-spacing: normal;
}
.names { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; }
.name {
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: clamp(2rem, 13vw, 4.8rem);
  line-height: 1.3;
  max-width: 100%;
  letter-spacing: normal;
  background: linear-gradient(120deg,
    var(--gold-deep) 0%, #fff7e8 22%, var(--gold) 42%,
    var(--gold-deep) 58%, #fff1cf 78%, var(--gold) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 18px rgba(212,175,55,.55)) drop-shadow(0 0 34px rgba(232,180,160,.2));
  animation: nameShimmer 6.5s ease-in-out infinite;
}
@keyframes nameShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* sparkling age */
.hero-age {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  margin: 2px auto 12px;
  letter-spacing: normal;
}
.age-num {
  font-family: "Aref Ruqaa", serif;
  font-weight: 700;
  font-size: 2em;
  line-height: 1.15;
  letter-spacing: normal;
  background: linear-gradient(120deg, #fff7e8 8%, var(--gold) 34%, var(--gold-deep) 52%, #fff1cf 70%, var(--gold) 92%);
  background-size: 240% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(232,200,132,.65));
  animation: nameShimmer 4.5s ease-in-out infinite;
}
.age-word { letter-spacing: normal; }
.age-spark {
  color: var(--gold);
  font-size: .8em;
  filter: drop-shadow(0 0 6px rgba(232,200,132,.9));
  animation: sparkPulse 2.2s ease-in-out infinite;
}
.age-spark:last-child { animation-delay: 1.1s; }
@keyframes sparkPulse {
  0%, 100% { opacity: .45; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(22deg); }
}

.hero-sub {
  font-family: "El Messiri", serif;
  color: var(--text-dim);
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  margin: 4px auto 16px;
  max-width: 30ch;
  letter-spacing: normal;
}
.host-line {
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  font-size: clamp(.98rem, 4vw, 1.15rem);
  margin: 14px 0 0;
  text-align: center;
  letter-spacing: normal;
}
.hero-photo {
  width: 164px; height: 164px;
  margin: 10px auto 18px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 200deg, var(--gold-deep), #fff1cf, var(--gold), var(--rosegold), var(--gold-deep));
  box-shadow: 0 14px 40px rgba(0,0,0,.7), 0 0 26px rgba(212,175,55,.35);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid rgba(0,0,0,.65); }
.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;
}

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

/* ---------- hero scroll cue ---------- */
.hero-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 26px auto 0;
  font-family: "El Messiri", serif;
  color: var(--gold-soft);
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
  letter-spacing: normal;
}
.hero-scroll-text { font-size: .88rem; }
.hero-scroll-arrow {
  font-size: 1.2rem; line-height: 1;
  animation: heroScrollBob 1.8s ease-in-out infinite;
}
@keyframes heroScrollBob {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50% { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow { animation: none; }
}

/* ---------- cards: black glass with gold hairlines ---------- */
.card {
  position: relative;
  margin: 28px auto;
  padding: 30px 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(13,10,6,.78), rgba(6,4,2,.66));
  border: 1px solid rgba(232,200,132,.26);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(246,227,184,.1);
  backdrop-filter: blur(5px);
}
.section-title {
  text-align: center;
  font-family: "El Messiri", serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 5.4vw, 1.6rem);
  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: 30px; 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); }

/* greeting */
.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: 1px solid var(--gold); opacity: .75;
}
.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 + host */
.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 20px;
  letter-spacing: normal;
}

/* details */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-item {
  text-align: center;
  padding: 18px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(232,200,132,.18);
}
.detail-venue { grid-column: 1 / -1; }
.detail-ico { margin-bottom: 10px; filter: drop-shadow(0 0 6px rgba(232,200,132,.45)); }
.detail-label {
  display: block; font-family: "Tajawal", sans-serif;
  font-size: .82rem; color: var(--text-dim); 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(232,200,132,.3);
  transition: height .5s var(--ease);
}
.venue-photo.has-img { height: 190px; }

/* buttons */
.btn {
  display: 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: #2a1e07;
  background: linear-gradient(135deg, #fff1cf, var(--gold) 48%, var(--gold-deep));
  box-shadow: 0 10px 28px rgba(212,175,55,.35);
}
.btn-wa {
  color: var(--gold-soft);
  border: 1px solid rgba(232,200,132,.6);
  background: rgba(0,0,0,.5);
}
.btn:active { transform: translateY(1px) scale(.99); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(212,175,55,.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(212,175,55,.14), rgba(0,0,0,.5));
  border: 1px solid rgba(232,200,132,.32);
  box-shadow: inset 0 1px 0 rgba(246,227,184,.12);
}
.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.15;
  letter-spacing: normal;
  text-shadow: 0 0 18px rgba(232,200,132,.45);
}
.cd-lbl {
  display: block; margin-top: 6px;
  font-family: "Tajawal", sans-serif;
  font-size: .8rem; color: var(--text-dim);
  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: 22px;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff7e8, var(--gold-deep));
  box-shadow: 0 0 10px rgba(232,200,132,.8);
}
.tl-time {
  display: block;
  font-family: "El Messiri", serif;
  font-size: .95rem; color: var(--gold);
  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);
  line-height: 1.4;
  margin: 22px 0 10px;
  letter-spacing: normal;
  background: linear-gradient(180deg, #fff7e8, var(--gold) 52%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(212,175,55,.4));
}
.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: "El Messiri", serif;
  color: var(--gold);
  font-size: 1.05rem; margin: 4px 0 0;
  /* hashtag may contain Arabic — keep normal */
  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 — curtain becomes a calm fade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cover-photo, .veil-sequins, .veil-sequins-b, .veil-sheen, .veil-seam,
  .veil-edge, .veil-burst, .bubbles, .bub, .glitter-far, .glitter-near,
  .cover-hint, .cover-hint-ring, .name, .age-num, .age-spark {
    animation: none !important;
  }
  .veil-panel { transition: opacity .4s ease; }
  .cover.is-open .veil-left,
  .cover.is-open .veil-right { transform: none; opacity: 0; }
  .cover { transition: opacity .45s ease .1s; }
  .reveal { transition: opacity .3s ease; transform: none; }
  .glitter-far, .glitter-near { opacity: .6; }
}

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

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