/* =========================================================
   Mushthaq & Femin — Wedding Invitation
   Themes: sunset (default) · sunset-dark · warm beige · royal wine · midnight navy · onyx · emerald
   Preview another theme with ?theme=sunset-dark | beige | wine | navy | onyx | emerald
   The default is the data-theme attribute on <html> in index.html
   ========================================================= */

@property --sweep {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Colour themes (background tones; gold & ivory are shared) ---------- */
:root {
  /* Royal Wine (used when data-theme="wine" or no theme is set) */
  --bg-950: #170609;
  --bg-900: #22080e;
  --bg-850: #2d0b13;
  --bg-800: #3a0f19;
  --bg-700: #4f1523;
  --bg-600: #6a1d30;
  --bg-950-rgb: 23, 6, 9;
  --bg-700-rgb: 79, 21, 35;
  --bg-600-rgb: 106, 29, 48;
}
:root[data-theme="navy"] {
  --bg-950: #050a17;
  --bg-900: #091126;
  --bg-850: #0d1730;
  --bg-800: #111e3c;
  --bg-700: #182a52;
  --bg-600: #22386b;
  --bg-950-rgb: 5, 10, 23;
  --bg-700-rgb: 24, 42, 82;
  --bg-600-rgb: 34, 56, 107;
}
:root[data-theme="onyx"] {
  --bg-950: #090807;
  --bg-900: #100f0d;
  --bg-850: #161412;
  --bg-800: #1d1a17;
  --bg-700: #29251f;
  --bg-600: #3a342b;
  --bg-950-rgb: 9, 8, 7;
  --bg-700-rgb: 41, 37, 31;
  --bg-600-rgb: 58, 52, 43;
}
/* Warm Beige — light luxury theme */
:root[data-theme="beige"] {
  --bg-950: #e2d1b7;
  --bg-900: #eee3d2;
  --bg-850: #f2e8da;
  --bg-800: #f5ede1;
  --bg-700: #f8f2e8;
  --bg-600: #fdf9f2;
  --bg-950-rgb: 226, 209, 183;
  --bg-700-rgb: 248, 242, 232;
  --bg-600-rgb: 253, 249, 242;

  --gold-100: #f3e3bd;
  --gold-200: #86632a;
  --gold-300: #8f6c2d;
  --gold-400: #9b7734;
  --gold-500: #a8843f;
  --gold-600: #85652a;
  --gold-700: #6b5021;

  --text: rgba(58, 42, 31, .9);
  --text-dim: rgba(58, 42, 31, .7);
  --heading: #2f2219;
  --ink: #3a2a1f;
  --ink-soft: rgba(58, 42, 31, .8);
  --on-gold: #fffaf0;
  --line: rgba(139, 103, 40, .45);
  --line-soft: rgba(139, 103, 40, .22);
  --shadow-rgb: 105, 76, 40;
  --shadow-k: .42;
  --metal: linear-gradient(135deg, #d6b36d 0%, #a8843f 48%, #765824 100%);
  --foil: linear-gradient(110deg,
      #6b5021 0%, #b08a45 14%, #7d5e26 28%, #caa65e 40%,
      #6b5021 54%, #a8843f 70%, #7d5e26 84%, #6b5021 100%);
  color-scheme: light;
}
/* Sunset — cream base with sunset accents (default) */
:root[data-theme="sunset"] {
  --bg-950: #f9dcae;
  --bg-900: #fff0d9;
  --bg-850: #fff3e2;
  --bg-800: #fff6ea;
  --bg-700: #fff9f1;
  --bg-600: #fffcf7;
  --bg-950-rgb: 249, 220, 174;
  --bg-700-rgb: 255, 249, 241;
  --bg-600-rgb: 255, 252, 247;

  --gold-100: #ffe3b3;
  --gold-200: #b4470a;
  --gold-300: #c4500d;
  --gold-400: #ea6113;
  --gold-500: #f17a1c;
  --gold-600: #c9500c;
  --gold-700: #8f360a;

  --text: rgba(64, 33, 16, .9);
  --text-dim: rgba(64, 33, 16, .7);
  --heading: #3a1d0c;
  --ink: #40210f;
  --ink-soft: rgba(64, 33, 16, .8);
  --on-gold: #fffaf3;
  --line: rgba(234, 97, 19, .4);
  --line-soft: rgba(234, 97, 19, .2);
  --shadow-rgb: 140, 60, 10;
  --shadow-k: .34;
  --metal: linear-gradient(135deg, #fbb931 -15%, #f88f22 32%, #ea6113 72%, #cf520d 100%);
  --foil: linear-gradient(110deg,
      #cf520d 0%, #ea6113 14%, #f88f22 28%, #f6a62a 40%,
      #ea6113 54%, #f88f22 70%, #e2600f 84%, #cf520d 100%);
  color-scheme: light;
}

/* Sunset Dark — espresso base with sunset accents */
:root[data-theme="sunset-dark"] {
  --bg-950: #110906;
  --bg-900: #190e08;
  --bg-850: #20130b;
  --bg-800: #2a180e;
  --bg-700: #3b2214;
  --bg-600: #52301b;
  --bg-950-rgb: 17, 9, 6;
  --bg-700-rgb: 59, 34, 20;
  --bg-600-rgb: 82, 48, 27;

  --gold-100: #fff1d6;
  --gold-200: #ffe3b3;
  --gold-300: #ffd08a;
  --gold-400: #fbb931;
  --gold-500: #f88f22;
  --gold-600: #ea6113;
  --gold-700: #b8480b;

  --text: rgba(255, 238, 218, .92);
  --text-dim: rgba(255, 238, 218, .68);
  --heading: #ffeedd;
  --on-gold: #2a1208;
  --line: rgba(248, 143, 34, .45);
  --line-soft: rgba(248, 143, 34, .2);
  --foil: linear-gradient(110deg,
      #ea6113 0%, #f88f22 16%, #fbb931 30%, #ffe3b3 42%,
      #fbb931 54%, #f88f22 70%, #ef7419 86%, #ea6113 100%);
}
:root[data-theme="emerald"] {
  --bg-950: #041612;
  --bg-900: #072219;
  --bg-850: #0a2b21;
  --bg-800: #0d3428;
  --bg-700: #124435;
  --bg-600: #1a5744;
  --bg-950-rgb: 4, 22, 18;
  --bg-700-rgb: 18, 68, 53;
  --bg-600-rgb: 26, 87, 68;
}

:root {
  --ink: var(--bg-800);
  --ink-soft: rgba(var(--bg-950-rgb), .78);
  --heading: var(--ivory);
  --on-gold: var(--bg-950);
  --metal: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-400) 45%, var(--gold-600) 100%);
  --shadow-rgb: 0, 0, 0;
  --shadow-k: 1;

  --gold-100: #fbf3dc;
  --gold-200: #f5e6bb;
  --gold-300: #ecd59c;
  --gold-400: #dbbb76;
  --gold-500: #c6a15b;
  --gold-600: #a38140;
  --gold-700: #7c5f2b;

  --ivory: #f8f0e1;
  --ivory-2: #eee1c4;

  --text: rgba(248, 240, 225, .92);
  --text-dim: rgba(248, 240, 225, .68);
  --line: rgba(198, 161, 91, .5);
  --line-soft: rgba(198, 161, 91, .22);

  --foil: linear-gradient(110deg,
      #a38140 0%, #f5e6bb 14%, #c6a15b 28%, #fff7dc 40%,
      #b8924c 54%, #ecd59c 70%, #c6a15b 84%, #a38140 100%);

  --f-names: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --f-display: 'Cinzel', 'Trajan Pro', serif;
  --f-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-arabic: 'Amiri', 'Geeza Pro', serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c6a15b' stroke-width='.8'%3E%3Cpath d='M22 22H58V58H22Z'/%3E%3Cpath d='M40 14.5 65.5 40 40 65.5 14.5 40Z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M40 0V14.5M40 65.5V80M0 40H14.5M65.5 40H80M0 10 10 0M70 0 80 10M80 70 70 80M10 80 0 70'/%3E%3C/g%3E%3C/svg%3E");
  --noise: 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 .42 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-950);
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

html.is-locked,
html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-serif);
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible {
  outline: 1.5px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(198, 161, 91, .35); color: var(--ivory); }

/* ---------- Shared type ---------- */
.arabic {
  font-family: var(--f-arabic);
  direction: rtl;
  unicode-bidi: isolate;
  text-wrap: balance;
}
.sec-head__title, .verse-en, .couple__lead, .closing__dua-en, .closing__text, .hero__invocation { text-wrap: balance; }

.eyebrow {
  font-family: var(--f-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-400);
  padding-left: .34em; /* balance trailing letter-spacing */
}

.foil {
  background-image: var(--foil);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: foil 7s linear infinite;
}
@keyframes foil { to { background-position: 200% 50%; } }

/* Split-text helpers (created by JS) */
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }

/* ---------- Backdrop & FX ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 65% at 50% -8%, rgba(var(--bg-600-rgb), .95) 0%, transparent 62%),
    radial-gradient(90% 55% at 50% 108%, rgba(var(--bg-700-rgb), .9) 0%, transparent 60%),
    var(--bg-900);
}
.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  background-size: 84px 84px;
  opacity: .065;
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k))) 100%);
}

.fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 45;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-200), var(--gold-500));
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 10px rgba(236, 213, 156, .6);
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: radial-gradient(80% 60% at 50% 45%, var(--bg-800), var(--bg-950) 80%);
}
.preloader__badge {
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
}
.preloader__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.2;
  animation: spin 18s linear infinite;
}
.preloader__mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.8s cubic-bezier(.65, 0, .35, 1) forwards;
}
.preloader__mark path:nth-child(2) { animation-delay: .3s; }
.preloader__mono {
  font-family: var(--f-names);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: .1em;
  color: var(--gold-200);
  opacity: 0;
  animation: fadeIn 1s .9s forwards;
}
.preloader__mono i { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.1em; letter-spacing: 0; margin: 0 .1em; color: var(--gold-400); }
.preloader__text {
  font-family: var(--f-display);
  font-size: .62rem;
  letter-spacing: .5em;
  padding-left: .5em;
  text-transform: uppercase;
  color: var(--gold-500);
  opacity: 0;
  animation: fadeIn 1s 1.1s forwards, breathe 2.4s 2s ease-in-out infinite;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Envelope gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(30px + var(--safe-t)) 20px calc(30px + var(--safe-b));
  text-align: center;
  overflow: hidden;
  touch-action: none;
  background: radial-gradient(85% 60% at 50% 48%, var(--bg-700) 0%, var(--bg-900) 55%, var(--bg-950) 100%);
}
/* Fallback (no GSAP / reduced motion) */
.gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s ease, visibility .9s; }

.gate__pattern {
  position: absolute;
  inset: -84px;
  background-image: var(--pattern);
  background-size: 84px 84px;
  opacity: .12;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
  animation: drift 60s linear infinite;
}
@keyframes drift { to { transform: translate(84px, 84px); } }

.gate__top, .gate__bottom { position: relative; display: grid; gap: 10px; justify-items: center; }
.gate__bismillah { font-size: clamp(1.35rem, 6vw, 1.8rem); color: var(--gold-300); line-height: 1.6; }

.gate__names {
  font-family: var(--f-names);
  font-weight: 500;
  font-size: clamp(1.45rem, 6.6vw, 2.4rem);
  letter-spacing: .14em;
  padding-left: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold-200);
  text-shadow: 0 2px 24px rgba(219, 187, 118, .25);
}
.gate__names i, .letter__names i, .closing__names .amp {
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.2em;
  line-height: 1;
  color: var(--gold-400);
  margin: 0 .12em;
}
.gate__date {
  font-family: var(--f-display);
  font-size: .7rem;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gate__hint {
  margin-top: 8px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold-300);
}
.gate__hint em { font-style: italic; animation: breathe 2.6s ease-in-out infinite; }
.gate__hint span { font-style: normal; font-size: .7em; color: var(--gold-500); margin: 0 .4em; }

.envelope-wrap {
  position: relative;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.envelope {
  --w: min(80vw, 340px);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * .68);
  perspective: 1100px;
}

.envelope__back {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #d9c49b, #cbb284);
  box-shadow: 0 34px 60px -24px rgba(var(--shadow-rgb), calc(.75 * var(--shadow-k))), 0 0 0 1px rgba(163, 129, 64, .45);
}

.envelope__letter {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  height: 92%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14% 8% 0;
  border-radius: 4px;
  background: var(--noise), linear-gradient(180deg, #fffaf0, var(--ivory));
  box-shadow: 0 0 0 1px rgba(163, 129, 64, .35), inset 0 0 0 5px #fffaf0, inset 0 0 0 6px rgba(163, 129, 64, .55);
  color: var(--ink);
}
.letter__eyebrow {
  font-family: var(--f-display);
  font-size: .5rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.letter__names {
  margin: 4px 0 2px;
  font-family: var(--f-names);
  font-weight: 600;
  font-size: clamp(.92rem, 4.3vw, 1.18rem);
  letter-spacing: .16em;
  padding-left: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
}
.letter__names i { color: var(--gold-600); }
.letter__rule { width: 46px; height: 1px; background: var(--gold-600); margin: 2px 0 4px; }
.letter__date {
  font-family: var(--f-display);
  font-size: .62rem;
  letter-spacing: .3em;
  color: var(--gold-700);
}

.envelope__front {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 6px;
  background: var(--noise), linear-gradient(165deg, #f7ecd4 0%, #ead9b5 60%, #dfca9f 100%);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.envelope__front svg,
.envelope__flap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-600);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.envelope__front svg path { vector-effect: non-scaling-stroke; }
.envelope__flap svg path { vector-effect: non-scaling-stroke; }

.envelope__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 4;
  transform-origin: 50% 0;
  filter: drop-shadow(0 4px 3px rgba(60, 40, 10, .22));
}
.envelope__flap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise), linear-gradient(180deg, #f3e6c9 0%, #e5d1a9 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 6px 6px 0 0;
}

.seal {
  --s: 76px;
  position: absolute;
  z-index: 5;
  left: calc(50% - var(--s) / 2);
  top: calc(60% - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.seal::before,
.seal::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(245, 230, 187, .7);
  animation: pulse 2.4s var(--ease-out) infinite;
  pointer-events: none;
}
.seal::after { animation-delay: 1.2s; }
@keyframes pulse {
  0% { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.seal__timer {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  fill: none;
  stroke: var(--gold-200);
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(245, 230, 187, .6));
}
.seal__timer path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.gate.is-counting .seal__timer path { animation: draw var(--auto, 10s) linear forwards; }

.seal__wax {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
  background: radial-gradient(circle at 34% 28%, #fff0bf 0%, #e3c27c 26%, #b8924c 58%, #7c5f2b 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .55),
    inset 0 -5px 10px rgba(60, 40, 10, .45),
    0 8px 18px rgba(var(--shadow-rgb), calc(.45 * var(--shadow-k)));
}
.seal__wax::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(92, 66, 22, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.seal__mono {
  position: relative;
  font-family: var(--f-names);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .02em;
  line-height: 1;
  color: #5a4116;
  text-shadow: 0 1px 0 rgba(255, 245, 210, .6), 0 -1px 0 rgba(60, 40, 10, .25);
}
.seal__mono i { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.05em; margin: 0 .06em; }

/* ---------- Floating controls ---------- */
.music {
  position: fixed;
  top: calc(14px + var(--safe-t));
  right: 14px;
  z-index: 45;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(var(--bg-950-rgb), .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--gold-300);
  cursor: pointer;
}
.music[hidden] { display: none; }
.music span {
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(.25);
  transform-origin: 50% 100%;
  transition: transform .3s;
}
.music.is-playing span { animation: eq 1.1s ease-in-out infinite; }
.music.is-playing span:nth-child(2) { animation-delay: -.3s; }
.music.is-playing span:nth-child(3) { animation-delay: -.6s; }
.music.is-playing span:nth-child(4) { animation-delay: -.9s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + var(--safe-b));
  z-index: 45;
  display: flex;
  gap: 2px;
  padding: 5px;
  width: max-content;
  max-width: calc(100% - 20px);
  border-radius: 999px;
  border: 1px solid rgba(198, 161, 91, .38);
  background: rgba(var(--bg-950-rgb), .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 40px -14px rgba(var(--shadow-rgb), calc(.8 * var(--shadow-k))), inset 0 1px 0 rgba(245, 230, 187, .08);
  transform: translate(-50%, calc(100% + 30px));
  transition: transform .7s var(--ease-out);
}
.dock.is-visible { transform: translate(-50%, 0); }
.dock a {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 58px;
  padding: 8px 6px 6px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .35s, background-color .35s;
}
.dock a .ic { width: 18px; height: 18px; }
.dock a.is-active {
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--gold-200), var(--gold-500));
  box-shadow: 0 4px 14px -4px rgba(219, 187, 118, .6);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* no transform transition here: GSAP animates these buttons' transforms */
  transition: box-shadow .3s, background-color .3s, filter .2s;
}
.btn .ic { width: 15px; height: 15px; }
.btn:active { filter: brightness(.9); }
.btn--gold {
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-400) 45%, var(--gold-600) 100%);
  box-shadow: 0 10px 24px -10px rgba(219, 187, 118, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sheen 4.5s ease-in-out infinite 1.5s;
}
@keyframes sheen {
  0%, 65% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.btn--ghost {
  color: var(--gold-200);
  border-color: var(--line);
  background: rgba(198, 161, 91, .06);
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding: 84px 22px;
}

.sec-head {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 560px;
}
.sec-head__ar {
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--gold-400);
  margin-bottom: 2px;
}
.sec-head__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2.35rem, 10.5vw, 3.3rem);
  line-height: 1.12;
  color: var(--heading);
  perspective: 600px;
}
.sec-head__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-300);
}

