/* =====================================================================
   Bengali Wedding Invitation — styles
   Mobile-first. No frameworks. Colours and type live in :root.
   ===================================================================== */

:root {
  /* Paper and ink */
  --paper: #FBF6EC;          /* warm ivory page */
  --paper-deep: #F5ECDB;     /* slightly deeper ivory for bands */
  --card: #FFFCF6;           /* card stock */
  --ink: #3B2820;            /* dark warm brown — body text */
  --ink-soft: #6A5044;       /* secondary text (6.4:1 on paper) */

  /* Accents */
  --sindoor: #A3212A;        /* muted sindoor red — key accents */
  --sindoor-deep: #82161F;
  --rose: #C4878B;           /* dusty rose — floral strokes */
  --blush: #F1DAD5;          /* soft blush — petal fills, bands */
  --gold: #A6844A;           /* antique gold — fine ornament lines */
  --gold-text: #7F6331;      /* gold dark enough for small text */
  --gold-soft: #D9C497;
  --sage: #7D8F70;           /* restrained botanical accent */
  --ink-deep: #2E2B4E;       /* deep indigo ink, as on the printed card */

  /* Ornament colour hooks (inherited into <use> instances) */
  --alp-sindoor: var(--sindoor);
  --alp-gold: var(--gold);
  --alp-rose: var(--rose);
  --alp-fill: rgba(241, 218, 213, 0.55);
  --orn-vine: var(--gold);
  --orn-leaf: var(--sage);
  --orn-flower: var(--rose);

  /* Type */
  --font-deco: "Cinzel Decorative", "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-bengali: "Noto Serif Bengali", "Bangla MN", "Shonar Bangla", "Vrinda", "Nirmala UI", "Noto Sans Bengali", serif;
  --font-ui: "Jost", "Noto Sans Bengali", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui-bn: "Noto Sans Bengali", "Bangla Sangam MN", "Vrinda", "Nirmala UI", system-ui, sans-serif;

  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
  --step-0: clamp(1.06rem, 1rem + 0.3vw, 1.18rem);
  --step-1: clamp(1.28rem, 1.18rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.7rem, 1.45rem + 1.2vw, 2.35rem);
  --step-names: clamp(2.6rem, 1.6rem + 6.4vw, 5.2rem);

  /* Layout */
  --header-h: 0rem;  /* no top header */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --measure: 36rem;
  --radius-btn: 999px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
  background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(241, 218, 213, 0.45), transparent 70%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Bengali gets its own family, size and generous line height for vowel marks */
:lang(bn) { font-family: var(--font-bengali); }
html[lang="bn"] body { line-height: 1.85; }

/* English text shown inside the Bengali page (e.g. a name whose Bengali
   spelling has not been confirmed yet) keeps its English typeface. */
.names [lang="en"], .closing__names [lang="en"], .venue-block__name[lang="en"],
.event__title-alt[lang="en"], .family__names [lang="en"] {
  font-family: var(--font-display);
}
.gate__names [lang="en"], .card__venue-name [lang="en"], .cartouche__name[lang="en"] { font-family: var(--font-display); }
.card__venue-line [lang="en"], .venue-block__line [lang="en"] { font-family: var(--font-display); }

img, svg { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.2; }
a { color: var(--sindoor); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sindoor-deep); }

:focus-visible {
  outline: 2px solid var(--sindoor);
  outline-offset: 3px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

.cap { text-transform: capitalize; }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 300;
  padding: 0.6rem 1rem;
  background: var(--sindoor);
  color: var(--card);
  font-family: var(--font-ui);
  border-radius: 6px;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--card); }

/* ---------- Ornament colouring ---------- */
.alp-line { fill: none; stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.alp-sindoor { stroke: var(--alp-sindoor); }
.alp-gold { stroke: var(--alp-gold); }
.alp-rose { stroke: var(--alp-rose); }
.alp-petal { fill: var(--alp-fill); }
.alp-sindoor-fill { fill: var(--alp-sindoor); }
.alp-gold-fill { fill: var(--alp-gold); }

.orn-vine { fill: none; stroke: var(--orn-vine); stroke-width: 1.3; stroke-linecap: round; }
.orn-thin { stroke-width: 0.7; opacity: 0.7; }
.orn-leaf { fill: var(--orn-leaf); opacity: 0.85; }
.orn-flower { fill: var(--blush); stroke: var(--orn-flower); stroke-width: 1; }
.orn-center { fill: var(--sindoor); }
.orn-bud { fill: var(--blush); stroke: var(--orn-flower); stroke-width: 1; }
.orn-dot { fill: var(--gold); }
.orn-rule { stroke: var(--gold); stroke-width: 1; fill: none; }
.orn-dia { fill: var(--gold); }

#sym-lotus path { fill: var(--blush); stroke: var(--sindoor); stroke-width: 1.3; }
#sym-lotus path:last-child { fill: none; stroke: var(--gold); }

.bangle-pola { fill: none; stroke: var(--sindoor); stroke-width: 4.2; }
.bangle-gold { fill: none; stroke: var(--gold); stroke-width: 5.4; }
.bangle-shankha { fill: none; stroke: var(--card); stroke-width: 3.2; }

.divider {
  display: block;
  width: min(15rem, 70%);
  height: 2.5rem;
  margin: 1.1rem auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--sindoor);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--sindoor);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
:lang(bn) .btn, .btn:lang(bn) { font-family: var(--font-ui-bn); }
.btn:hover { background: var(--blush); color: var(--sindoor-deep); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--sindoor);
  color: var(--card);
  box-shadow: 0 6px 18px -10px rgba(130, 22, 31, 0.8);
}
.btn--primary:hover { background: var(--sindoor-deep); color: var(--card); }

