:root {
  --table: #f3d6d1;
  --table-hi: #fff2ec;
  --paper: #fffaf3;
  --liner: #f7ece2;
  --plum: #44202f;
  --rani: #b3134f;
  --rani-deep: #8a0d3c;

  --foil-light: linear-gradient(100deg, #c8963e, #f8e3a3 45%, #d8ab52 60%, #b9873a);
  --foil-bright: linear-gradient(100deg, #f0cc78, #fff3cc 45%, #f6da93 60%, #e9c06a);
  --foil-dark: linear-gradient(100deg, #8a5f1f, #caa04c 45%, #9a6d28 60%, #7a5318);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-door: cubic-bezier(0.6, 0.04, 0.2, 1);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --arabic: "Amiri", "Geeza Pro", serif;
  --urdu: "Noto Nastaliq Urdu", "Amiri", serif;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d8a84f' stroke-width='.8'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 0l15 15M64 0L49 15M0 64l15-15M64 64L49 49'/%3E%3C/g%3E%3C/svg%3E");

  --card-w: min(calc(100vw - 32px), 440px, 56svh);
  --paper-shadow:
    0 1px 1px rgb(68 32 47 / 0.08),
    0 8px 16px -4px rgb(68 32 47 / 0.14),
    0 30px 60px -18px rgb(68 32 47 / 0.32);
}

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

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background:
    var(--noise),
    radial-gradient(110% 60% at 50% 0%, var(--table-hi), transparent 70%),
    radial-gradient(80% 50% at 100% 100%, #f7e3c9, transparent 70%),
    var(--table);
  background-attachment: fixed;
  color: var(--plum);
  font-family: var(--sans);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }

p, h1, h2 { margin: 0; font-weight: inherit; }

.foil {
  background: var(--foil-light);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s ease-in-out infinite alternate;
}
.on-paper .foil { background-image: var(--foil-dark); }
.rani .foil { background-image: var(--foil-bright); }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Gatefold: two paper doors held shut by a wax seal ---------- */

.gate {
  position: fixed;
  inset: 0 0 auto;
  height: 100svh;
  z-index: 10;
  display: grid;
  place-items: center;
  transition: opacity 0.8s ease 1.9s;
}
.gate.opened { opacity: 0; pointer-events: none; }
.gate.gone { display: none; }

.fold {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  perspective: 1800px;
  container-type: inline-size;
}

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  transition: transform 1.7s var(--ease-door) 0.35s;
}
.door.l { left: 0; transform-origin: left center; }
.door.r { right: 0; transform-origin: right center; }
.gate.opened .door.l { transform: rotateY(-162deg); }
.gate.opened .door.r { transform: rotateY(162deg); }

.door-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.door-face.out { background: var(--noise), var(--rani); box-shadow: var(--paper-shadow); }
.door.l .out { border-radius: 3px 0 0 3px; }
.door.r .out { border-radius: 0 3px 3px 0; }
.door-face.in {
  transform: rotateY(180deg);
  background: var(--noise), linear-gradient(rgb(247 236 226 / 0.7), rgb(247 236 226 / 0.7)), var(--lattice) center / 32px, var(--liner);
}
/* The outside darkens as it turns away from the light. */
.door-face.out::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(60 0 20 / 0.45);
  opacity: 0;
  transition: opacity 1.2s ease 0.5s;
}
.gate.opened .door-face.out::after { opacity: 1; }

/* Each door holds a double-width copy of the artwork, so it reads as one sheet when closed. */
.door-art {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13cqi 9cqi 11cqi;
  text-align: center;
  color: var(--paper);
}
.door.l .door-art { left: 0; }
.door.r .door-art { right: 0; }
.door-art::before, .door-art::after {
  content: "";
  position: absolute;
  inset: 4cqi;
  border: 1px solid rgb(240 210 140 / 0.7);
  pointer-events: none;
}
.door-art::after { inset: 5.6cqi; border-width: 0.5px; opacity: 0.6; }

.door-art .bismillah { font-size: 8.4cqi; }
.door-art .tr { margin-top: 1cqi; font-size: 3.2cqi; letter-spacing: 0.03em; opacity: 0.8; max-width: 52cqi; text-wrap: balance; }
.door-art .short { margin-top: auto; font-family: var(--serif); font-style: italic; font-size: 11cqi; line-height: 1; }
.door-art .short span { padding: 0 0.12em; }
.door-art .hint { margin-top: 4cqi; font-size: 3.2cqi; letter-spacing: 0.1em; opacity: 0.8; }

.seal {
  position: absolute;
  top: 50%;
  width: 26cqi;
  aspect-ratio: 1;
  translate: 0 -62%;
  filter: drop-shadow(0 3px 4px rgb(60 0 20 / 0.45));
  animation: breathe 2.8s ease-in-out infinite;
}
.door.l .seal { right: -13cqi; }
.door.r .seal { left: -13cqi; }
.gate.opened .seal { animation: press 0.35s var(--ease-out); }
@keyframes breathe { 50% { scale: 1.04; } }
@keyframes press { 40% { scale: 0.92; } }

.open-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.open-btn:focus-visible { outline: 2px solid var(--rani); outline-offset: 6px; border-radius: 4px; }

/* ---------- Rose petals, thrown when the seal breaks ---------- */

.petals { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.petals i {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: calc(16px * var(--s));
  height: calc(20px * var(--s));
  border-radius: 70% 10% 70% 40% / 80% 20% 60% 40%;
  background: radial-gradient(circle at 35% 30%, #ff9bb6, #e0245e 55%, #a70f44);
  opacity: 0.92;
  animation: fall var(--t) cubic-bezier(0.35, 0.1, 0.6, 1) var(--d) forwards;
}
.petals i:nth-child(3n) { background: radial-gradient(circle at 35% 30%, #fff1f4, #f7b3c6 60%, #e27b9b); }
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(var(--r)) rotateX(0); }
  30%  { transform: translate(var(--sw), 32vh) rotate(calc(var(--r) + 120deg)) rotateX(220deg); }
  65%  { transform: translate(calc(var(--sw) * -0.6), 70vh) rotate(calc(var(--r) + 220deg)) rotateX(440deg); }
  100% { transform: translate(calc(var(--sw) * 0.4), 112vh) rotate(calc(var(--r) + 330deg)) rotateX(720deg); }
}

/* ---------- Cards ---------- */

.slide {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6svh 16px;
  scroll-snap-align: center;
  perspective: 1400px;
  position: relative;
}

/* Tells guests there is more below; also scrolls there on tap. */
.next {
  position: absolute;
  left: 50%;
  bottom: max(1.5svh, 10px);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--plum);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.next svg { width: 26px; height: 26px; color: var(--rani); animation: nudge 1.8s ease-in-out infinite; }
.next:focus-visible { outline: 2px solid var(--rani); outline-offset: 2px; border-radius: 8px; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.js .next { opacity: 0; transition: opacity 0.8s ease 2.4s; }
.js .slide:has(.in) .next { opacity: 1; }

.card {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  perspective: 1600px;
}

.paper {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--noise), var(--paper);
  box-shadow: var(--paper-shadow);
  color: var(--plum);
}
.paper.rani { background: var(--noise), radial-gradient(120% 80% at 50% 0%, #c81c5c, var(--rani) 60%, var(--rani-deep)); color: var(--paper); }

.rule::before, .rule::after {
  content: "";
  position: absolute;
  inset: 4cqi;
  border: 1px solid var(--line, #c49a4c);
  pointer-events: none;
}
.rule::after { inset: 5.6cqi; border-width: 0.5px; opacity: 0.65; }
.rani.rule { --line: rgb(240 210 140 / 0.75); }

.content {
  position: absolute;
  inset: 9cqi 10cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqi;
  text-align: center;
}

.star { width: 6cqi; height: 6cqi; opacity: 0.85; }
.rani .star { color: #ecc978; }
.on-paper .star { color: #a8873f; }

.bismillah { font-family: var(--arabic); font-weight: 400; line-height: 1.7; direction: rtl; }

/* Main card */
.main .arch { position: absolute; inset: 0; width: 100%; height: 100%; }
.arch path { fill: none; stroke: #c49a4c; stroke-width: 1.2; }
.arch path + path { stroke-width: 0.6; opacity: 0.6; }
.main .content { inset: 25cqi 12cqi 10cqi; gap: 2cqi; }
.main .bismillah { font-size: 7.8cqi; margin-bottom: 1cqi; }

.lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4cqi;
  line-height: 1.4;
  opacity: 0.8;
  max-width: 32ch;
  text-wrap: balance;
}

.couple { display: grid; justify-items: center; gap: 1.6cqi; margin: 1cqi 0; }
.name { display: grid; gap: 0.4cqi; }
.name small { font-size: 3.3cqi; letter-spacing: 0.22em; opacity: 0.7; }
.name strong { font-family: var(--serif); font-weight: 500; font-size: 10cqi; line-height: 1.04; padding: 0 0.05em; }

.weds {
  display: flex;
  align-items: center;
  gap: 3cqi;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.8cqi;
  line-height: 1;
  color: var(--rani);
}
.weds::before, .weds::after { content: ""; width: 9cqi; height: 1px; background: currentColor; opacity: 0.45; }
.rani .weds { color: #f3d48a; }

.verse { display: grid; gap: 1.2cqi; margin-top: 1cqi; }
.verse .ar { font-family: var(--arabic); font-size: 5.2cqi; line-height: 1.6; color: var(--rani); direction: rtl; }
.verse .en { font-family: var(--serif); font-style: italic; font-size: 3.5cqi; line-height: 1.45; opacity: 0.8; }
.verse cite { font-style: normal; font-size: 3cqi; letter-spacing: 0.06em; opacity: 0.65; }

/* Event flip cards */
.flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 3px;
}
.flip:focus-visible { outline: 2px solid var(--rani); outline-offset: 6px; }
.flip .paper { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .back { transform: rotateY(180deg); }
.flip.peek { animation: peek 6s var(--ease-io) 3s infinite; }
@keyframes peek {
  0%, 80%, 100% { transform: rotateY(0); }
  87% { transform: rotateY(-22deg); }
  93% { transform: rotateY(4deg); }
}

.ur { font-family: var(--urdu); font-size: 7.6cqi; line-height: 1.9; direction: rtl; }
.title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 17cqi; line-height: 1; margin-top: -3cqi; padding: 0 0.06em; }

.pair { display: grid; justify-items: center; gap: 1.4cqi; margin: 2cqi 0; }
.pair span:not(.weds) { font-family: var(--serif); font-size: 5.6cqi; line-height: 1.15; }

.date {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4cqi;
  width: 100%;
}
.date span {
  font-size: 3.1cqi;
  letter-spacing: 0.02em;
  padding: 1.6cqi 0;
  border-block: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.date b { font-family: var(--serif); font-weight: 400; font-size: 15cqi; line-height: 1; }

.tap {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqi;
  margin-top: 3cqi;
  font-size: 3.2cqi;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.tap svg { width: 4.2cqi; height: 4.2cqi; }

.back .content { gap: 3cqi; }
.back .lead { font-size: 4.4cqi; }
.venue { display: grid; gap: 1.6cqi; }
.venue strong { font-family: var(--serif); font-weight: 400; font-size: 10cqi; line-height: 1.08; text-wrap: balance; }
.venue span { font-size: 4cqi; letter-spacing: 0.04em; opacity: 0.75; }
.when { font-family: var(--serif); font-style: italic; font-size: 4.2cqi; opacity: 0.85; }
.accent-rani .venue strong { color: var(--rani); }

.map {
  margin-top: 2cqi;
  font-size: 3.5cqi;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--accent, var(--rani));
  text-decoration: none;
  border-radius: 999px;
  padding: 2.8cqi 6cqi;
  box-shadow: 0 6px 14px -6px var(--accent, var(--rani));
  transition: transform 160ms var(--ease-out), filter 200ms ease;
}
.maps { display: grid; justify-items: center; gap: 2.4cqi; margin-top: 2cqi; }
.maps .map { margin-top: 0; }
.map.alt { color: var(--accent, var(--rani)); background: none; box-shadow: inset 0 0 0 1px var(--accent, var(--rani)); }
.map:active { transform: scale(0.97); }
.map:focus-visible { outline: 2px solid var(--accent, var(--rani)); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .map:hover { filter: brightness(1.12); }
}

/* ---------- Closing dua ---------- */

.dua {
  min-height: 70svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 10svh 16px 14svh;
  text-align: center;
  scroll-snap-align: end;
}
.dua .ar { font-family: var(--arabic); font-size: clamp(24px, 6vw, 34px); line-height: 1.8; color: var(--rani); direction: rtl; }
.dua .en { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 4vw, 19px); line-height: 1.5; max-width: 34ch; opacity: 0.85; }
.dua .sign { margin-top: 20px; font-size: 14px; letter-spacing: 0.06em; opacity: 0.6; }

/* ---------- Choreography (only once JS has run) ---------- */

.js .main .arch path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-io) 0.9s; }
.js .main .arch path + path { transition-delay: 1.1s; }
.js .main.in .arch path { stroke-dashoffset: 0; }

/* Ink settling into the paper, line by line */
.js .ink > :not(.couple), .js .ink .couple > *, .js .dua > * {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--base, 0ms) + var(--i, 0) * 110ms);
}
.js .main .ink { --base: 900ms; }
.js .drop .ink { --base: 700ms; }
.in .ink > :not(.couple), .in .ink .couple > *, .in.dua > * { opacity: 1; transform: none; filter: none; }

/* Event cards land on the table like a sheet of card stock */
.drop { rotate: var(--tilt, 0deg); }
.js .drop { opacity: 0; }
.js .drop.in { animation: land 1.5s var(--ease-out) forwards; }
@keyframes land {
  0%   { opacity: 0; transform: translateY(-70px) rotateX(38deg) rotateZ(-7deg) scale(1.04); }
  55%  { opacity: 1; transform: translateY(6px) rotateX(-5deg) rotateZ(1deg) scale(1); }
  80%  { transform: translateY(-2px) rotateX(1.5deg) rotateZ(-0.3deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .foil, .seal, .flip.peek, .next svg { animation: none !important; }
  .door { transition: opacity 0.6s ease !important; }
  .gate.opened .door { transform: none !important; opacity: 0; }
  .js .drop.in { animation: fade 0.6s ease forwards; }
  .js .ink > *, .js .ink .couple > *, .js .dua > * { transform: none !important; filter: none !important; transition: opacity 0.6s ease !important; }
  .js .main .arch path { stroke-dashoffset: 0; transition: none; }
}
@keyframes fade { to { opacity: 1; } }