.divider {
  display: block;
  width: 220px;
  height: 24px;
  margin: 16px auto 0;
  overflow: visible;
}
.divider path,
.hero__ornament path {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 1;
}
.divider .dot,
.hero__ornament circle { fill: var(--gold-400); }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(64px + var(--safe-t)) 24px 110px;
  text-align: center;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(130vw, 760px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(219, 187, 118, .2) 0%, rgba(219, 187, 118, .06) 35%, transparent 62%);
  animation: glow 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow {
  0%, 100% { scale: 1; }
  50% { scale: 1.1; }
}

.hero__mandala-wrap {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(150vw, 780px);
  aspect-ratio: 1;
  margin: calc(min(150vw, 780px) / -2) 0 0 calc(min(150vw, 780px) / -2);
  pointer-events: none;
}
.hero__mandala-scroll { width: 100%; height: 100%; }
.hero__mandala {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-400);
  stroke-width: .35;
  opacity: .15;
  animation: spin 160s linear infinite;
}

.hero__frame {
  position: absolute;
  top: calc(14px + var(--safe-t));
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(calc(100% - 24px), 620px);
  border: 1px solid var(--line);
  border-radius: 999px 999px 26px 26px;
  pointer-events: none;
}
.hero__frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px 999px 21px 21px;
}
.hero__apex {
  position: absolute;
  top: -15px;
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 50%;
  background: var(--bg-900);
}
.hero__apex svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 4;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
}