.btn--small { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.94rem; }

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-btn);
  background: var(--card);
}
.lang-toggle__btn {
  min-width: 2.9rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.8rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.lang-toggle__btn:lang(bn) { font-family: var(--font-ui-bn); font-size: 0.95rem; }
.lang-toggle__btn[aria-pressed="true"] { background: var(--sindoor); color: var(--card); }
.lang-toggle__btn:not([aria-pressed="true"]):hover { background: var(--blush); color: var(--sindoor-deep); }

/* =====================================================================
   1. Sealed envelope — tap the wax seal to open
   ===================================================================== */
.envelope-screen { display: none; }

.js .envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2.5rem var(--gutter) 3rem;
  background:
    radial-gradient(90% 60% at 50% 38%, rgba(255, 250, 238, 0.95), transparent 70%),
    radial-gradient(120% 80% at 50% 110%, rgba(185, 201, 174, 0.45), transparent 60%),
    linear-gradient(180deg, #F7EFDD, #EFE3C8);
  transition: opacity 0.6s var(--ease) 1.85s, visibility 0s linear 2.45s;
}
.js .envelope-screen:not(.is-closing) { transition: none; }
.js.invite-open .envelope-screen { opacity: 0; visibility: hidden; pointer-events: none; }

/* Keep the page still while the envelope is closed */
.js:not(.invite-open) body { overflow: hidden; }

.env-scene {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: clamp(170px, 36vh, 380px);
  overflow: hidden;
  pointer-events: none;
}
.env-scene__layer {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  transform: translateX(-50%);
}
.env-scene__layer--back { opacity: 0.85; }

.lang-toggle--envelope { position: fixed; top: 1rem; right: var(--gutter); z-index: 3; }
.envelope-screen.is-closing .lang-toggle--envelope { opacity: 0; transition: opacity 0.3s; }

.envelope-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 30rem;
  margin-bottom: 8vh;
  text-align: center;
  transition: opacity 0.55s var(--ease) 1.7s, scale 0.7s var(--ease) 1.7s;
}
.envelope-screen.is-closing .envelope-stage { opacity: 0; scale: 1.1; }
.envelope-stage__invocation { color: var(--ink-deep); }

.envelope {
  position: relative;
  width: min(88vw, 27rem);
  aspect-ratio: 4 / 3;
  margin: 0.4rem 0 0.6rem;
  perspective: 1400px;
}
.envelope__back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #E8D7B6, #DCC69F);
  box-shadow: 0 34px 60px -30px rgba(59, 40, 32, 0.6), 0 2px 0 rgba(255, 255, 255, 0.4) inset;
}
.envelope__liner {
  position: absolute;
  left: 3.5%; right: 3.5%; top: 3%;
  height: 60%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    radial-gradient(circle, rgba(231, 184, 102, 0.85) 0 1.5px, transparent 2px) 0 0 / 14px 14px,
    radial-gradient(circle, rgba(255, 220, 180, 0.35) 0 1px, transparent 1.5px) 7px 7px / 14px 14px,
    linear-gradient(180deg, #A3212A, #7E1820);
}
.envelope__letter {
  position: absolute;
  left: 6.5%; right: 6.5%; top: 6%; bottom: 7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(196, 135, 139, 0.45);
  transition: transform 0.9s var(--ease) 1.05s;
}
.envelope__letter-toran {
  display: block;
  width: 100%;
  height: 30%;
  background: url("assets/illustrations/toran.svg") 0 0 / auto 100% repeat-x;
}
.envelope__letter-title {
  margin-top: 0.3rem;
  color: var(--ink-deep);
  font-family: var(--font-deco);
  font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.15rem);
  font-weight: 700;
}
.envelope__letter-title:lang(bn) { font-family: var(--font-bengali); }
.envelope__letter-names { color: var(--sindoor); font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); font-style: italic; }
.envelope__letter-names:lang(bn) { font-style: normal; }

.envelope__pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  filter: drop-shadow(0 -3px 4px rgba(90, 64, 30, 0.22));
}
.envelope__front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 5.5%;
  border-radius: 0 0 10px 10px;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(170deg, #F8EFDC, #EEE0C2);
}
.envelope__front::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(166, 132, 74, 0.55);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  pointer-events: none;
}
@media (max-width: 30rem) {
  .envelope__for { display: none; }
}
.envelope__for {
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.envelope__for:lang(bn) { font-family: var(--font-ui-bn); font-size: 0.85rem; }
.envelope__names {
  color: var(--sindoor);
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.95rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
}
.envelope__names:lang(bn) { font-style: normal; font-weight: 600; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); line-height: 1.5; }
.envelope__names .names__amp, .envelope__letter-names .names__amp { color: var(--gold); }
.envelope__date { color: var(--ink-soft); font-family: var(--font-ui); font-size: 0.8rem; }
.envelope__date:lang(bn) { font-family: var(--font-ui-bn); }

.envelope__flap-wrap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 51%;
  z-index: 4;
  filter: drop-shadow(0 5px 5px rgba(90, 64, 30, 0.28));
  transform-origin: 50% 0;
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.2, 1) 0.35s, z-index 0s linear 0.75s;
}
.envelope__flap, .envelope__flap::before, .envelope__flap::after {
  position: absolute;
  inset: 0;
  border-radius: 10px 10px 0 0;
}
.envelope__flap { clip-path: polygon(0 0, 100% 0, 50% 100%); background: #E6D4B0; }
.envelope__flap::before {
  content: "";
  clip-path: polygon(2.6% 0, 97.4% 0, 50% 95.5%);
  background: var(--gold);
}
.envelope__flap::after {
  content: "";
  clip-path: polygon(3.4% 0, 96.6% 0, 50% 94%);
  background: linear-gradient(180deg, #F2E6CC, #E6D4B0);
}

.wax {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 6;
  width: clamp(4.6rem, 20vw, 6rem);
  filter: drop-shadow(0 6px 7px rgba(60, 10, 10, 0.45));
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wax__half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.3, 1), opacity 0.5s ease 0.1s, scale 0.3s var(--ease);
}
.wax__half--l { clip-path: polygon(0 0, 53% 0, 46% 28%, 55% 52%, 47% 76%, 52% 100%, 0 100%); }
.wax__half--r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 52% 100%, 47% 76%, 55% 52%, 46% 28%); }
.wax:hover .wax__half { scale: 1.05; }
.wax__ring {
  position: absolute;
  inset: -9px;
  border: 2px solid rgba(166, 132, 74, 0.65);
  border-radius: 50%;
  pointer-events: none;
}
.wax:focus-visible { outline: 3px solid var(--gold); outline-offset: 8px; }

