/* ───────────── Wedding invitation ─────────────
   Fine stationery: ivory paper, black ink, one pomegranate red, gold only as foil hairlines.
   The page turns between paper and night like pages of a book.
   Mobile first; logical properties so Kurdish/Arabic (RTL) and English (LTR) both read naturally. */

:root {
  /* paper */
  --paper: #f2ece1;
  --paper-hi: #f8f4ec;
  --paper-lo: #e7dece;
  --ink: #1d1915;
  --ink-2: #4a423a;
  --ink-3: #857a6c;
  --foil: #a07f47;
  --pom: #7b1e2a;
  /* night */
  --night: #14110e;
  --night-2: #1c1814;
  --ivory: #eee6d8;
  --champ: #cdb386;
  --pom-l: #c4515c;

  /* tone-aware roles (night is the default, .sheet switches to paper) */
  --fg: var(--ivory);
  --fg-2: rgba(238, 230, 216, 0.78);
  --fg-3: rgba(238, 230, 216, 0.55);
  --accent: var(--pom-l);
  --foil-c: var(--champ);
  --line: rgba(238, 230, 216, 0.16);
  --card-bg: rgba(255, 255, 255, 0.025);
  --card-line: rgba(238, 230, 216, 0.14);
  --field-line: rgba(238, 230, 216, 0.28);
  --btn-bg: var(--ivory);
  --btn-fg: var(--ink);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --f-name: "Aref Ruqaa", "Amiri", serif;
  --f-poem: "Amiri", "Vazirmatn", serif;
  --f-ui: "Vazirmatn", system-ui, sans-serif;
  --f-num: "Amiri", serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23a07f47' stroke-width='.8'%3E%3Cpath d='M0 .8h28M0 13.2h28'/%3E%3Cpath d='M14 2.6l4.4 4.4-4.4 4.4-4.4-4.4z'/%3E%3Cpath d='M0 7h9.6M18.4 7H28'/%3E%3C/g%3E%3Cpath d='M14 5.1L15.9 7 14 8.9 12.1 7z' fill='%237b1e2a'/%3E%3C/svg%3E");
  --kilim-n: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23cdb386' stroke-width='.8'%3E%3Cpath d='M0 .8h28M0 13.2h28'/%3E%3Cpath d='M14 2.6l4.4 4.4-4.4 4.4-4.4-4.4z'/%3E%3Cpath d='M0 7h9.6M18.4 7H28'/%3E%3C/g%3E%3Cpath d='M14 5.1L15.9 7 14 8.9 12.1 7z' fill='%23c4515c'/%3E%3C/svg%3E");
  --kilim-img: var(--kilim-n);
}
.sheet {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --accent: var(--pom);
  --foil-c: var(--foil);
  --line: rgba(29, 25, 21, 0.14);
  --card-bg: var(--paper-hi);
  --card-line: rgba(29, 25, 21, 0.1);
  --field-line: rgba(29, 25, 21, 0.26);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper-hi);
  --kilim-img: var(--kilim);
}
:root[lang="en"] {
  --f-name: "Pinyon Script", cursive;
  --f-poem: "Cormorant Garamond", Georgia, serif;
  --f-ui: "Cormorant Garamond", Georgia, serif;
  --f-num: "Cormorant Garamond", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0; min-height: 100%;
  background: var(--night); color: var(--fg);
  font-family: var(--f-ui); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
:root[lang="en"] body { font-size: 19px; line-height: 1.55; font-variant-numeric: lining-nums; }
body.sealed { overflow: hidden; height: 100svh; }
img, svg, canvas { display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 1.5px solid var(--foil-c); outline-offset: 3px; border-radius: 8px; }

#sky { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: -1; pointer-events: none; }
#fx { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: 40; pointer-events: none; }

/* ───────────── paper sheets ───────────── */
.sheet {
  position: relative; color: var(--fg);
  background: var(--noise), radial-gradient(140% 60% at 50% 0%, var(--paper-hi), var(--paper) 55%, #ede5d7 100%);
  background-color: var(--paper);
}
/* deckled edges where the paper meets the night */
.sheet::before, .sheet::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; z-index: 2; pointer-events: none;
  background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v6c-6 3-11-1-17 2s-9 5-15 2-10-4-16-1-10 5-17 3-9-5-15-3-11 6-17 4-8-4-14-2-12 5-18 3-9-5-16-2-10 4-16 2-8-4-14-2-11 5-17 3-9-3-15-1-12 4-17 2-8-4-15-1C11 12 6 8 0 9z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v6c-6 3-11-1-17 2s-9 5-15 2-10-4-16-1-10 5-17 3-9-5-15-3-11 6-17 4-8-4-14-2-12 5-18 3-9-5-16-2-10 4-16 2-8-4-14-2-11 5-17 3-9-3-15-1-12 4-17 2-8-4-15-1C11 12 6 8 0 9z'/%3E%3C/svg%3E") 0 0 / 240px 14px repeat-x;
}
.sheet::after { bottom: -13px; background: #ede5d7; }
.sheet::before { top: -13px; transform: scaleY(-1); }
.sheet-first::before, .sheet-last::after { display: none; }

/* ───────────── envelope ───────────── */
.env-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 72px 20px max(28px, env(safe-area-inset-bottom));
  color: var(--ink);
  /* linen tablecloth under the envelope */
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(255, 252, 245, 0.55), transparent 70%),
    repeating-linear-gradient(0deg, rgba(90, 70, 45, 0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 70, 45, 0.04) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 40%, #e2d8c8, #cbbfac 75%, #b9ac97);
  transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s;
  touch-action: none;
}
.env-screen.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.env-stage { perspective: 1400px; }
.env {
  position: relative; width: min(76vw, 340px, 46svh); aspect-ratio: 0.72;
  perspective: 900px;
  animation: envFloat 6s ease-in-out infinite;
  transition: transform 1.2s var(--ease), opacity 1s var(--ease);
}
@keyframes envFloat { 50% { transform: translateY(-6px) rotate(-0.5deg); } }
.env > * { position: absolute; }
.env-back {
  inset: 0; border-radius: 6px;
  background: var(--noise), linear-gradient(170deg, #e7dcc8, #d8cab1);
  box-shadow: 0 2px 3px rgba(60, 45, 25, 0.18), 0 26px 60px rgba(60, 45, 25, 0.35), 0 60px 90px rgba(60, 45, 25, 0.18);
}
.env-letter {
  inset: 7% 7% 10%; border-radius: 3px; z-index: 1;
  background: var(--noise), linear-gradient(180deg, #fdfaf4, #f4ede1);
  box-shadow: 0 1px 2px rgba(60, 45, 25, 0.15), 0 8px 24px rgba(60, 45, 25, 0.12);
  transition: transform 1.15s var(--ease);
  display: grid; place-items: start center; padding-top: 9%;
}
.letter-inner { text-align: center; color: var(--ink); }
.letter-orn { display: block; width: 64%; height: 12px; margin: 0 auto 12px; background: var(--kilim) center/auto 12px repeat-x; }
.letter-names { margin: 0; font-family: var(--f-name); font-size: clamp(24px, 8.5vw, 38px); line-height: 1.25; color: var(--ink); display: flex; flex-direction: column; align-items: center; }
.letter-and { font-size: .55em; color: var(--pom); }
.letter-date { margin: 8px 0 0; font-family: var(--f-poem); font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.env-front {
  inset: 0; border-radius: 6px; z-index: 2;
  clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(90, 65, 35, .12) 50%, transparent calc(50% + .5px)) left bottom / 50% 58% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .5px), rgba(90, 65, 35, .12) 50%, transparent calc(50% + .5px)) right bottom / 50% 58% no-repeat,
    var(--noise),
    linear-gradient(175deg, #f7f1e6 0%, #efe6d6 60%, #e6dbc7 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 10% 11%; text-align: center;
}
.env-border { inset: 9px; border: .8px solid rgba(160, 127, 71, .55); border-radius: 3px; pointer-events: none;
  clip-path: polygon(0 0, 50% 41%, 100% 0, 100% 100%, 0 100%); }
.env-title { margin: 0 0 6px; font-family: var(--f-poem); font-size: 13px; letter-spacing: .04em; color: var(--foil); }
:root[lang="en"] .env-title { text-transform: uppercase; letter-spacing: .3em; font-size: 11px; font-weight: 600; }
.env-to { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; }
.env-to-label { font-family: var(--f-poem); font-size: 14px; color: var(--ink-3); }
:root[lang="en"] .env-to-label { font-style: italic; font-size: 16px; }
.env-to-name { font-family: var(--f-name); font-size: clamp(30px, 10vw, 44px); line-height: 1.35; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.env-to-name:empty { display: none; }
.env-flap {
  inset: 0 0 auto 0; height: 47%; transform-origin: 50% 0; z-index: 3;
  transform: rotateX(0deg); transition: transform 1.05s cubic-bezier(.55,.05,.25,1);
}
.env-flap { transform-style: preserve-3d; }
.flap-face, .flap-liner { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flap-liner {
  position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotateX(180deg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23d9be8c' stroke-opacity='.55' stroke-width='.8'%3E%3Cpath d='M18 3l15 15-15 15L3 18z'/%3E%3Cpath d='M18 11l7 7-7 7-7-7z'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23d9be8c' fill-opacity='.7'/%3E%3C/svg%3E") center / 36px 36px,
    linear-gradient(0deg, #5e1520, #7b1e2a);
}
.flap-face {
  position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--noise), linear-gradient(180deg, #f1e8d8 0%, #e5d8c1 100%);
  filter: drop-shadow(0 1.5px 1.5px rgba(60, 45, 25, .22));
}
.flap-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 35%, rgba(90,60,30,.08)); }
.seal {
  z-index: 4; left: 50%; top: 47%; width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 6px rgba(70, 10, 20, .35));
  transition: transform .5s var(--ease), opacity .45s ease, filter .5s;
  display: grid; place-items: center;
}
.seal-half { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .75s cubic-bezier(.3,.6,.3,1), opacity .55s ease .2s; }
.seal-half.l { clip-path: polygon(0 0, 52% 0, 47% 22%, 54% 41%, 46% 60%, 53% 79%, 48% 100%, 0 100%); }
.seal-half.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 53% 79%, 46% 60%, 54% 41%, 47% 22%); }
.seal::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; border: 1px solid rgba(123, 30, 42, .45); animation: sealPulse 2.6s ease-out infinite; }
@keyframes sealPulse { from { transform: scale(.82); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.seal-wax { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal-mono { position: relative; font-family: var(--f-name); font-size: clamp(17px, 5.2vw, 26px); line-height: 1; white-space: nowrap;
  color: #d9be8c; text-shadow: 0 1px 0 rgba(60, 0, 10, .6), 0 -1px 0 rgba(255, 230, 200, .18); }

@keyframes sweep { 55%, 100% { transform: translateX(120%); } }
.open-hint { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: none; transition: opacity .4s; }
.open-hint .tap { font-family: var(--f-poem); font-size: 16px; color: var(--ink-2); animation: hintPulse 2.6s ease-in-out infinite; }
:root[lang="en"] .open-hint .tap { font-style: italic; font-size: 19px; }
.open-hint small { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
:root[lang="en"] .open-hint small { font-size: 14px; font-style: italic; }
.open-hint svg { width: 15px; height: 15px; }
@keyframes hintPulse { 50% { opacity: .45; } }
.env-screen { cursor: pointer; }

/* opening sequence */
.env-screen.crack .env { animation: none; }
.env-screen.crack .seal::before { display: none; }
.env-screen.crack .seal-half.l { transform: translate(-34%, 60%) rotate(-30deg); opacity: 0; }
.env-screen.crack .seal-half.r { transform: translate(36%, 68%) rotate(26deg); opacity: 0; }
.env-screen.crack .open-hint { opacity: 0; }
.env-screen.opening .env-flap { transform: rotateX(178deg); }
.env-screen.flap-back .env-flap { z-index: 0; }
.env-screen.letter-up .env-letter { transform: translateY(-58%); }
.env-screen.zoom .env { transform: translateY(6%) scale(1.45); opacity: 0; }

/* phones: the whole screen is the envelope */
@media (max-width: 699px) {
  .env-screen { padding: 0; gap: 0; }
  .env-stage { position: absolute; inset: 0; perspective: none; }
  .env { width: 100%; height: 100%; aspect-ratio: auto; animation: none; perspective: 1700px; }
  .env-back, .env-front { border-radius: 0; transition: transform 1.1s cubic-bezier(.65,.02,.3,1); }
  .env-back { box-shadow: none; }
  .env-front { clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%); padding: 0 10% calc(19svh + env(safe-area-inset-bottom)); }
  .env-border { inset: 14px; clip-path: polygon(0 0, 50% 39.4%, 100% 0, 100% 100%, 0 100%); }
  .env-flap { height: 44%; }
  .seal { top: 44%; width: min(30vw, 128px); }
  .seal-mono { font-size: min(8vw, 32px); }
  .env-letter { inset: 5.5% 6% 7%; padding-top: 14%; transition: transform 1.2s cubic-bezier(.3,.7,.2,1); }
  .letter-names { font-size: clamp(38px, 12vw, 56px); }
  .letter-orn { margin-bottom: 18px; }
  .letter-date { font-size: 15px; }
  .env-title { font-size: 14px; }
  .env-to-name { font-size: clamp(38px, 12vw, 54px); }
  .open-hint { position: absolute; left: 0; right: 0; bottom: calc(6svh + env(safe-area-inset-bottom)); z-index: 6; }
  .env-screen.drop .env-front, .env-screen.drop .env-back { transform: translateY(104%); }
  .env-screen::before { content: ""; position: absolute; inset: 0; background: var(--noise), var(--paper); opacity: 0; transition: opacity .9s ease .25s; pointer-events: none; }
  .env-screen.drop::before { opacity: 1; }
  .env-screen.drop .env-letter { transform: translateY(-1.5%) scale(1.04); }
}

/* ───────────── fixed controls ───────────── */
.ui-top { position: fixed; z-index: 60; top: max(12px, env(safe-area-inset-top)); inset-inline-end: 12px; }
.langs { display: flex; padding: 3px; border-radius: 999px; background: rgba(248, 244, 236, .9); border: 1px solid rgba(29, 25, 21, .1); box-shadow: 0 6px 18px rgba(20, 15, 10, .14); }
.langs button { padding: 6px 12px; border-radius: 999px; font-size: 13px; line-height: 1.2; color: var(--ink-2); font-family: "Vazirmatn", system-ui, sans-serif; transition: background .3s, color .3s; }
.langs button[data-lang="en"] { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 14px; letter-spacing: .08em; }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); }

.music-btn {
  position: fixed; z-index: 60; bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); inset-inline-start: 14px;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(248, 244, 236, .92); border: 1px solid rgba(29, 25, 21, .1); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(20, 15, 10, .22);
  opacity: 0; transform: scale(.6); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.music-btn.show { opacity: 1; transform: none; }
.music-btn .disc { display: none; }
.music-btn .bars { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.music-btn .bars i { width: 2.5px; height: 4px; border-radius: 2px; background: currentColor; }
.music-btn[aria-pressed="true"] .bars i { animation: eq 1.1s ease-in-out infinite; }
.music-btn .bars i:nth-child(2) { animation-delay: -.35s !important; }
.music-btn .bars i:nth-child(3) { animation-delay: -.7s !important; }
.music-btn .bars i:nth-child(4) { animation-delay: -.15s !important; }
.music-btn[aria-pressed="false"] .bars { opacity: .45; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 15px; } }

.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; font-size: 15px;
  background: var(--ink); color: var(--paper-hi); box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: opacity .35s, transform .35s var(--ease); max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───────────── shared ───────────── */
main { position: relative; transition: opacity 1.2s var(--ease); }
body.sealed main { opacity: 0; }
section { position: relative; padding: 13svh 22px; }
.title {
  margin: 0 auto 10px; text-align: center; font-family: var(--f-poem); font-weight: 700;
  font-size: clamp(28px, 8vw, 42px); line-height: 1.45; color: var(--fg);
}
:root[lang="en"] .title { font-weight: 500; font-style: italic; font-size: clamp(34px, 9.5vw, 52px); line-height: 1.15; }
.title::after { content: ""; display: block; width: 84px; height: 12px; margin: 14px auto 0; background: var(--kilim-img) center/auto 12px repeat-x; }
.sub { margin: 0 auto 30px; max-width: 32ch; text-align: center; color: var(--fg-3); font-size: 16px; }
:root[lang="en"] .sub { font-size: 19px; font-style: italic; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 26px; border-radius: 999px;
  font-family: var(--f-ui); font-weight: 600; font-size: 16px; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bg);
  transition: transform .3s var(--ease), opacity .3s, background .3s;
}
:root[lang="en"] .btn { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.btn:active { transform: scale(.97); }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--field-line); }
.btn.big { width: 100%; min-height: 56px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.text-link { display: inline-block; padding: 8px 4px; font-size: 15px; color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 6px; }
:root[lang="en"] .text-link { font-size: 17px; font-style: italic; }

/* ───────────── hero (paper) ───────────── */
.hero { min-height: 100svh; padding: 0 16px; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.hero-mono { position: relative; width: 62px; height: 62px; margin: 0 auto 3.2svh; color: var(--foil); display: grid; place-items: center; opacity: 0; transition: opacity 2s ease .3s; }
.hero-mono svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-mono span { position: relative; font-family: var(--f-name); font-size: 18px; line-height: 1; color: var(--ink); white-space: nowrap; }
.revealed .hero-mono { opacity: 1; }
.hero-inner { position: relative; z-index: 2; padding: 7svh 0 19svh; }
.kicker { margin: 0 0 3.5svh; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--f-poem); font-size: 16px; color: var(--foil); opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s; }
:root[lang="en"] .kicker { font-size: 13px; letter-spacing: .34em; text-transform: uppercase; font-weight: 600; }
.kicker i { width: 30px; height: 1px; background: currentColor; opacity: .6; }
.names { margin: 0; display: flex; flex-direction: column; align-items: center; font-weight: 400; }
.name {
  font-family: var(--f-name); font-weight: 700; font-size: clamp(56px, min(21vw, 13.5svh), 168px); line-height: 1.25;
  padding: 0 .12em; max-width: 92vw; overflow-wrap: anywhere; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -.5px 0 rgba(0, 0, 0, .06);
  /* ink reveal: a soft edge travels in the direction of writing */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
  mask-image: linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
  transition: -webkit-mask-position 2.4s cubic-bezier(.45,.05,.25,1), mask-position 2.4s cubic-bezier(.45,.05,.25,1);
}
:root[lang="en"] .name { font-weight: 400; font-size: clamp(54px, min(18vw, 12svh), 150px); line-height: 1.35; padding: 0 .3em; }
:root[dir="ltr"] .name {
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.revealed .name { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
:root[dir="ltr"] .revealed .name { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
.revealed .n-bride.name { transition-delay: 1.2s; }
.amp { display: flex; align-items: center; gap: 14px; margin: -.8svh 0; color: var(--foil); opacity: 0; transform: scale(.7); transition: opacity 1s var(--ease) 1s, transform 1.2s var(--ease) 1s; }
.amp svg { display: none; }
.amp::before, .amp::after { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .55; }
.amp b { font-family: var(--f-name); font-weight: 400; font-size: 32px; line-height: 1; color: var(--pom); }
:root[lang="en"] .amp b { font-size: 38px; }
.hero-date, .hero-place { margin: 0; font-family: var(--f-poem); opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.hero-date { margin-top: 3svh; font-size: 19px; color: var(--ink-2); transition-delay: 2.4s; }
.hero-place { font-size: 15px; color: var(--ink-3); transition-delay: 2.6s; }
:root[lang="en"] .hero-date { font-size: 22px; letter-spacing: .03em; }
:root[lang="en"] .hero-place { font-size: 18px; font-style: italic; }
.revealed .kicker, .revealed .amp, .revealed .hero-date, .revealed .hero-place { opacity: 1; transform: none; }
.mountains { position: absolute; left: 0; right: 0; bottom: 0; height: 32svh; z-index: 1; pointer-events: none; will-change: transform; opacity: 0; transition: opacity 2.4s ease 1.2s; }
.revealed .mountains { opacity: 1; }
.mountains svg { width: 100%; height: 100%; }
.m-fill { fill: var(--paper); }
.m-line { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-far .m-fill { fill: #f3ede3; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; font-size: 12px; color: var(--ink-3); opacity: 0; transition: opacity 1s ease 3s; }
:root[lang="en"] .scroll-cue { letter-spacing: .3em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.revealed .scroll-cue { opacity: 1; }
.scroll-cue i { position: relative; width: 1px; height: 38px; background: linear-gradient(var(--ink-3), transparent); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: -1.5px; top: -6px; width: 4px; height: 4px; border-radius: 50%; background: var(--pom); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { to { transform: translateY(44px); } }

/* ───────────── invitation card (paper on paper) ───────────── */
.invite { padding-top: 4svh; padding-bottom: 16svh; }
.paper {
  position: relative; width: min(88vw, 500px); margin: 0 auto; padding: 46px 28px 40px; text-align: center; color: var(--ink);
  background: var(--noise), linear-gradient(180deg, #fdfaf4, #f7f1e6);
  box-shadow: 0 1px 1px rgba(60, 45, 25, .12), 0 14px 30px rgba(60, 45, 25, .1), 0 40px 70px rgba(60, 45, 25, .08);
}
.paper.reveal { transform: translateY(36px) rotate(-1.2deg); }
.paper.reveal.in { transform: rotate(-.4deg); }
.paper::before { content: ""; position: absolute; inset: 10px; border: .8px solid rgba(160, 127, 71, .6); pointer-events: none; }
.paper::after { content: ""; position: absolute; inset: 14px; border: .5px solid rgba(160, 127, 71, .35); pointer-events: none; }
.kilim { height: 14px; margin: 0 -4px 26px; background: var(--kilim) center/auto 14px repeat-x; opacity: .9; }
.kilim.bottom { margin: 30px -4px 0; }
.eyebrow { margin: 0 0 6px; font-family: var(--f-poem); font-size: 15px; color: var(--pom); }
:root[lang="en"] .eyebrow { text-transform: uppercase; letter-spacing: .34em; font-size: 12px; font-weight: 600; }
.dear { margin: 6px 0 8px; font-family: var(--f-name); font-size: clamp(30px, 9vw, 42px); line-height: 1.4; color: var(--ink); }
.invite-body { margin: 0 auto; max-width: 29ch; font-family: var(--f-poem); font-size: clamp(19px, 5.2vw, 22px); line-height: 2; color: var(--ink-2); }
:root[lang="en"] .invite-body { line-height: 1.6; font-size: clamp(21px, 5.8vw, 24px); }
.families { margin-top: 26px; }
.fam-label { margin: 0; font-size: 13px; color: var(--ink-3); }
:root[lang="en"] .fam-label { font-size: 16px; font-style: italic; }
.fam { margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; font-family: var(--f-poem); font-weight: 700; font-size: 18px; color: var(--ink); }
.fam i { font-style: normal; color: var(--foil); font-size: 10px; }

/* ───────────── two threads (night) ───────────── */
.threads { height: 280svh; padding: 0; }
.threads-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.threads-svg, .threads-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.heart-bloom { opacity: 0; transform-origin: 200px 590px; }
.heart-text { opacity: 0; }
.ht-day { font-family: var(--f-poem); font-weight: 700; font-size: 30px; fill: var(--ivory); letter-spacing: .02em; }
.ht-sub { font-family: var(--f-poem); font-size: 15px; fill: rgba(238, 230, 216, .65); }
:root[lang="en"] .ht-day { font-size: 32px; font-style: italic; font-weight: 500; }
.th-line {
  position: absolute; left: 50%; width: min(86vw, 520px); margin: 0; transform: translateX(-50%);
  text-align: center; font-family: var(--f-poem); font-size: clamp(24px, 7vw, 36px); line-height: 1.5; color: var(--ivory);
  text-shadow: 0 2px 16px var(--night), 0 0 3px var(--night); opacity: 0; will-change: opacity, transform;
}
:root[lang="en"] .th-line { font-style: italic; }
.th-line.l1 { top: 13svh; }
.th-line.l2 { top: 40svh; }
.th-line.l3 { bottom: 7svh; color: var(--champ); }

/* ───────────── countdown (night) ───────────── */
.count { padding-top: 6svh; }
.dials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(94vw, 540px); margin: 28px auto 18px; }
.dial { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
:root[dir="rtl"] .dial svg { transform: rotate(-90deg) scaleY(-1); }
.dial .track { fill: none; stroke: rgba(238, 230, 216, .12); stroke-width: 1; }
.dial .arc { fill: none; stroke: var(--champ); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease); }
.dial .num { position: relative; font-family: var(--f-num); font-weight: 400; font-size: clamp(26px, 8vw, 42px); line-height: 1.1; color: var(--ivory); font-variant-numeric: tabular-nums lining-nums; }
.dial .num.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { transform: translateY(-25%); opacity: 0; } }
.dial span { position: relative; font-size: clamp(11px, 3.1vw, 13px); color: var(--fg-3); line-height: 1.3; }
:root[lang="en"] .dial span { font-size: clamp(11px, 3vw, 13px); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.count-msg { text-align: center; font-family: var(--f-poem); font-size: 26px; color: var(--champ); margin: 10px 0; }
.count-date { text-align: center; margin: 14px 0 18px; font-family: var(--f-poem); font-size: 18px; color: var(--ivory); line-height: 1.6; }
.count-date span { display: block; }
.count-date span + span { color: var(--fg-3); font-size: .88em; }
:root[lang="en"] .count-date { font-size: 21px; }
.cal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }

/* ───────────── program (paper) ───────────── */
.program { padding-top: 15svh; }
.events { list-style: none; margin: 30px auto 0; padding: 0; width: min(90vw, 500px); display: flex; flex-direction: column; }
.event { position: relative; padding: 30px 22px 28px; background: var(--card-bg); border: 1px solid var(--card-line); text-align: center;
  box-shadow: 0 1px 1px rgba(60, 45, 25, .08), 0 18px 40px rgba(60, 45, 25, .07); }
.event::before { content: ""; position: absolute; inset: 7px; border: .5px solid rgba(160, 127, 71, .45); pointer-events: none; }
.ev-icon { width: 64px; height: 64px; margin: 0 auto 12px; color: var(--foil); }
.ev-icon svg { width: 100%; height: 100%; }
.ev-title { margin: 0 0 4px; font-family: var(--f-poem); font-weight: 700; font-size: 25px; line-height: 1.5; color: var(--ink); }
:root[lang="en"] .ev-title { font-weight: 500; font-style: italic; font-size: 30px; line-height: 1.2; }
.ev-date { margin: 0; font-family: var(--f-poem); font-size: 18px; color: var(--ink-2); }
.ev-meta { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; align-items: center; color: var(--ink-3); font-size: 15px; }
:root[lang="en"] .ev-meta { font-size: 18px; }
.ev-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ev-meta b { font-weight: 500; }
.ev-meta svg { width: 15px; height: 15px; color: var(--foil); flex: none; }
.events .joint { display: block; width: 1px; height: 52px; margin: 0 auto; background: var(--foil); opacity: .6; position: relative; }
.events .joint::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--pom); transform: translate(-50%, -50%) rotate(45deg); }

/* ───────────── venue (paper) ───────────── */
.arch { position: relative; width: min(76vw, 320px); aspect-ratio: 300 / 380; margin: 30px auto 24px; display: block; color: var(--foil); }
.arch-map { position: absolute; inset: 9px; border-radius: 50% 50% 0 0 / 39% 39% 0 0; overflow: hidden; background:
  repeating-linear-gradient(35deg, rgba(29,25,21,.05) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(-55deg, rgba(29,25,21,.05) 0 1px, transparent 1px 28px), #e9e1d3; }
.arch-map iframe { width: 100%; height: calc(100% + 60px); margin-top: -30px; border: 0; pointer-events: none; filter: grayscale(.85) sepia(.28) contrast(.92) brightness(1.03); opacity: 0; transition: opacity 1s; }
.arch-map iframe.loaded { opacity: .92; }
.arch-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pin { position: absolute; left: 50%; top: 52%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pom); border: 2px solid var(--paper-hi); box-shadow: 0 0 0 0 rgba(123, 30, 42, .4), 0 2px 6px rgba(0,0,0,.25); animation: pin 2.4s ease-out infinite; pointer-events: none; }
@keyframes pin { to { box-shadow: 0 0 0 22px rgba(123, 30, 42, 0), 0 2px 6px rgba(0,0,0,.25); } }
.venue-name { margin: 0; text-align: center; font-family: var(--f-poem); font-weight: 700; font-size: 26px; line-height: 1.5; color: var(--ink); }
:root[lang="en"] .venue-name { font-weight: 500; font-style: italic; font-size: 30px; }
.venue-addr { margin: 2px 0 22px; text-align: center; color: var(--ink-3); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ───────────── RSVP (paper) ───────────── */
.card { position: relative; width: min(90vw, 460px); margin: 0 auto; padding: 28px 22px 24px; background: var(--card-bg); border: 1px solid var(--card-line); }
.sheet .card { box-shadow: 0 1px 1px rgba(60, 45, 25, .08), 0 18px 40px rgba(60, 45, 25, .08); }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 2px; font-size: 13px; color: var(--fg-3); }
:root[lang="en"] .field > span { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
input, textarea {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  background: transparent; color: var(--fg); font-family: "Vazirmatn", system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  transition: border-color .25s; resize: none;
}
:root[lang="en"] input, :root[lang="en"] textarea { font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; }
input::placeholder, textarea::placeholder { color: var(--fg-3); opacity: .8; }
input:focus, textarea:focus { outline: none; border-bottom-color: var(--fg); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; }
.opt { min-height: 56px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 15px; line-height: 1.35; font-weight: 500;
  border: 1px solid var(--field-line); color: var(--fg); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
:root[lang="en"] .opt { font-size: 18px; font-weight: 600; }
.opt svg { width: 16px; height: 16px; color: var(--accent); flex: none; transition: transform .4s var(--ease); }
.opt:active { transform: scale(.98); }
.opt.yes[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper-hi); }
.opt.yes[aria-checked="true"] svg { color: #d4707b; animation: beat 1.3s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
.opt.no[aria-checked="true"] { background: var(--paper-lo); border-color: var(--ink-2); }
.guests { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--fg-3); font-size: 15px; }
:root[lang="en"] .guests { font-size: 18px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--field-line); color: var(--fg); font-size: 20px; line-height: 1; }
.stepper output { min-width: 34px; text-align: center; font-family: var(--f-num); font-size: 24px; color: var(--fg); }
.form-err { margin: 0; color: var(--accent); font-size: 14px; text-align: center; }
.form-err:not(:empty) { margin: -4px 0 12px; }
.rsvp-done { text-align: center; padding: 34px 22px 22px; }
.done-ring { width: 56px; height: 56px; margin: 0 auto 12px; color: var(--foil-c); }
.done-ring circle { stroke-dasharray: 170; stroke-dashoffset: 170; animation: draw 1s var(--ease) forwards; }
.done-ring path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s var(--ease) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-title { margin: 0; font-family: var(--f-poem); font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--fg); }
:root[lang="en"] .done-title { font-weight: 500; font-style: italic; font-size: 28px; }
.done-sub { margin: 6px 0 8px; color: var(--fg-3); }
.wa-link { display: flex; width: max-content; max-width: 92vw; margin: 18px auto 0; align-items: center; gap: 8px; font-size: 15px; color: var(--fg-2); text-decoration: none; padding: 8px 12px; }
:root[lang="en"] .wa-link { font-style: italic; font-size: 17px; }
.wa-link svg { width: 19px; height: 19px; color: #3f8f5a; }
.rsvp { padding-bottom: 17svh; }

/* ───────────── halparke (night) ───────────── */
.dance { padding-left: 0; padding-right: 0; }
.dance .title, .dance .sub { padding: 0 22px; }
.dance-floor { position: relative; width: 100%; height: clamp(250px, 40svh, 420px); margin-top: 6px; overflow: hidden; }
.dance-floor::before { content: ""; position: absolute; left: 50%; bottom: 2%; width: 120%; height: 40%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 170, 110, .16), rgba(214, 170, 110, .05) 60%, transparent); pointer-events: none; }
#govend { position: relative; width: 100%; height: 100%; }
.coming { margin: 14px 0 0; text-align: center; font-family: var(--f-poem); font-size: 19px; color: var(--champ); }
.coming:empty { display: none; }

/* ───────────── night of lanterns (night) ───────────── */
.blessings { padding-left: 0; padding-right: 0; padding-bottom: 14svh; }
.blessings .title, .blessings .sub { padding: 0 22px; }
.lantern-sky { position: relative; width: 100%; height: clamp(380px, 70svh, 640px); cursor: pointer; }
/* soft top and bottom edges painted over the canvas (cheaper than masking a moving canvas) */
.lantern-sky::before, .lantern-sky::after { content: ""; position: absolute; left: 0; right: 0; height: 14%; z-index: 1; pointer-events: none; }
.lantern-sky::before { top: 0; background: linear-gradient(var(--night), rgba(20, 17, 14, 0)); }
.lantern-sky::after { bottom: 0; background: linear-gradient(rgba(20, 17, 14, 0), var(--night)); }
.blessing { z-index: 2; }
#lanterns { width: 100%; height: 100%; }
.blessing {
  position: absolute; left: 50%; top: 50%; width: min(86vw, 600px); margin: 0; pointer-events: none;
  transform: translate(-50%, -46%); opacity: 0; transition: opacity .65s ease, transform .9s var(--ease);
  text-align: center; font-family: var(--f-name); font-size: clamp(34px, 10vw, 60px); line-height: 1.5; color: var(--ivory);
  text-shadow: 0 0 28px rgba(20, 17, 14, .95), 0 0 6px rgba(20, 17, 14, .8);
}
:root[lang="en"] .blessing { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(32px, 9vw, 54px); line-height: 1.25; }
.blessing.show { opacity: 1; transform: translate(-50%, -50%); }

/* ───────────── closing (paper) ───────────── */
.closing { padding: 16svh 22px calc(16svh + env(safe-area-inset-bottom)); text-align: center; }
.closing-orn { display: block; width: 110px; height: 14px; margin: 0 auto 26px; background: var(--kilim) center/auto 14px repeat-x; }
.closing-line { margin: 0 auto 12px; max-width: 22ch; font-family: var(--f-poem); font-size: clamp(23px, 6.8vw, 32px); line-height: 1.6; color: var(--ink-2); }
:root[lang="en"] .closing-line { font-style: italic; }
.closing-names { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .3em; font-family: var(--f-name); font-weight: 700; font-size: clamp(46px, 14vw, 92px); line-height: 1.35; color: var(--ink); }
:root[lang="en"] .closing-names { font-weight: 400; }
.closing-names b { font-weight: 400; font-size: .42em; color: var(--pom); }
.closing-date { margin: 6px 0 30px; font-family: var(--f-poem); font-size: 18px; color: var(--ink-3); }
.with-love { margin: 40px 0 0; font-family: var(--f-poem); font-style: italic; color: var(--ink-3); }
.seal-small { margin: 16px auto 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #b2394a, #7b1e2a 55%, #4e0f19); color: #d9be8c; font-family: var(--f-name); font-size: 16px; line-height: 1; box-shadow: 0 4px 10px rgba(70, 10, 20, .35); white-space: nowrap; }

/* ───────────── calm mode ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .3s !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}

/* ───────────── bigger screens ───────────── */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .names { flex-direction: row; justify-content: center; gap: 0 1.4vw; }
  .name { font-size: clamp(80px, min(10vw, 18vh), 160px); }
  :root[lang="en"] .name { font-size: clamp(76px, min(9vw, 16vh), 140px); }
  .amp { flex-direction: column; gap: 10px; margin: 0; }
  .amp::before, .amp::after { width: 1px; height: 40px; }
  .mountains { height: 30vh; }
  .hero-inner { padding-bottom: 20vh; }
}
@media (max-height: 700px) and (max-width: 759px) {
  .mountains { height: 25svh; }
  .hero-mono { width: 52px; height: 52px; margin-bottom: 2svh; }
  .kicker { margin-bottom: 2svh; }
  .hero-inner { padding: 5svh 0 21svh; }
}
@media (min-width: 760px) {
  section { padding: 15vh 32px; }
  .dials { gap: 24px; }
}