.hero__bismillah {
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  line-height: 1.7;
  color: var(--gold-300);
  text-shadow: 0 0 22px rgba(219, 187, 118, .3);
}
.hero__invocation {
  max-width: 260px;
  font-style: italic;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.hero__ornament {
  width: 190px;
  height: 20px;
  margin: 18px 0 16px;
  overflow: visible;
}

.hero__names,
.closing__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 0;
  font-family: var(--f-names);
  font-weight: 500;
  line-height: 1;
}
.hero__names .name,
.closing__names .name {
  display: inline-block;
  font-size: clamp(2.6rem, 12vw, 5.4rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .1em .1em .1em .2em; /* extra left pad balances trailing letter-spacing */
  white-space: nowrap;
  filter: drop-shadow(0 4px 18px rgba(219, 187, 118, .22));
}
.hero__names .amp,
.closing__names .amp {
  display: inline-block;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(2.3rem, 10.5vw, 3.6rem);
  line-height: 1;
  color: var(--gold-400);
  margin: -.12em 0 -.18em;
}

.hero__date {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: min(100%, 320px);
  margin: 14px auto 8px;
}
.hero__date .side {
  font-family: var(--f-display);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-200);
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.hero__date .day {
  font-family: var(--f-display);
  font-size: 3.1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--heading);
}
.hero__month {
  font-family: var(--f-display);
  font-size: .74rem;
  letter-spacing: .4em;
  padding-left: .4em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.hero__venue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 1.08rem;
  font-style: italic;
  color: var(--text);
}
.hero__venue .ic { color: var(--gold-400); }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(26px + var(--safe-b));
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--f-display);
  font-size: .56rem;
  letter-spacing: .32em;
  padding-left: .32em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--line), transparent);
  overflow: hidden;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  left: -1px;
  top: -10px;
  width: 3px;
  height: 10px;
  border-radius: 3px;
  background: var(--gold-200);
  animation: drip 2s var(--ease-out) infinite;
}
@keyframes drip { to { transform: translateY(52px); } }