.envelope.is-opening .wax__half--l { transform: translate(-48px, 80px) rotate(-40deg); opacity: 0; }
.envelope.is-opening .wax__half--r { transform: translate(48px, 80px) rotate(40deg); opacity: 0; }
.envelope.is-opening .wax__ring { opacity: 0; }
.envelope.is-opening .envelope__flap-wrap { transform: rotateX(180deg); z-index: 1; }
.envelope.is-opening .envelope__letter { transform: translateY(-64%); }
.envelope.is-opening .wax { pointer-events: none; }

.envelope__kicker {
  color: var(--ink-soft);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.35;
}
.envelope__kicker:lang(bn) { font-style: normal; font-size: 1.1rem; line-height: 1.7; }
.envelope__hint {
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.85);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.envelope__hint:lang(bn) { font-family: var(--font-ui-bn); }

/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0);
  background: rgba(251, 246, 236, 0.9);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(166, 132, 74, 0.25);
}
.monogram {
  color: var(--sindoor);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-style: italic;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  padding: 0.5rem 0;
}
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--radius-btn);
}
html[lang="bn"] .site-nav a { font-family: var(--font-ui-bn); }
.site-nav a:hover { color: var(--sindoor); background: rgba(241, 218, 213, 0.6); }
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  overflow: hidden;
}
.progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--sindoor));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (min-width: 52rem) {
  .site-nav { display: block; }
}

/* =====================================================================
   2. Hero — laid out like the printed card
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.25rem var(--gutter) 3.5rem;
  outline: none;
  overflow-x: clip;
}

.invocation {
  color: var(--sindoor);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.invocation:lang(bn) { font-family: var(--font-bengali); letter-spacing: 0; font-weight: 500; }

.card {
  --pad: clamp(1.1rem, 5vw, 3rem);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 52rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(120% 60% at 50% 30%, rgba(255, 255, 255, 0.7), transparent 70%),
    var(--card);
  border: 1px solid var(--gold-soft);
  box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px rgba(196, 135, 139, 0.45), 0 34px 70px -46px rgba(59, 40, 32, 0.55);
}
.card__toran {
  height: clamp(74px, 16vw, 112px);
  background: url("assets/illustrations/toran.svg") 0 0 / auto 100% repeat-x;
}
.card__inner { padding: 0 var(--pad) 0.5rem; }
.card__invocation { margin-top: 0.2rem; color: var(--ink-deep); }
.card__kalash { display: block; width: clamp(4.4rem, 15vw, 6rem); height: auto; margin: 0.6rem auto 0; }
.card__title {
  margin-top: 0.7rem;
  color: var(--ink-deep);
  font-family: var(--font-deco);
  font-size: clamp(2rem, 1.15rem + 4.3vw, 3.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.card__title:lang(bn) { font-family: var(--font-bengali); color: var(--sindoor); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); line-height: 1.4; }
.card__hosts {
  margin-top: 1.2rem;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
.card__hosts:lang(bn) { font-family: var(--font-bengali); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); line-height: 1.6; }
.card__family {
  max-width: 31rem;
  margin: 0.5rem auto 0;
  color: var(--ink);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.45;
  text-wrap: balance;
}
.card__family:lang(bn) { font-style: normal; font-size: 1.05rem; line-height: 1.85; }

/* Couple: two half-pill cartouches with a joda-maachh medallion between */
.couple {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0.2rem;
  margin: 3.2rem calc(-1 * var(--pad)) 0;
}
.cartouche {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 6.6rem;
  padding: 1.8rem 1.4rem 1.1rem;
  border: 1.5px solid var(--ink-deep);
  background: rgba(255, 252, 246, 0.75);
}
.cartouche--groom { border-left: 0; border-radius: 0 999px 999px 0; margin-right: 9%; padding-left: var(--pad); }
.cartouche--bride { border-right: 0; border-radius: 999px 0 0 999px; margin-left: 9%; padding-right: var(--pad); margin-top: 2.6rem; }
.cartouche__crown {
  position: absolute;
  top: 0; left: 50%;
  width: 3.3rem; height: 3.8rem;
  translate: -50% -80%;
}
.cartouche--bride .cartouche__crown { width: 4.3rem; height: 2.8rem; translate: -50% -66%; }
.cartouche__name {
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.55rem);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.cartouche__name:lang(bn) { font-family: var(--font-bengali); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); line-height: 1.45; }
.cartouche__parents {
  display: block;
  max-width: 22rem;
  text-wrap: balance;
  white-space: normal;
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-style: italic;
}
.cartouche__parents:lang(bn) { font-style: normal; font-size: 0.98rem; }
.couple__emblem { width: 4.4rem; height: 4.4rem; margin: 0.8rem auto 0; }
.couple__fish { display: block; width: 100%; height: 100%; }

@media (min-width: 44rem) {
  .couple { grid-template-columns: 1fr auto 1fr; gap: 0.7rem; }
  .cartouche--groom { margin-right: 0; }
  .cartouche--bride { margin-left: 0; margin-top: 0; }
  .couple__emblem { width: 5rem; height: 5rem; margin: 0; align-self: center; }
  .cartouche { padding-inline: 1rem; }
  .cartouche--groom { padding-left: var(--pad); }
  .cartouche--bride { padding-right: var(--pad); }
  .cartouche__name { white-space: nowrap; }
}