/* ---------- BLESSING ---------- */
.blessing { padding-top: 70px; }
.verse-card {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 92px 26px 46px;
  text-align: center;
  color: var(--ink);
  border-radius: 999px 999px 22px 22px;
  background:
    var(--noise),
    radial-gradient(120% 70% at 50% 0%, #fffcf4 0%, var(--ivory) 45%, var(--ivory-2) 100%);
  box-shadow:
    0 50px 90px -40px rgba(var(--shadow-rgb), calc(.8 * var(--shadow-k))),
    0 0 0 1px rgba(255, 255, 255, .35),
    0 0 60px -10px rgba(219, 187, 118, .25);
}
.verse-card::before,
.verse-card::after {
  content: '';
  position: absolute;
  border-radius: 999px 999px 16px 16px;
  pointer-events: none;
}
.verse-card::before { inset: 9px; border: 1px solid rgba(163, 129, 64, .6); }
.verse-card::after { inset: 14px; border: 1px solid rgba(163, 129, 64, .25); }

.verse-card__star {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  fill: none;
  stroke: var(--gold-600);
  stroke-width: 3;
}
.verse {
  font-size: clamp(1.45rem, 6.4vw, 1.75rem);
  line-height: 2.15;
  color: var(--ink);
  margin-bottom: 18px;
}
.verse-en {
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.verse-ref {
  margin-top: 20px;
  font-family: var(--f-display);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* ---------- COUPLE ---------- */
.couple__lead {
  max-width: 400px;
  margin: 0 auto 46px;
  text-align: center;
  color: var(--text-dim);
}
.couple__photo {
  position: relative;
  max-width: 330px;
  margin: 0 auto;
}
.apex {
  position: absolute;
  z-index: 2;
  top: -15px;
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 50%;
  background: var(--bg-900);
  box-shadow: 0 0 0 1px var(--line);
}
.apex svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 4;
}
.arch--photo { aspect-ratio: 2 / 2.85; box-shadow: 0 40px 80px -40px rgba(var(--shadow-rgb), calc(.9 * var(--shadow-k))), 0 0 50px -10px rgba(219, 187, 118, .2); }
.arch--photo .arch__inner { background: var(--bg-800); }
.arch--photo .arch__inner::before { display: none; }
.arch--photo .arch__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-950-rgb), .18) 0%, transparent 25%, transparent 70%, rgba(var(--bg-950-rgb), .45) 100%);
  pointer-events: none;
}
.arch--photo img {
  object-position: 50% 62%;
  transform: scale(1.12);
  transform-origin: 50% 60%;
}

.couple__names {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 4px;
  max-width: 420px;
  margin: 22px auto 0;
}
.person { text-align: center; min-width: 0; }

.arch {
  position: relative;
  aspect-ratio: 3 / 4.15;
  border-radius: 999px 999px 14px 14px;
  border: 1px solid var(--line);
}
.arch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sweep), transparent 0deg 250deg, var(--gold-100) 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sweep 5s linear infinite;
  pointer-events: none;
}
@keyframes sweep { to { --sweep: 360deg; } }

.arch__inner {
  position: absolute;
  inset: 7px;
  border-radius: 999px 999px 9px 9px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 70% at 50% 18%, var(--bg-600) 0%, var(--bg-850) 70%);
  box-shadow: inset 0 0 0 1px rgba(198, 161, 91, .35), inset 0 -30px 50px -20px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k)));
}
.arch__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pattern);
  background-size: 46px 46px;
  opacity: .14;
}
.arch__inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person__name {
  margin-top: 0;
  font-family: var(--f-names);
  font-weight: 600;
  font-size: clamp(1.15rem, 5.4vw, 1.8rem);
  letter-spacing: .12em;
  padding-left: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-200);
}
.person__role {
  margin-top: 4px;
  font-family: var(--f-display);
  font-size: .58rem;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.person__family {
  margin-top: 10px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.couple__amp {
  align-self: start;
  margin-top: -6px;
  padding: 0 4px;
  font-family: var(--f-script);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold-400);
}

/* ---------- PHOTO MOMENT ---------- */
.moment { padding-top: 40px; padding-bottom: 40px; }
.moment__frame {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 50px 90px -45px rgba(var(--shadow-rgb), calc(.9 * var(--shadow-k)));
}
.moment__frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.moment__img {
  position: relative;
  aspect-ratio: 2 / 2.9;
  overflow: hidden;
  background: var(--bg-800);
}
.moment__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
  transform: scale(1.18);
}
.moment__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(var(--bg-950-rgb), .55) 74%, rgba(var(--bg-950-rgb), .92) 100%);
  pointer-events: none;
}
.moment__cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 28px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.moment__cap .arabic {
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--gold-200);
  text-shadow: 0 2px 16px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k)));
}
.moment__cap .eyebrow { color: var(--gold-300); }
.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--gold-400);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.corner--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.corner--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.corner--bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- SAVE THE DATE ---------- */
.calendar {
  max-width: 350px;
  margin: 0 auto;
  padding: 24px 18px 20px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(var(--bg-600-rgb), .38), rgba(var(--bg-950-rgb), .65));
  box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), calc(.8 * var(--shadow-k))), inset 0 1px 0 rgba(245, 230, 187, .08);
}
.calendar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 8px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
  text-align: center;
}
.calendar__grid .wd {
  padding-bottom: 6px;
  font-family: var(--f-display);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--gold-500);
}
.calendar__grid .d {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  font-size: 1.06rem;
  color: var(--text-dim);
}
.calendar__grid .is-day { color: var(--on-gold); }
.calendar__grid .is-day b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 600;
  background: radial-gradient(circle at 35% 30%, var(--gold-100), var(--gold-400) 60%, var(--gold-600));
  box-shadow: 0 0 18px rgba(236, 213, 156, .55);
}
.calendar__grid .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  fill: none;
  stroke: var(--gold-200);
  stroke-width: 1.2;
  overflow: visible;
}
.calendar__grid .ring path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.calendar__grid .heart {
  position: absolute;
  top: -4px;
  right: 1px;
  z-index: 2;
  width: 16px;
  height: 16px;
  fill: #e9a99a;
  stroke: #fff2ec;
  stroke-width: 1.2;
  filter: drop-shadow(0 2px 4px rgba(var(--shadow-rgb), calc(.4 * var(--shadow-k))));
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 370px;
  margin: 34px auto 0;
}
.cd {
  padding: 24px 2px 12px;
  text-align: center;
  border-radius: 999px 999px 12px 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--bg-600-rgb), .3), rgba(var(--bg-950-rgb), .55));
  perspective: 300px;
}
.cd__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 7.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-200);
  font-variant-numeric: tabular-nums;
  backface-visibility: hidden;
}
.cd__num.flip { animation: flip .65s var(--ease-out); }
@keyframes flip {
  0% { transform: rotateX(-95deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}
.cd__label {
  display: block;
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: .52rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.countdown__note {
  margin-top: 20px;
  text-align: center;
  font-style: italic;
  color: var(--text-dim);
}

/* ---------- EVENT ---------- */
.event-card {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px 26px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(219, 187, 118, .12), transparent 60%),
    linear-gradient(165deg, rgba(var(--bg-600-rgb), .6), rgba(var(--bg-950-rgb), .88));
  box-shadow: 0 50px 90px -45px rgba(var(--shadow-rgb), calc(.9 * var(--shadow-k))), inset 0 1px 0 rgba(245, 230, 187, .1);
  overflow: hidden;
  isolation: isolate;
}
.event-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 24px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.event-card__shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(245, 230, 187, .1) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: sheen 6s ease-in-out infinite 2s;
  pointer-events: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(198, 161, 91, .08);
  font-family: var(--f-display);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 0 rgba(236, 213, 156, .7);
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(236, 213, 156, .7); }
  100% { box-shadow: 0 0 0 9px rgba(236, 213, 156, 0); }
}