/* Wide screens: the garden spills out beside the card */
.hero__side { display: none; }
@media (min-width: 70rem) {
  .hero__side {
    display: block;
    position: absolute;
    top: 5rem;
    z-index: 0;
    width: auto;
    height: min(78vh, 40rem);
    max-width: none;
    opacity: 0.6;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  .hero__side--l { left: -4rem; }
  .hero__side--r { right: -4rem; transform: scaleX(-1); }
}

/* Save the date — modelled on the printed card */
.save-date { max-width: 30rem; margin: 2.6rem auto 0; color: var(--ink-deep); }
.save-date__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.9rem; }
.save-date__left, .save-date__right { display: flex; flex-direction: column; gap: 0.5rem; }
.save-date__left { align-items: flex-end; text-align: right; }
.save-date__right { align-items: flex-start; text-align: left; }
.save-date__label, .save-date__month {
  position: relative;
  padding-bottom: 0.35rem;
  border-bottom: 1.5px solid currentColor;
  font-family: var(--font-caps);
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.save-date__label::after, .save-date__month::after {
  content: "";
  position: absolute;
  bottom: -4.2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.save-date__label::after { right: -6px; }
.save-date__month::after { left: -6px; }
.save-date__month { text-transform: uppercase; }
.save-date__weekday, .save-date__year {
  font-family: var(--font-caps);
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.save-date__weekday { text-transform: uppercase; }
.save-date__day {
  font-family: var(--font-deco);
  font-size: clamp(3.4rem, 2.3rem + 4.6vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
}
.save-date :lang(bn), .save-date:lang(bn) .save-date__label, .save-date:lang(bn) .save-date__month,
.save-date:lang(bn) .save-date__weekday, .save-date:lang(bn) .save-date__year {
  font-family: var(--font-bengali);
  letter-spacing: 0;
}
html[lang="bn"] .save-date__day { font-family: var(--font-bengali); font-size: clamp(3rem, 2.2rem + 4vw, 4.4rem); line-height: 1.25; }
.save-date__note {
  margin-top: 1rem;
  color: var(--ink);
  font-size: var(--step-0);
  font-style: italic;
  text-wrap: balance;
}
.save-date__note::before {
  content: "";
  display: block;
  width: min(15rem, 70%);
  height: 8px;
  margin: 0 auto 0.6rem;
  background:
    radial-gradient(circle, var(--ink-deep) 2.6px, transparent 3.1px) left center / 8px 8px no-repeat,
    radial-gradient(circle, var(--ink-deep) 2.6px, transparent 3.1px) right center / 8px 8px no-repeat,
    linear-gradient(var(--ink-deep), var(--ink-deep)) center / calc(100% - 10px) 1.5px no-repeat;
}
.save-date__note:lang(bn) { font-style: normal; line-height: 1.8; }
.save-date__bangla { margin-top: 0.3rem; color: var(--ink-soft); }

/* Venue on the card */
.card__venue { margin-top: 2rem; }
.card__venue::before {
  content: "";
  display: block;
  width: min(13rem, 70%);
  height: 12px;
  margin: 0 auto 1rem;
  background:
    linear-gradient(var(--ink-deep), var(--ink-deep)) left center / 42% 1px no-repeat,
    linear-gradient(var(--ink-deep), var(--ink-deep)) right center / 42% 1px no-repeat,
    radial-gradient(circle, var(--sindoor) 3.4px, transparent 4px) center / 12px 12px no-repeat;
}
.card__venue-label { color: var(--ink-deep); font-size: var(--step-1); font-style: italic; font-weight: 600; }
.card__venue-label::before, .card__venue-label::after { content: "•"; margin: 0 0.5em; color: var(--ink-deep); font-style: normal; }
.card__venue-label:lang(bn) { font-style: normal; }
.card__venue-name { margin-top: 0.2rem; color: var(--ink-deep); font-size: var(--step-1); font-weight: 600; line-height: 1.35; }
.card__venue-line { color: var(--ink-soft); }
.card__venue-link { margin-top: 0.5rem; font-family: var(--font-ui); font-size: 0.95rem; }

/* Other events at a glance */
.card__also {
  max-width: 34rem;
  margin: 2rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px dashed rgba(166, 132, 74, 0.55);
}
.card__also-title { color: var(--gold-text); font-size: var(--step-1); font-style: italic; }
.card__also-title:lang(bn) { font-style: normal; }
.card__also-list { display: grid; gap: 1rem; margin-top: 0.9rem; text-align: left; }
.card__also-item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: 0.8rem;
  align-items: center;
}
.card__also-icon { grid-row: 1 / span 3; width: 2.6rem; height: 2.4rem; }
.card__also-name { color: var(--ink-deep); font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.card__also-name:lang(bn) { font-size: 1.08rem; line-height: 1.6; }
.card__also-when { color: var(--sindoor); font-family: var(--font-ui); font-size: 0.92rem; }
.card__also-when:lang(bn) { font-family: var(--font-ui-bn); }
.card__also-where { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.4; }
@media (min-width: 44rem) {
  .card__also-list { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}

/* Illustrated garden scenes (layered for parallax) */
.scene {
  position: relative;
  height: clamp(150px, 34vw, 280px);
  margin-top: 1.2rem;
  overflow: hidden;
  pointer-events: none;
}
.scene__layer {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
}
.scene--closing { height: clamp(170px, 32vw, 330px); margin: 2.5rem calc(-1 * var(--gutter)) 0; }

/* "There's more below" cue */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.5rem 1.15rem 0.35rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.95);
  color: var(--sindoor);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(59, 40, 32, 0.6);
  translate: -50% 0;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}
html[lang="bn"] .scroll-hint { font-family: var(--font-ui-bn); }
.scroll-hint svg { width: 1.3rem; height: 1.3rem; }
.scroll-hint.is-hidden { opacity: 0; translate: -50% 24px; pointer-events: none; }
.no-js .scroll-hint, .js:not(.invite-open) .scroll-hint { display: none; }

/* =====================================================================
   Sections (shared)
   ===================================================================== */
.section {
  position: relative;
  overflow-x: clip;
  padding: clamp(3.75rem, 3rem + 4vw, 6.5rem) var(--gutter);
}
.section__inner { position: relative; z-index: 1; max-width: 60rem; margin: 0 auto; text-align: center; }
.section__inner--narrow { max-width: var(--measure); }
.section__icon { display: block; width: 3.2rem; height: 2.4rem; margin: 0 auto 0.9rem; }
.section__title {
  color: var(--sindoor);
  font-size: var(--step-2);
  font-weight: 500;
  font-style: italic;
  text-wrap: balance;
}
.section__title:lang(bn), html[lang="bn"] .section__title { font-style: normal; font-weight: 600; font-size: clamp(1.45rem, 1.25rem + 1vw, 1.95rem); line-height: 1.5; }

/* Reveals live in the "Motion" block at the end of this file (.motion only). */

/* =====================================================================
   3. Message and families
   ===================================================================== */
.message__body {
  margin-top: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.6;
  text-wrap: pretty;
}
.message__body:lang(bn) { font-size: 1.1rem; line-height: 1.95; }

.families {
  display: grid;
  gap: 1.5rem;
  margin: 2.25rem auto 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(166, 132, 74, 0.35);
  border-bottom: 1px solid rgba(166, 132, 74, 0.35);
}
.family__label {
  color: var(--gold-text);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
}
.family__label:lang(bn) { font-family: var(--font-ui-bn); }
.family__names { margin-top: 0.3rem; font-size: var(--step-1); line-height: 1.45; }
.family__names:lang(bn) { font-size: 1.08rem; line-height: 1.8; }
@media (min-width: 34rem) {
  .families { grid-template-columns: 1fr 1fr; }
}

.message__signoff {
  margin-top: 2rem;
  color: var(--ink-soft);
  font-style: italic;
  font-size: var(--step-0);
}
.message__signoff:lang(bn) { font-style: normal; }

.message__salutation { margin-top: 1.3rem; color: var(--ink-soft); font-size: var(--step-1); font-style: italic; }
.message__salutation:lang(bn) { font-style: normal; font-size: 1.05rem; }
.message__body { margin-top: 0.7rem; }
.message__signoff span { display: block; }
.message__signoff-name { margin-top: 0.2rem; color: var(--ink-deep); font-size: var(--step-1); font-style: normal; font-weight: 600; }
.message__signoff-name:lang(bn) { font-size: 1.1rem; }

/* =====================================================================
   4. Celebrations timeline
   ===================================================================== */
.events { background: linear-gradient(180deg, transparent, rgba(245, 236, 219, 0.7) 18%, rgba(245, 236, 219, 0.7) 82%, transparent); }

.timeline {
  position: relative;
  display: grid;
  gap: 2.25rem;
  max-width: 40rem;
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 1.5rem; bottom: 1.5rem; left: 1.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold), var(--gold-soft));
}
.event { position: relative; padding-left: 3.75rem; }
.event__node {
  position: absolute;
  left: 0; top: 0.4rem;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 0 5px var(--paper-deep);
}
.event__node svg { width: 2.2rem; height: 2rem; }
.event__card {
  position: relative;
  padding: 1.4rem 1.25rem 1.5rem;
  border: 1px solid rgba(166, 132, 74, 0.45);
  border-radius: 2px;
  background: var(--card);
}
.event__card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(196, 135, 139, 0.28);
  pointer-events: none;
}
.event__title {
  color: var(--sindoor);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
}
.event__title:lang(bn) { font-size: 1.5rem; font-weight: 600; line-height: 1.45; }
.event__title-alt {
  display: block;
  margin-top: 0.2rem;
  color: var(--gold-text);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
}
.event__title-alt:lang(en) { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }

.event__details { display: grid; gap: 0.85rem; margin: 1.2rem 0 0; }
.event__row { display: grid; gap: 0.1rem; }
.event__details dt {
  color: var(--gold-text);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
}
.event__details dt:lang(bn) { font-family: var(--font-ui-bn); }
.event__details dd { margin: 0; font-size: var(--step-0); line-height: 1.5; }
.event__details dd:lang(bn) { font-size: 1.02rem; line-height: 1.8; }
.event__details .muted { color: var(--ink-soft); font-style: italic; }
.event__details .muted:lang(bn) { font-style: normal; }
.event__sub { display: block; color: var(--ink-soft); }
.event__accent { display: block; color: var(--sindoor); font-weight: 600; }

.event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(166, 132, 74, 0.45);
}
.event__actions-label {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.event__actions-label:lang(bn) { font-family: var(--font-ui-bn); }

@media (min-width: 40rem) {
  .event__card { padding: 1.75rem 2rem 1.9rem; }
  .event__details { grid-template-columns: 6.5rem 1fr; gap: 0.75rem 1rem; }
  .event__row { display: contents; }
  .event__details dt { padding-top: 0.2rem; }
}

/* =====================================================================
   5. Countdown
   ===================================================================== */
.countdown {
  overflow: hidden;
  background: var(--blush);
  background: linear-gradient(180deg, rgba(241, 218, 213, 0.55), rgba(241, 218, 213, 0.9) 50%, rgba(241, 218, 213, 0.55));
  isolation: isolate;
}
.countdown__alpana {
  position: absolute;
  z-index: -1;
  top: 50%; right: -9rem;
  width: 22rem; height: 22rem;
  transform: translateY(-50%);
  opacity: 0.16;
  --alp-fill: transparent;
}
.countdown__units {
  display: grid;
  grid-template-columns: repeat(var(--units, 4), minmax(0, 1fr));
  gap: 0.25rem;
  margin: 2rem auto 0;
  max-width: calc(var(--units, 4) * 7.5rem);
  padding: 0;
  list-style: none;
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; position: relative; }
.countdown__unit + .countdown__unit::before {
  content: "";
  position: absolute;
  left: -0.18rem; top: 1.25rem;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.countdown__num {
  color: var(--sindoor);
  font-size: clamp(2.3rem, 1.3rem + 5vw, 4.2rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.05;
}
.countdown__num:lang(bn) { font-size: clamp(2rem, 1.2rem + 4.4vw, 3.6rem); font-weight: 500; line-height: 1.35; }
.countdown__unit:last-child .countdown__num { color: #B9575C; }
.countdown__label {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.countdown__label:lang(bn) { font-family: var(--font-ui-bn); }
.countdown__target { margin-top: 1.25rem; color: var(--ink-soft); font-style: italic; }
.countdown__target:lang(bn) { font-style: normal; }

.countdown__days { margin-top: 1.6rem; }
.countdown__big {
  display: block;
  color: var(--sindoor);
  font-size: clamp(3.6rem, 2.4rem + 6vw, 5.6rem);
  font-weight: 500;
  line-height: 1;
}
.countdown__big:lang(bn) { font-size: clamp(3rem, 2rem + 5vw, 4.6rem); line-height: 1.3; }
.countdown__caption { display: block; margin-top: 0.35rem; font-size: var(--step-1); }
.countdown__caption:lang(bn) { font-size: 1.15rem; }
.countdown__note { margin-top: 1rem; color: var(--ink-soft); font-style: italic; font-size: var(--step-0); text-wrap: balance; }
.countdown__note:lang(bn) { font-style: normal; }
.countdown__message {
  margin-top: 1.5rem;
  color: var(--sindoor);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  text-wrap: balance;
}
.countdown__message:lang(bn) { font-style: normal; font-size: 1.15rem; line-height: 1.8; }

.just-married { margin-top: 1.6rem; }
.just-married__title {
  color: var(--sindoor);
  font-family: var(--font-deco);
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
}
.just-married__sub { margin-top: 0.7rem; color: var(--ink-deep); font-size: var(--step-1); font-style: italic; }
.just-married__sub:lang(bn) { font-style: normal; }
.just-married__note { margin-top: 0.4rem; color: var(--ink-soft); }

/* =====================================================================
   6. Venue and directions
   ===================================================================== */
.venues {
  display: grid;
  gap: 1.25rem;
  max-width: 52rem;
  margin: 2.5rem auto 0;
}
.venue-block {
  position: relative;
  padding: 2rem 1.25rem 1.75rem;
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
}
.venue-block + .venue-block { border-top: 0; }
.venue-block__icon { display: block; width: 3rem; height: 2.2rem; margin: 0 auto 0.6rem; }
.venue-block__event {
  color: var(--gold-text);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.03em;
}
.venue-block__event:lang(bn) { font-family: var(--font-ui-bn); }
.venue-block__name {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.venue-block__name:lang(bn) { font-size: 1.45rem; font-weight: 600; line-height: 1.5; }
.venue-block__line { margin-top: 0.35rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.venue-block__line:lang(bn) { line-height: 1.8; }
.venue-block__label { color: var(--gold-text); font-family: var(--font-ui); font-size: var(--step--1); }
.venue-block__label:lang(bn) { font-family: var(--font-ui-bn); }
.venue-block .muted { font-style: italic; }
.venue-block .muted:lang(bn) { font-style: normal; }
.venue-block__actions { margin-top: 1.3rem; }
@media (min-width: 46rem) {
  .venues { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
  .venue-block + .venue-block { border-top: 1px solid var(--gold-soft); }
}

/* =====================================================================
   Section illustrations
   ===================================================================== */
.peacocks { display: flex; align-items: flex-end; justify-content: center; gap: 0.3rem; margin: 0 auto 1.1rem; }
.peacocks__bird { width: clamp(6.6rem, 24vw, 9.5rem); height: auto; aspect-ratio: 250 / 120; }
.peacocks__bird--r { transform: scaleX(-1); }
.peacocks__lotus { width: 3rem; height: 2.3rem; margin-bottom: 0.15rem; }

.toran {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(80px, 14vw, 104px);
  background: url("assets/illustrations/toran.svg") 0 0 / auto 100% repeat-x;
  pointer-events: none;
  transform-origin: 50% 0;
}
.events { padding-top: calc(clamp(3.75rem, 3rem + 4vw, 6.5rem) + 3.5rem); }

.diyas { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 0; }
.diya {
  position: absolute;
  top: 0;
  left: var(--x);
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
  transform-origin: 50% 0;
}
.diya__chain { width: 1px; height: var(--len); background: repeating-linear-gradient(180deg, var(--gold) 0 3px, transparent 3px 5px); }
.diya__lamp { width: 2.5rem; height: 2.6rem; filter: drop-shadow(0 0 10px rgba(249, 196, 64, 0.55)); }
.diya-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.countdown { padding-top: calc(clamp(3.75rem, 3rem + 4vw, 6.5rem) + 3rem); }
@media (max-width: 40rem) {
  .diya--4, .diya--1 { display: none; }
}

.venue__palace { display: block; width: min(24rem, 88%); height: auto; margin: 1.4rem auto 0; }

.closing { padding-bottom: 0; }

/* =====================================================================
   9. Closing
   ===================================================================== */
.closing { overflow: hidden; padding-bottom: clamp(5rem, 4rem + 4vw, 7rem); }
.closing__alpana {
  display: block;
  width: 9rem; height: 9rem;
  margin: 0 auto 1.4rem;
  opacity: 0.9;
}
.closing__body { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.6; text-wrap: pretty; }
.closing__body:lang(bn) { font-size: 1.1rem; line-height: 1.95; }
.closing__names {
  margin-top: 2rem;
  color: var(--sindoor);
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem);
  font-style: italic;
  line-height: 1.25;
  text-wrap: balance;
}
.closing__names:lang(bn) { font-style: normal; font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.6; }
.closing__names .names__amp { display: inline; margin: 0; font-size: 0.8em; }
.closing__names [lang="en"] { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.closing__compliments { margin-top: 1.8rem; color: var(--ink-soft); font-family: var(--font-ui); font-size: 0.9rem; }
.closing__compliments:lang(bn) { font-family: var(--font-ui-bn); }
.closing__compliments span { display: block; }
.closing__compliments-name { margin-top: 0.3rem; color: var(--ink-deep); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.closing__compliments-name:lang(bn) { font-family: var(--font-bengali); font-size: 1.1rem; }

.back-top {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
}
html[lang="bn"] .back-top { font-family: var(--font-ui-bn); }

/* =====================================================================
   8. Music toggle
   ===================================================================== */
.music-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 3.25rem;
  min-height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-btn);
  background: rgba(255, 252, 246, 0.95);
  color: var(--sindoor);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  box-shadow: 0 10px 24px -14px rgba(59, 40, 32, 0.7);
  cursor: pointer;
}
html[lang="bn"] .music-toggle { font-family: var(--font-ui-bn); }
.music-toggle:hover { background: var(--blush); }
.music-toggle__icon { width: 1.35rem; height: 1.35rem; flex: none; }
.music-toggle__icon--pause { display: none; }
.music-toggle[aria-pressed="true"] .music-toggle__icon--pause { display: block; }
.music-toggle[aria-pressed="true"] .music-toggle__icon--play { display: none; }
.js:not(.invite-open) .music-toggle { display: none; }
@media (max-width: 30rem) {
  .music-toggle { padding: 0; justify-content: center; }
  .music-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =====================================================================
   Setup panel (only on localhost / file:// / ?setup=1 — never for guests)
   ===================================================================== */
.setup-panel {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 250;
  width: max-content;
  max-width: min(26rem, calc(100vw - 5.5rem));
  max-height: 70vh;
  overflow: auto;
  border: 2px dashed #B7791F;
  border-radius: 10px;
  background: #FFF8E6;
  color: #3B2820;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.5);
}
.setup-panel summary { padding: 0.75rem 1rem; font-weight: 500; cursor: pointer; }
.setup-panel__body { padding: 0 1rem 1rem; }
.setup-panel ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.setup-panel li { margin-bottom: 0.45rem; }
.setup-panel code { font-size: 0.82rem; background: rgba(183, 121, 31, 0.12); padding: 0 0.25rem; border-radius: 3px; overflow-wrap: anywhere; }
.setup-panel .warn { color: #8A1C1C; }

/* =====================================================================
   Larger screens
   ===================================================================== */
@media (min-width: 64rem) {
  .event__card { padding: 2rem 2.4rem 2.1rem; }
  .countdown__alpana { right: 2%; width: 26rem; height: 26rem; }
}

/* Short landscape phones */
@media (orientation: landscape) and (max-height: 32rem) {
  .js .envelope-screen { place-items: start center; padding-top: 3.5rem; }
  .envelope { width: min(60vw, 22rem); }
  .envelope-stage { gap: 0.6rem; margin-bottom: 0; }
}


/* =====================================================================
   MOTION — parallax, entrances, petals.
   Everything here is scoped to .motion, which script.js adds only when
   the guest has not asked their device to reduce motion. Without it the
   page is fully visible and still.
   ===================================================================== */

/* ---------- Floating flora (parallax depth layers) ---------- */
.flora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.floater {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--size); height: var(--size);
  rotate: var(--r);
  opacity: 0.5;
  --orn-flower: var(--rose);
}
.floater--sprig { opacity: 0.45; }
.orn-flower-in { fill: rgba(255, 252, 246, 0.7); stroke: var(--gold); stroke-width: 0.6; }
.petal-shape { fill: var(--petal-fill, #EBC3C0); stroke: var(--rose); stroke-width: 0.5; }
.petal-vein { fill: none; stroke: rgba(163, 33, 42, 0.25); stroke-width: 0.6; }
@media (max-width: 40rem) {
  .floater { opacity: 0.35; width: calc(var(--size) * 0.8); height: calc(var(--size) * 0.8); }
}

.motion [data-parallax], .motion [data-pointer] { will-change: translate; }

.motion .floater { animation: sway 7s ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes sway {
  from { rotate: calc(var(--r) - 9deg); }
  to   { rotate: calc(var(--r) + 9deg); }
}

/* Continuous loops pause whenever their section is off-screen */
.motion :is(.section, .hero):not(.in-view) :is(.floater, .diya, .toran, .card__toran, .couple__fish, .closing__alpana, .countdown__alpana, .event__node svg, .venue-block__icon, .just-married__title, .scroll-hint svg) { animation-play-state: paused; }

/* ---------- Envelope: idle life ---------- */
.motion .envelope { animation: env-float 5s ease-in-out infinite; }
.motion .envelope.is-opening { animation: none; }
.motion .wax__ring { animation: ring-pulse 2.2s ease-out infinite; }
.motion .envelope-stage > * { animation: rise 0.9s var(--ease) both; }
.motion .envelope-stage > :nth-child(1) { animation-delay: 0.1s; }
.motion .envelope-stage > .envelope { animation: env-in 1.1s var(--ease) 0.2s both, env-float 5s ease-in-out 1.4s infinite; }
.motion .envelope-stage > .envelope.is-opening { animation: none; }
.motion .envelope-stage > :nth-child(3) { animation-delay: 0.55s; }
.motion .envelope-stage > :nth-child(4) { animation-delay: 0.7s; }
.motion .envelope-stage > :nth-child(5) { animation-delay: 0.85s; }
.motion .env-scene__layer--back { animation: fade-in 1.4s ease 0.1s both; }
.motion .env-scene__layer--mid { animation: scene-rise 1.4s var(--ease) 0.2s both; }
.motion .env-scene__layer--front { animation: scene-rise 1.4s var(--ease) 0.35s both; }
@keyframes env-in { from { opacity: 0; translate: 0 34px; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes env-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes ring-pulse { from { opacity: 0.9; scale: 0.92; } to { opacity: 0; scale: 1.35; } }
@keyframes spin { to { rotate: 360deg; } }

/* Just Married: gold shimmer, and a pop when the moment arrives live */
.motion .just-married__title {
  background: linear-gradient(100deg, var(--sindoor) 38%, #E7B866 50%, var(--sindoor) 62%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3.6s linear infinite;
}
.motion .just-married.is-live { animation: jm-pop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes jm-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }

/* Light sweep across primary buttons */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 200, 0.45) 50%, transparent 65%);
  translate: -120% 0;
}
.motion .btn--primary::after { animation: sheen 4.5s ease-in-out 2s infinite; }
.btn:hover { translate: 0 -2px; box-shadow: 0 10px 22px -14px rgba(130, 22, 31, 0.75); }
.btn { transition: background-color 0.25s var(--ease), color 0.25s var(--ease), translate 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.15s var(--ease); }
@keyframes sheen { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }

/* ---------- Hero entrance ---------- */
.motion .hero [data-enter] { opacity: 0; }
.motion .hero.is-entering [data-enter] { animation: rise 1s var(--ease) calc(0.25s + var(--i, 0) * 0.12s) both; }
.motion .hero .card { opacity: 0; }
.motion .hero.is-entering .card { animation: frame-in 1.1s var(--ease) both; }
.motion .hero .card__toran { opacity: 0; }
.motion .hero.is-entering .card__toran { animation: toran-drop 1.4s cubic-bezier(0.34, 1.4, 0.64, 1) 0.2s both; }
.motion .hero .cartouche__name .w { display: inline-block; opacity: 0; }
.motion .hero.is-entering .cartouche__name .w { animation: word-in 1.1s var(--ease) calc(0.9s + var(--w, 0) * 0.14s) both; }
.motion .hero.is-entering .cartouche__crown { animation: crown-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both; }
.motion .hero.is-entering .couple__emblem { animation: amp-in 1.3s var(--ease) 1.1s both; }
.motion .hero.is-entering .scene__layer--back { animation: fade-in 1.6s ease 0.5s both; }
.motion .hero.is-entering .scene__layer--mid { animation: fade-in 1.6s ease 0.7s both; }
.motion .hero.is-entering .scene__layer--front { animation: scene-rise 1.4s var(--ease) 0.6s both; }
.motion .hero .flora { opacity: 0; }
.motion .hero.is-entering .flora { animation: fade-in 2s ease 1s forwards; }
.motion .card__toran { transform-origin: 50% 0; }
.motion .hero.in-view .card__toran { animation-name: toran-drop, toran-sway; animation-duration: 1.4s, 6s; animation-delay: 0.2s, 1.6s; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1), ease-in-out; animation-fill-mode: both, none; }
.motion .couple__fish { animation: spin 60s linear infinite; }
@keyframes toran-drop { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } }
@keyframes toran-sway { from { rotate: -0.6deg; } to { rotate: 0.6deg; } }
@keyframes crown-in { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes scene-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.motion .scroll-hint svg { animation: cue 1.8s ease-in-out infinite; }

@keyframes cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes word-in {
  from { opacity: 0; translate: 0 0.45em; filter: blur(8px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes amp-in { from { opacity: 0; scale: 0.4; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes unfurl { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes frame-in { from { opacity: 0; scale: 0.97; } to { opacity: 1; scale: 1; } }

/* ---------- Section reveals (staggered children) ---------- */
.motion .reveal .section__inner > * {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.12s);
}
.motion .reveal.is-visible .section__inner > * { opacity: 1; translate: 0 0; }
.motion .reveal .section__icon { scale: 0.4; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease), scale 1s cubic-bezier(0.34, 1.56, 0.64, 1); }
.motion .reveal.is-visible .section__icon { scale: 1; }

/* Timeline: the line draws itself as you scroll; cards glide in */
.motion .timeline::before { transform: scaleY(var(--line, 0)); transform-origin: 50% 0; }
.motion .event.reveal-item { opacity: 0; translate: 42px 0; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); }
.motion .event.reveal-item.is-visible { opacity: 1; translate: 0 0; }
.motion .event.reveal-item .event__node { scale: 0; transition: scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s; }
.motion .event.reveal-item.is-visible .event__node { scale: 1; }
.motion .event__node svg { animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.event__card { transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) {
  .event__card:hover { translate: 0 -4px; box-shadow: 0 22px 40px -28px rgba(59, 40, 32, 0.45); }
}

/* Venue blocks rise one after another */
.motion .venue-block.reveal-item { opacity: 0; translate: 0 34px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 0.18s); }
.motion .venue-block.reveal-item.is-visible { opacity: 1; translate: 0 0; }
.motion .venue-block__icon { animation: bob 3.2s ease-in-out infinite; }

/* Countdown digits tick */
/* Countdown digits: a soft vertical crossfade, only on the digits that change */
.digit { display: inline-grid; }
.digit__face { grid-area: 1 / 1; }
.motion .digit__face.is-entering { animation: digit-in 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.motion .digit__face.is-leaving { animation: digit-out 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes digit-in {
  from { opacity: 0; translate: 0 0.22em; filter: blur(2.5px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes digit-out {
  from { opacity: 1; translate: 0 0; filter: blur(0); }
  to   { opacity: 0; translate: 0 -0.22em; filter: blur(2.5px); }
}
/* The separators breathe slowly instead of anything blinking */
.motion .countdown__unit + .countdown__unit::before { animation: breathe 4s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: 0.35; scale: 0.8; } to { opacity: 1; scale: 1; } }
.motion .countdown__alpana { animation: spin 90s linear infinite; }

/* Closing: the medallion turns slowly; names glow in */
.motion .closing__alpana { animation: spin 70s linear infinite; }
.motion .reveal.is-visible .closing__names { animation: glow-in 2.2s ease 0.6s both; }
@keyframes glow-in {
  from { text-shadow: 0 0 0 rgba(166, 132, 74, 0); }
  45% { text-shadow: 0 0 22px rgba(217, 196, 151, 0.95); }
  to { text-shadow: 0 0 0 rgba(166, 132, 74, 0); }
}

/* Illustrations come alive */
.motion .diya { animation: diya-sway var(--sway, 6s) ease-in-out infinite alternate; }
.motion .diya-flame { animation: flicker 1.3s ease-in-out infinite alternate; }
.motion .toran { animation: toran-sway 6s ease-in-out infinite alternate; }
.motion .reveal .peacocks__bird { opacity: 0; translate: -30px 0; transition: opacity 1.1s var(--ease) 0.2s, translate 1.1s var(--ease) 0.2s; }
.motion .reveal .peacocks__bird--r { translate: 30px 0; }
.motion .reveal.is-visible .peacocks__bird { opacity: 1; translate: 0 0; }
.motion .reveal .venue__palace { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease) 0.3s, opacity 0.9s var(--ease); }
.motion .reveal.is-visible .venue__palace { clip-path: inset(-10% 0 0 0); }
@keyframes diya-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes flicker { 0% { scale: 1 1; opacity: 1; } 50% { scale: 0.9 1.1; opacity: 0.92; } 100% { scale: 1.06 0.94; opacity: 1; } }

/* Header tucks away while reading, returns when scrolling up */
.site-header { transition: transform 0.4s var(--ease); }
.site-header.is-tucked { transform: translateY(-105%); }

/* ---------- Petal shower ---------- */
.petals { position: fixed; inset: 0; z-index: 210; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  top: -6vh;
  left: var(--x);
  width: var(--size); height: var(--size);
  animation: petal-fall var(--dur) linear var(--delay) both;
}
.petal--alt { --petal-fill: #F4D8CF; }
.petal--deep { --petal-fill: #D98F92; }
.petal__sway { display: block; width: 100%; height: 100%; animation: petal-sway calc(var(--dur) / 3.5) ease-in-out var(--delay) infinite alternate both; }
.petal__sway svg { display: block; width: 100%; height: 100%; }
@keyframes petal-fall {
  0% { translate: 0 0; opacity: 0; }
  6% { opacity: 0.95; }
  85% { opacity: 0.85; }
  100% { translate: var(--drift) 116vh; opacity: 0; }
}
@keyframes petal-sway {
  from { rotate: calc(-40deg * var(--spin)); translate: -16px 0; }
  to   { rotate: calc(60deg * var(--spin)); translate: 16px 0; }
}

/* Reduced motion: keep every state change, drop the movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Print: a clean paper copy of the invitation */
@media print {
  .site-header, .music-toggle, .scroll-hint, .back-top, .event__actions, .venue-block__actions, .setup-panel, .envelope-screen { display: none !important; }
  .reveal, .reveal *, .reveal-item, [data-enter], .card, .card__toran, .w { opacity: 1 !important; translate: none !important; }
  .flora, .petals { display: none !important; }
  body { background: #fff; }
}
.motion .countdown:not(.in-view) .countdown__unit::before { animation-play-state: paused; }