.event-card__ar {
  margin-top: 18px;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--gold-400);
}
.event-card__title {
  display: inline-block;
  font-family: var(--f-script);
  font-size: clamp(2.6rem, 12.5vw, 3.4rem);
  line-height: 1.2;
  padding: .05em .25em .12em;
}

.meta {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 18px 0 24px;
  padding: 0;
  text-align: left;
}
.meta li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: rgba(248, 240, 225, .035);
}
.meta__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold-300);
  background: radial-gradient(circle, rgba(198, 161, 91, .16), transparent 70%);
}
.meta__ic .ic { width: 19px; height: 19px; }
.meta small {
  display: block;
  font-family: var(--f-display);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.meta span:not(.meta__ic) {
  display: block;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--heading);
}

.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

/* ---------- VENUE ---------- */
.venue { text-align: center; }
.venue__card {
  position: relative;
  max-width: 340px;
  aspect-ratio: 300 / 360;
  margin: 0 auto;
  border-radius: 999px 999px 26px 26px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(var(--shadow-rgb), calc(.85 * var(--shadow-k)));
}
.venue__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sweep), transparent 0deg 250deg, var(--gold-100) 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sweep 6s linear infinite;
  pointer-events: none;
}
.venue__scene {
  position: absolute;
  inset: 8px;
  border-radius: 999px 999px 20px 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 26% at 50% 62%, rgba(236, 213, 156, .38), transparent 70%),
    linear-gradient(180deg, var(--bg-950) 0%, var(--bg-800) 38%, var(--bg-600) 61%, var(--bg-800) 62.5%, var(--bg-900) 100%);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.venue__scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.venue__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.venue__art .stars circle { fill: var(--gold-100); animation: twinkle 3s ease-in-out infinite; }
.venue__art .stars circle:nth-child(2n) { animation-delay: -1.2s; }
.venue__art .stars circle:nth-child(3n) { animation-delay: -2.1s; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.venue__art .moon { fill: url(#g-moon); filter: drop-shadow(0 0 10px rgba(245, 230, 187, .6)); }
.venue__art .shore { fill: #000; fill-opacity: .55; }
.venue__art .water path {
  fill: none;
  stroke: rgba(236, 213, 156, .28);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 28 10 6 10;
  animation: ripple-line 9s linear infinite;
}
.venue__art .water path:nth-child(2n) { animation-direction: reverse; animation-duration: 12s; }
@keyframes ripple-line { to { stroke-dashoffset: -108; } }
.venue__art .glint path {
  fill: none;
  stroke: rgba(255, 240, 200, .7);
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: breathe 2.6s ease-in-out infinite;
}
.venue__art .palm path { fill: none; stroke: #000; stroke-opacity: .85; stroke-linecap: round; }
.venue__art .palm .trunk { stroke-width: 6; }
.venue__art .palm .fronds path { stroke-width: 4.5; }
.venue__art .fronds { animation: frond 6s ease-in-out infinite; transform-box: view-box; }
.venue__art .palm--l .fronds { transform-origin: 64px 238px; }
.venue__art .palm--r .fronds { transform-origin: 256px 272px; animation-delay: -2s; }
@keyframes frond { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.venue__pin {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  place-items: center;
}
.venue__pin-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--on-gold);
  background: radial-gradient(circle at 35% 30%, var(--gold-100), var(--gold-400) 55%, var(--gold-600));
  box-shadow: 0 10px 26px -6px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k))), 0 0 30px rgba(236, 213, 156, .45);
  animation: pin-bob 3.2s ease-in-out infinite;
}
.venue__pin-dot .ic { width: 26px; height: 26px; stroke-width: 1.8; }
@keyframes pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.venue__pin .ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(245, 230, 187, .7);
  animation: pulse 2.8s var(--ease-out) infinite;
}
.venue__pin .ripple + .ripple { animation-delay: 1.4s; }

.venue__coords {
  margin-top: -14px;
  margin-bottom: 22px;
  font-family: var(--f-display);
  font-size: .62rem;
  letter-spacing: .28em;
  color: var(--gold-500);
}
.venue__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}
.venue__name {
  margin-top: 28px;
  font-family: var(--f-serif);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading);
}
.venue__addr {
  margin: 2px 0 22px;
  font-style: italic;
  color: var(--text-dim);
}

/* ---------- CLOSING ---------- */
.closing {
  padding: 190px 24px calc(130px + var(--safe-b));
  text-align: center;
  overflow: hidden;
}
.closing > * { max-width: 460px; margin-left: auto; margin-right: auto; }

.lanterns {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  max-width: 620px;
  pointer-events: none;
}
.lantern {
  position: absolute;
  top: 0;
  left: var(--x);
}
.lantern--r { left: auto; right: var(--x); }
.lantern__body {
  display: grid;
  justify-items: center;
  transform-origin: 50% 0;
  animation: sway 5.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.lantern__string {
  display: block;
  width: 1px;
  height: var(--len);
  background: linear-gradient(var(--gold-700), var(--gold-400));
}
.lantern svg {
  width: var(--w);
  height: calc(var(--w) * 2.5);
  color: var(--gold-400);
  filter: drop-shadow(0 0 10px rgba(243, 203, 114, .55));
  animation: flicker 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes flicker {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(243, 203, 114, .45)); }
  40% { filter: drop-shadow(0 0 16px rgba(243, 203, 114, .8)); }
  60% { filter: drop-shadow(0 0 11px rgba(243, 203, 114, .6)); }
}
.crescent {
  position: absolute;
  top: 54px;
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 0 18px rgba(245, 230, 187, .45));
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

.closing__dua {
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  line-height: 2;
  color: var(--gold-300);
}
.closing__dua-en {
  margin-top: 10px;
  font-style: italic;
  color: var(--text-dim);
}
.closing .divider { margin: 30px auto 26px; }
.closing__thanks {
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--gold-300);
}
.closing__text {
  margin-top: 10px;
  color: var(--text-dim);
}
.closing__names { margin-top: 30px; }
.closing__names .name { font-size: clamp(2.2rem, 10.5vw, 4.4rem); }
.hashtag {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--gold-400);
}
.share-btn { margin-top: 30px; }
.footer-note {
  margin-top: 48px;
  font-style: italic;
  font-size: .95rem;
  color: var(--text-dim);
  opacity: .75;
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .section { padding: 130px 32px; }
  .hero__invocation { max-width: none; }
  .closing { padding-top: 220px; }
  .lanterns { left: 50%; translate: -50% 0; width: 100%; }
}

@media (max-width: 359px) {
  .dock a { min-width: 52px; padding-inline: 4px; }
  .hero__date { gap: 10px; }
}

@media (hover: hover) {
  .btn--gold:hover { box-shadow: 0 14px 30px -10px rgba(219, 187, 118, .85), inset 0 1px 0 rgba(255, 255, 255, .5); filter: brightness(1.05); }
  .btn--ghost:hover { background: rgba(198, 161, 91, .14); }
  .dock a:not(.is-active):hover { color: var(--gold-200); }
}

/* ---------- Light themes (beige, sunset): component refinements ---------- */
:is([data-theme="beige"], [data-theme="sunset"]) .calendar,
:is([data-theme="beige"], [data-theme="sunset"]) .event-card,
:is([data-theme="beige"], [data-theme="sunset"]) .cd {
  background: var(--noise), linear-gradient(165deg, #fffbf4 0%, #f5ebdc 100%);
}
:is([data-theme="beige"], [data-theme="sunset"]) .meta li { background: rgba(255, 255, 255, .45); }
:is([data-theme="beige"], [data-theme="sunset"]) .btn--gold,
:is([data-theme="beige"], [data-theme="sunset"]) .dock a.is-active,
:is([data-theme="beige"], [data-theme="sunset"]) .calendar__grid .is-day b,
:is([data-theme="beige"], [data-theme="sunset"]) .venue__pin-dot { background: var(--metal); }
:is([data-theme="beige"], [data-theme="sunset"]) .btn--ghost { background: rgba(255, 255, 255, .35); }
:is([data-theme="beige"], [data-theme="sunset"]) .seal::before,
:is([data-theme="beige"], [data-theme="sunset"]) .seal::after { border-color: rgba(139, 103, 40, .55); }
:is([data-theme="beige"], [data-theme="sunset"]) .gate { background: radial-gradient(85% 60% at 50% 48%, #fbf6ee 0%, var(--bg-900) 55%, var(--bg-950) 100%); }
:is([data-theme="beige"], [data-theme="sunset"]) .backdrop::before,
:is([data-theme="beige"], [data-theme="sunset"]) .gate__pattern { opacity: .1; }
:is([data-theme="beige"], [data-theme="sunset"]) .hero__mandala { opacity: .13; }
:is([data-theme="beige"], [data-theme="sunset"]) .hero__bismillah,
:is([data-theme="beige"], [data-theme="sunset"]) .gate__names { text-shadow: none; }
:is([data-theme="beige"], [data-theme="sunset"]) .verse-card { box-shadow: 0 40px 80px -40px rgba(105, 76, 40, .45), 0 0 0 1px rgba(139, 103, 40, .25); }
:is([data-theme="beige"], [data-theme="sunset"]) .crescent { filter: drop-shadow(0 0 10px rgba(168, 132, 63, .5)) saturate(1.2) brightness(.85); }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__scene {
  background:
    radial-gradient(60% 26% at 50% 62%, rgba(255, 238, 196, .95), transparent 70%),
    linear-gradient(180deg, #e7cfa8 0%, #f0dec1 40%, #f8ecd6 61%, #e4cfac 62.5%, #d9c09a 100%);
}
:is([data-theme="beige"], [data-theme="sunset"]) .venue__art .stars circle { fill: var(--gold-500); }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__pin .ripple { border-color: rgba(122, 90, 36, .6); }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__art .moon { filter: drop-shadow(0 0 8px rgba(168, 132, 63, .55)) brightness(.9); }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__art .shore { fill: #5a3e20; fill-opacity: .32; }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__art .water path { stroke: rgba(122, 90, 36, .38); }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__art .glint path { stroke: rgba(122, 90, 36, .65); }
:is([data-theme="beige"], [data-theme="sunset"]) .venue__art .palm path { stroke: #4a3424; stroke-opacity: .82; }
:is([data-theme="beige"], [data-theme="sunset"]) .moment__cap .arabic { color: var(--gold-100); text-shadow: 0 2px 14px rgba(40, 28, 16, .7); }
:is([data-theme="beige"], [data-theme="sunset"]) .moment__cap .eyebrow { color: var(--gold-100); }
:is([data-theme="beige"], [data-theme="sunset"]) .moment__img::after { background: linear-gradient(180deg, transparent 50%, rgba(40, 28, 16, .45) 74%, rgba(40, 28, 16, .82) 100%); }


/* ---------- Sunset themes: wax seal, envelope paper, dusk lagoon ---------- */
[data-theme^="sunset"] .seal__wax { background: radial-gradient(circle at 34% 28%, #fff1d6 0%, #fbb931 26%, #f88f22 58%, #b8480b 100%); }
[data-theme^="sunset"] .seal__wax::before { border-color: rgba(110, 40, 4, .45); }
[data-theme^="sunset"] .seal__mono { color: #6b2604; }
[data-theme^="sunset"] .envelope__back { background: linear-gradient(180deg, #f6cf98, #eebc7e); }
[data-theme^="sunset"] .envelope__front { background: var(--noise), linear-gradient(165deg, #fff2dc 0%, #ffe3b3 60%, #f9d39a 100%); }
[data-theme^="sunset"] .envelope__flap::before { background: var(--noise), linear-gradient(180deg, #fff0d6 0%, #fbd9a4 100%); }
[data-theme^="sunset"] .venue__scene {
  background:
    radial-gradient(55% 22% at 50% 61%, rgba(255, 241, 214, .95), transparent 70%),
    linear-gradient(180deg, #ffe9c6 0%, #ffd38f 30%, #fbb931 48%, #f88f22 60.5%, #c9500c 62.5%, #7a2e08 100%);
}
[data-theme^="sunset"] .venue__art .stars circle { fill: #fff7e8; }
[data-theme^="sunset"] .venue__art .moon { fill: #fff6e5; filter: drop-shadow(0 0 10px rgba(255, 246, 229, .9)); }
[data-theme^="sunset"] .venue__art .shore { fill: #4a1a05; fill-opacity: .55; }
[data-theme^="sunset"] .venue__art .water path { stroke: rgba(255, 227, 179, .5); }
[data-theme^="sunset"] .venue__art .glint path { stroke: #ffe3b3; }
[data-theme^="sunset"] .venue__art .palm path { stroke: #2e1004; stroke-opacity: .9; }
[data-theme^="sunset"] .venue__pin .ripple { border-color: rgba(201, 80, 12, .6); }
[data-theme^="sunset"] .crescent { filter: drop-shadow(0 0 12px rgba(251, 185, 49, .55)); }

/* ---------- Appearance (light / dark / device) ---------- */
.appearance {
  position: fixed;
  top: calc(14px + var(--safe-t));
  left: 14px;
  z-index: 70;
}
.appearance__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(var(--bg-950-rgb), .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--gold-300);
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(var(--shadow-rgb), calc(.7 * var(--shadow-k)));
}
.appearance__btn .ic {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  transition: opacity .45s, transform .6s var(--ease-out);
}
[data-scheme="light"] .appearance__btn .ic--moon,
[data-scheme="dark"] .appearance__btn .ic--sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.appearance__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: .5rem;
  font-weight: 600;
  color: var(--on-gold);
  background: var(--metal);
  box-shadow: 0 0 0 2px var(--bg-900);
  transform: scale(0);
  transition: transform .4s var(--ease-out);
}
[data-appearance="auto"] .appearance__badge { transform: scale(1); }

.appearance__menu {
  position: absolute;
  top: 54px;
  left: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(var(--bg-950-rgb), .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 50px -18px rgba(var(--shadow-rgb), calc(.8 * var(--shadow-k)));
  transform-origin: 22px -10px;
  animation: menu-in .35s var(--ease-out);
}
.appearance__menu[hidden] { display: none; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.92); }
  to { opacity: 1; transform: none; }
}
.appearance__title {
  padding: 6px 10px 8px;
  font-family: var(--f-display);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.appearance__menu button {
  display: grid;
  grid-template-columns: 20px 1fr 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
  font-family: var(--f-display);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.appearance__menu button .ic { width: 18px; height: 18px; color: var(--gold-400); }
.appearance__menu button .tick { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease-out); }
.appearance__menu button[aria-checked="true"] { background: rgba(var(--bg-600-rgb), .5); color: var(--heading); }
.appearance__menu button[aria-checked="true"] .tick { opacity: 1; transform: none; }
@media (hover: hover) {
  .appearance__menu button:hover { background: rgba(var(--bg-600-rgb), .35); }
}

/* Circular reveal when switching appearance (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
  }
  .preloader__mark path { stroke-dashoffset: 0; }
  .preloader__mono, .preloader__text { opacity: 1; }
}