/* ---------- fonts (self-hosted, only the subsets the page uses) ---------- */
@font-face { font-family: 'Bodoni Moda'; src: url(fonts/bodoni-moda-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url(fonts/cinzel-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url(fonts/great-vibes-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Noto Serif Tamil'; src: url(fonts/noto-serif-tamil-tamil-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0B80-0BFF, U+200C-200D, U+25CC; }

:root {
  --paper: #fbf4e8;
  --paper-2: #f6ead6;
  --paper-3: #efdcc0;
  --ink: #3a2a1f;
  --ink-2: #6e5442;
  --gold: #87602c;
  --gold-2: #c9a46a;
  --gold-soft: #e3cda4;
  --night: #2b1f18;

  --display: 'Bodoni Moda', 'Noto Serif Tamil', Georgia, serif;
  --caps: 'Cinzel', 'Noto Serif Tamil', serif;
  --body: 'Cormorant Garamond', 'Noto Serif Tamil', Georgia, serif;
  --script: 'Great Vibes', cursive;
  --ta: 'Noto Serif Tamil', serif;

  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.12rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[lang='ta'] { font-family: var(--ta); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shared pieces ---------- */
.label {
  font-family: var(--caps);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sub { font-style: italic; color: var(--ink-2); font-size: 1.08rem; }
.ornament { width: 74px; height: 14px; margin: 14px auto; color: var(--gold); }
.section {
  position: relative;
  padding: 84px 20px;
  text-align: center;
  background: var(--paper) var(--paper-noise);
  overflow: hidden;
}
.section--warm { background-color: var(--paper-2); }
.inner { position: relative; max-width: 30rem; margin-inline: auto; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid rgb(166 122 62 / 0.55);
  background: rgb(255 255 255 / 0.4);
  font-family: var(--caps);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.pill:hover { background: rgb(255 255 255 / 0.75); }
.pill svg { width: 16px; height: 16px; flex: none; }
.pill--dark {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #4a372b, #33251c);
  color: #f6ead6;
  box-shadow: 0 10px 22px rgb(43 31 24 / 0.25);
}
.pill--dark:hover { background: linear-gradient(180deg, #57412f, #3a2a1f); }

/* gentle reveal, armed only when JS runs */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .rv.in { opacity: 1; transform: none; }

/* =====================================================================
   ENVELOPE OPENER
   ===================================================================== */
.gate { display: none; }
.gate-on { overflow: hidden; }
.gate-on .gate { display: block; }
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  perspective: 1400px;
  overflow: hidden;
}
/* the envelope body is its own layer so it can dissolve while the flap is still lifting,
   letting the hero show through instead of a blank sheet */
.gate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f4e9d8 var(--paper-noise);
  transition: opacity 0.9s ease 0.55s;
}
.gate-opening .gate::before { opacity: 0; }
.gate-open .gate {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* the flap: a deep V with its own paper and a soft cast shadow */
.flap-wrap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  filter: drop-shadow(0 10px 10px rgb(80 55 30 / 0.18)) drop-shadow(0 2px 2px rgb(80 55 30 / 0.15));
  transform-origin: 50% 0;
  transition: transform 1.05s cubic-bezier(0.6, 0.02, 0.3, 1) 0.35s;
  z-index: 2;
}
.flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%),
    #efe2cc var(--paper-noise);
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: max(38px, 7vh);
  text-align: center;
}
.gate-opening .flap-wrap { transform: rotateX(178deg); }
.gate-opening .flap > * { opacity: 0; transition: opacity 0.3s ease 0.45s; }

.mono {
  font-family: var(--script);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
  position: relative;
}
.mono small { font-family: var(--display); font-size: 0.42em; vertical-align: 0.35em; color: var(--gold); margin-inline: 2px; }
.gate__date {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-family: var(--caps);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  color: var(--gold);
}
.gate__date::before, .gate__date::after { content: ''; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.gate__names {
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(2.1rem, 10vw, 2.6rem);
  font-weight: 500;
  line-height: 1.08;
  color: #5b3d25;
}
.gate__names i {
  display: block;
  margin: 6px 0;
  font-family: var(--caps);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--gold);
}

/* the wax seal sits on the tip of the V */
.seal {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 3;
  width: 104px;
  height: 104px;
  translate: -50% -50%;
  border: 0;
  padding: 0;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 236 200 / 0.55), transparent 42%),
    radial-gradient(circle at 50% 50%, #c08c55 0 52%, #9c6a39 66%, #7c5029 100%);
  box-shadow:
    inset 0 0 0 7px rgb(124 80 41 / 0.35),
    inset 0 -6px 12px rgb(70 40 15 / 0.45),
    inset 0 5px 8px rgb(255 230 190 / 0.35),
    0 8px 16px rgb(70 45 20 / 0.35);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 0.35s ease 0.15s;
  animation: wiggle 2.6s ease-in-out 1.6s 3;
}
.seal::before {
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 1.5px solid rgb(90 55 25 / 0.45);
  box-shadow: inset 0 1px 0 rgb(255 225 180 / 0.35), 0 1px 0 rgb(255 225 180 / 0.25);
}
.seal svg { position: absolute; inset: 22px; width: 60px; height: 60px; color: #6d4421; filter: drop-shadow(0 1px 0 rgb(255 226 185 / 0.45)); }
.seal:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 6px; }
.gate-opening .seal { transform: scale(1.25); opacity: 0; animation: none; }
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  8% { rotate: -7deg; } 16% { rotate: 6deg; } 24% { rotate: -3deg; } 32% { rotate: 0deg; }
}

.gate__lower {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 70px 20px max(28px, env(safe-area-inset-bottom));
  text-align: center;
}
.gate__lower .label { font-size: 0.74rem; letter-spacing: 0.3em; }
.gate__lower .label + .label { font-size: 0.62rem; color: var(--ink-2); }
.gate__ta { margin-top: 6px; font-size: 0.92rem; color: var(--ink-2); }
.sprig { width: 64px; height: 30px; margin-top: 12px; color: #7a5d43; }
.gate__hint { margin-top: 6px; font-style: italic; font-size: 0.98rem; color: var(--ink-2); }
.gate__skip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: var(--caps);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  cursor: pointer;
}
.gate-opening .gate__lower { opacity: 0; transition: opacity 0.5s ease 0.3s; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  color: var(--ink);
  overflow: hidden;
  background:
    radial-gradient(70% 28% at 50% 30%, rgb(255 244 228 / 0.55), transparent 75%),
    url(images/hero.webp) center bottom / cover no-repeat,
    #e9b98a;
}
.hero::after {
  /* thin inset frame, like the edge of a card */
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(255 245 225 / 0.6);
  pointer-events: none;
}
.hero__sun {
  position: absolute;
  left: 18%;
  bottom: 30%;
  width: 46vw;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 228 170 / 0.95) 0 22%, rgb(255 205 140 / 0.45) 40%, transparent 70%);
}
.hero__temple {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 72%;
  max-width: 420px;
  color: #6b3f22;
  opacity: 0.55;
}
.hero__top {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  padding: 46px 22px 0;
}
.hero__mono { font-family: var(--script); font-size: 1.9rem; line-height: 1; color: #3e281a; text-shadow: 0 0 10px rgb(255 245 228 / 0.9); }
.hero__mono small { font-family: var(--display); font-size: 0.5em; vertical-align: 0.3em; color: #6e4518; margin-inline: 2px; }
.quote { max-width: 21rem; }
.quote__ta { font-size: clamp(0.68rem, 3.2vw, 0.86rem); line-height: 1.8; color: #4a3326; white-space: nowrap; }
.quote__en { margin-top: 6px; font-style: italic; font-size: 1.04rem; line-height: 1.45; color: #4a3326; }
.names { margin-top: 8px; display: grid; justify-items: center; }
.names__en {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 10.5vw, 2.9rem);
  line-height: 1.05;
  color: #3e281a;
  text-shadow: 0 1px 12px rgb(255 245 228 / 0.7);
}
.names__ta { margin-top: 4px; font-size: 0.86rem; color: #5b3d25; }
.names__weds {
  margin: 4px 0 2px;
  font-family: var(--script);
  font-size: 2.6rem;
  line-height: 1;
  color: #9a6a33;
}
/* the names arrive one after the other once the envelope opens */
.js .names > * { opacity: 0; transform: translateY(14px); }
.js .revealed .names > * { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .revealed .names > :nth-child(2) { transition-delay: 0.25s; }
.js .revealed .names > :nth-child(3) { transition-delay: 0.55s; }
.js .revealed .names > :nth-child(4) { transition-delay: 0.85s; }
.js .revealed .names > :nth-child(5) { transition-delay: 1.05s; }

.count {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 16px max(30px, calc(env(safe-area-inset-bottom) + 18px));
}
.count span {
  display: grid;
  justify-items: center;
  min-width: 66px;
  padding: 9px 4px 7px;
  border-radius: 10px;
  background: rgb(255 248 236 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgb(60 35 15 / 0.18);
}
.count b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.count small { font-family: var(--caps); font-size: 0.52rem; letter-spacing: 0.2em; color: var(--ink-2); }
.count.done { display: none; }

/* =====================================================================
   FAMILIES
   ===================================================================== */
.leaf-mark {
  position: absolute;
  top: -10px;
  left: -40px;
  width: 260px;
  color: var(--gold-2);
  opacity: 0.4;
  pointer-events: none;
}
.leaf-mark--r { left: auto; right: -60px; top: auto; bottom: -30px; rotate: 160deg; opacity: 0.28; }
.person { margin-top: 34px; }
.person .label { font-size: 0.62rem; }
.person__name {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 8.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--ink);
}
.person__name sup { font-family: var(--caps); font-size: 0.32em; letter-spacing: 0.12em; color: var(--gold); vertical-align: 0.9em; margin-left: 4px; }
.person__ta { margin-top: 4px; font-size: 0.86rem; color: var(--ink-2); }
.person__of { margin-top: 12px; font-style: italic; font-size: 0.98rem; color: var(--ink-2); }
.person__parents { font-weight: 600; font-size: 1.15rem; }
.person__parents em { font-family: var(--script); font-style: normal; font-size: 1.4rem; color: var(--gold); margin-inline: 4px; }
.person__place { font-style: italic; font-size: 0.95rem; color: var(--gold); }
.and {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  font-family: var(--script);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
}
.and::before, .and::after { content: ''; width: 54px; height: 1px; background: currentColor; opacity: 0.55; }

/* =====================================================================
   WEDDING DETAILS
   ===================================================================== */
.date-row {
  display: grid;
  grid-template-columns: auto 1px auto;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding-block: 20px;
  border-top: 1px solid rgb(166 122 62 / 0.28);
  border-bottom: 1px solid rgb(166 122 62 / 0.28);
}
.date-row__rule { width: 1px; height: 46px; background: rgb(166 122 62 / 0.45); }
.date-row .label { font-size: 0.72rem; letter-spacing: 0.28em; color: var(--ink-2); }
.date-row__big { font-family: var(--display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums; text-align: left; }
.date-row__small { font-size: 0.8rem; color: var(--ink-2); text-align: left; }

.week { margin-top: 26px; }
.week__month { font-family: var(--caps); font-size: 0.72rem; letter-spacing: 0.3em; font-weight: 600; }
.week__days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 14px; }
.week__days span { display: grid; justify-items: center; gap: 8px; font-family: var(--caps); font-size: 0.52rem; letter-spacing: 0.12em; color: var(--ink-2); }
.week__days b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-family: var(--body);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.week__days .ring b { border: 1px solid var(--gold); border-radius: 50%; }
.week__days .heart b {
  color: #fff;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgb(166 122 62 / 0.4);
}
.cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: var(--caps);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold);
  cursor: pointer;
}
.cal-btn svg { width: 15px; height: 15px; }

.event {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 18px;
  border: 1px solid rgb(166 122 62 / 0.3);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.45);
  text-align: left;
}
.event:first-of-type { margin-top: 30px; }
.event__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgb(166 122 62 / 0.4);
  color: var(--gold);
}
.event__icon svg { width: 22px; height: 22px; }
.event .label { font-size: 0.58rem; }
.event__name { font-family: var(--display); font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.event__ta { font-size: 0.82rem; color: var(--ink-2); }
.event__time { margin-top: 2px; font-weight: 600; font-size: 1.05rem; font-variant-numeric: lining-nums; }

.muhurtham-card {
  position: relative;
  margin-top: 44px;
  padding: 44px 22px 26px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbf3e4, #f1e2c8);
  border: 1px solid rgb(166 122 62 / 0.35);
  box-shadow: inset 0 0 0 6px rgb(255 250 240 / 0.6), 0 12px 26px rgb(90 60 30 / 0.1);
}
.muhurtham-card__badge {
  position: absolute;
  top: -27px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e7c98f, #b98a4c);
  color: #fff;
  box-shadow: 0 0 0 4px #fbf3e4, 0 0 0 5px rgb(166 122 62 / 0.4);
}
.muhurtham-card__badge svg { width: 24px; height: 24px; }
.muhurtham-card h3 { margin-top: 6px; font-family: var(--display); font-weight: 500; font-size: 1.35rem; }
.muhurtham-card p[lang='ta'] { margin-top: 10px; font-size: 0.86rem; line-height: 1.9; color: var(--ink-2); }

/* =====================================================================
   VENUE
   ===================================================================== */
.venue { padding-top: 10px; }
.venue__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(166 122 62 / 0.28);
  text-align: left;
}
.venue__pin {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(166 122 62 / 0.45);
  color: var(--gold);
}
.venue__pin svg { width: 20px; height: 20px; }
.venue .label { font-size: 0.58rem; }
.venue__name { font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.venue__addr { font-size: 1.04rem; }
.venue__addr-ta { font-size: 0.82rem; color: var(--ink-2); }
.venue .pill { width: 100%; margin-top: 22px; }
.map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  font-family: var(--caps);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--ink-2);
}
.map-head a { text-decoration: none; }
.map {
  width: 100%;
  height: 230px;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--paper-3);
}

/* =====================================================================
   FROM OUR HEARTS — rub to reveal
   ===================================================================== */
.note {
  position: relative;
  padding: 86px 22px 96px;
  text-align: center;
  color: #fbf1df;
  background: #2f2119 url(images/note-bg.webp) center / cover no-repeat;
}
.note::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(47 33 25 / 0.55), rgb(47 33 25 / 0.75)); }
.note .inner { z-index: 1; }
.note .label { color: var(--gold-soft); }
.note .title { color: #fbf1df; }
.scratch {
  position: relative;
  margin: 34px auto 0;
  max-width: 340px;
  min-height: 210px;
  border-radius: 16px;
  overflow: hidden;
  background: #fbf3e4;
  color: var(--ink);
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.35);
}
.scratch__msg { display: grid; align-content: center; gap: 10px; min-height: 210px; padding: 26px 22px; }
.scratch__msg [lang='ta'] { font-size: 0.9rem; line-height: 1.85; }
.scratch__msg p:last-child { font-style: italic; font-size: 1.05rem; color: var(--ink-2); line-height: 1.45; }
.scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: none; transition: opacity 0.8s ease; }
.js .scratch canvas { display: block; }
.scratch canvas.gone { opacity: 0; pointer-events: none; }
.note__hint { margin-top: 16px; font-style: italic; font-size: 0.98rem; opacity: 0.8; }

/* =====================================================================
   OUR STORY — polaroid carousel
   ===================================================================== */
.story__card {
  position: relative;
  margin: 34px auto 0;
  max-width: 330px;
  padding: 14px 14px 18px;
  background: #fffaf1;
  box-shadow: 8px 8px 0 #efdfc3, 0 20px 36px rgb(90 60 30 / 0.16);
}
.story__card::before, .story__card::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--gold-2);
}
.story__card::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.story__card::after { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }
.story__head { font-family: var(--caps); font-size: 0.54rem; letter-spacing: 0.24em; color: var(--gold); padding-bottom: 10px; }
.story__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 2px;
}
.story__track::-webkit-scrollbar { display: none; }
.story__track figure { flex: 0 0 100%; scroll-snap-align: center; position: relative; }
.story__track img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.story__track figure::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgb(255 245 225 / 0.65); pointer-events: none; }
.story__foot { display: flex; justify-content: space-between; align-items: end; padding-top: 14px; text-align: left; }
.story__chapter { font-family: var(--caps); font-size: 0.52rem; letter-spacing: 0.22em; color: var(--ink-2); }
.story__cap { font-family: var(--display); font-style: italic; font-size: 1.55rem; line-height: 1.1; }
.story__num { font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--ink-2); font-variant-numeric: lining-nums; }
.story__hint { margin-top: 18px; font-style: italic; font-size: 0.95rem; color: var(--ink-2); }
.thumbs { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.thumbs button {
  width: 46px;
  height: 58px;
  padding: 2px;
  border: 1px solid rgb(166 122 62 / 0.3);
  background: #fffaf1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.thumbs button[aria-current='true'] { opacity: 1; border-color: var(--gold); transform: translateY(-3px); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   GRACE US — closing card
   ===================================================================== */
.grace { padding-bottom: 60px; }
.grace__card {
  position: relative;
  margin: 50px auto 0;
  padding: 50px 22px 26px;
  border-radius: 18px;
  background: rgb(255 252 246 / 0.82);
  border: 1px solid rgb(166 122 62 / 0.28);
  box-shadow: 0 18px 40px rgb(90 60 30 / 0.12);
}
.grace__mono {
  position: absolute;
  top: -34px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fffaf1;
  border: 1px solid rgb(166 122 62 / 0.45);
  box-shadow: 0 0 0 5px #fffaf1, 0 0 0 6px rgb(166 122 62 / 0.2);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}
.grace__card h3 { margin-top: 10px; font-family: var(--display); font-weight: 500; font-size: 1.5rem; }
.hosts { display: grid; gap: 18px; margin-top: 20px; }
.hosts p { font-size: 1.02rem; line-height: 1.5; }
.hosts .label { font-size: 0.56rem; margin-bottom: 4px; }
.hosts [lang='ta'] { font-size: 0.82rem; color: var(--ink-2); }
.grace__card .pill--dark { margin-top: 24px; }

details.relatives { margin-top: 18px; text-align: left; }
details.relatives summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--caps);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold);
  padding: 10px;
}
details.relatives summary::-webkit-details-marker { display: none; }
.rel-side { margin-top: 14px; }
.rel-side h4 { font-family: var(--ta); font-size: 0.95rem; color: var(--ink); border-bottom: 1px solid rgb(166 122 62 / 0.3); padding-bottom: 4px; }
.rel-side dl { margin-top: 8px; font-family: var(--ta); font-size: 0.8rem; line-height: 1.75; }
.rel-side dt { color: var(--gold); font-weight: 600; margin-top: 8px; }
.rel-side dd { margin: 0; color: var(--ink); }

.footer {
  padding: 34px 22px max(40px, env(safe-area-inset-bottom));
  text-align: center;
  background: var(--paper-2) var(--paper-noise);
}
.footer p { font-style: italic; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 24rem; margin-inline: auto; }
.footer .label { display: block; margin-top: 18px; font-size: 0.56rem; color: var(--ink-2); }

/* petals that drift down once, after the envelope opens */
.petals { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  top: -20px;
  width: var(--s);
  height: calc(var(--s) * 1.4);
  border-radius: 60% 40% 60% 40%;
  background: var(--c);
  opacity: 0;
  animation: fall var(--d) linear var(--w) forwards;
}
@keyframes fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--x), 104vh, 0) rotate(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .names > * { opacity: 1; transform: none; }
}

/* =====================================================================
   RICH SECTION GROUNDS — maroon, emerald, temple photo, soft glow
   ===================================================================== */
:root {
  --maroon: #5a1324;
  --maroon-2: #3f0c19;
  --emerald: #0f3b35;
  --emerald-2: #0a2a26;
  --gilt: #e2c27f;
  --cream-on-dark: #f8ecd6;
  --damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e2c27f' stroke-opacity='.11' stroke-width='.8'%3E%3Cpath d='M32 6c6 8 6 16 0 22-6-6-6-14 0-22ZM32 58c6-8 6-16 0-22-6 6-6 14 0 22ZM6 32c8-6 16-6 22 0-6 6-14 6-22 0ZM58 32c-8-6-16-6-22 0 6 6 14 6 22 0Z'/%3E%3Ccircle cx='32' cy='32' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='64' cy='0' r='3'/%3E%3Ccircle cx='0' cy='64' r='3'/%3E%3Ccircle cx='64' cy='64' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.section--maroon {
  background:
    radial-gradient(80% 50% at 50% 0%, rgb(255 210 160 / 0.14), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgb(0 0 0 / 0.3), transparent 70%),
    var(--damask),
    var(--maroon);
  color: var(--cream-on-dark);
}
.section--emerald {
  background:
    radial-gradient(80% 50% at 50% 0%, rgb(160 230 200 / 0.12), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgb(0 0 0 / 0.32), transparent 70%),
    var(--damask),
    var(--emerald);
  color: var(--cream-on-dark);
}
.section--photo {
  background:
    linear-gradient(180deg, rgb(40 22 12 / 0.35), rgb(40 22 12 / 0.55)),
    url(images/temple-dark.webp) center / cover no-repeat,
    #3b2416;
  color: var(--cream-on-dark);
}
.section--soft {
  background:
    linear-gradient(180deg, rgb(251 244 232 / 0.55), rgb(251 244 232 / 0.85)),
    url(images/temple-soft.webp) center / cover no-repeat,
    var(--paper);
}

/* type on dark grounds */
:is(.section--maroon, .section--emerald, .section--photo) .label { color: var(--gilt); }
:is(.section--maroon, .section--emerald, .section--photo) .title { color: var(--cream-on-dark); }
:is(.section--maroon, .section--emerald, .section--photo) .sub,
:is(.section--maroon, .section--emerald) .person__of,
:is(.section--maroon, .section--emerald) .person__ta { color: rgb(248 236 214 / 0.78); }
:is(.section--maroon, .section--emerald, .section--photo) .ornament { color: var(--gilt); }
.section--maroon .person__name { color: var(--gilt); }
.section--maroon .person__name sup { color: var(--cream-on-dark); }
.section--maroon .person__parents { color: var(--cream-on-dark); }
.section--maroon .person__parents em,
.section--maroon .person__place,
.section--maroon .and { color: var(--gilt); }

.title--script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.8rem, 13vw, 3.6rem);
  line-height: 1.1;
  color: var(--gilt) !important;
}

/* temple-arch frame around the families */
.arch {
  padding: 64px 22px 40px;
  border: 1px solid rgb(226 194 127 / 0.6);
  border-radius: 200px 200px 18px 18px;
  box-shadow:
    inset 0 0 0 6px var(--maroon),
    inset 0 0 0 7px rgb(226 194 127 / 0.32),
    0 24px 50px rgb(0 0 0 / 0.25);
  background: radial-gradient(70% 40% at 50% 0%, rgb(255 220 170 / 0.1), transparent 80%);
}
.corner { position: absolute; width: 220px; height: 220px; color: var(--gilt); opacity: 0.22; pointer-events: none; }
.corner--tl { top: -20px; left: -50px; }
.corner--br { bottom: -30px; right: -50px; rotate: 180deg; }

/* mandala watermark */
.mandala {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 520px;
  height: 520px;
  translate: -50% 0;
  color: var(--gilt);
  opacity: 0.13;
  pointer-events: none;
}
.mandala--gold { color: var(--gold); opacity: 0.12; top: 120px; }

/* wedding details on emerald */
.section--emerald .date-row { border-color: rgb(226 194 127 / 0.35); }
.section--emerald .date-row__rule { background: rgb(226 194 127 / 0.5); }
.section--emerald .date-row .label { color: rgb(248 236 214 / 0.75); }
.section--emerald .date-row__big { color: var(--gilt); font-size: 2rem; }
.section--emerald .date-row__small,
.section--emerald .week__days span { color: rgb(248 236 214 / 0.7); }
.section--emerald .week__month { color: var(--cream-on-dark); }
.section--emerald .week__days b { color: var(--cream-on-dark); }
.section--emerald .week__days .ring b { border-color: var(--gilt); }
.section--emerald .week__days .heart b { background: var(--gilt); color: var(--emerald-2); box-shadow: 0 0 0 4px rgb(226 194 127 / 0.2); }
.section--emerald .cal-btn { color: var(--gilt); }
.section--emerald .event {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(226 194 127 / 0.35);
  backdrop-filter: blur(4px);
}
.section--emerald .event__icon { border-color: rgb(226 194 127 / 0.5); color: var(--gilt); }
.section--emerald .event__name { color: var(--cream-on-dark); }
.section--emerald .event__ta { color: rgb(248 236 214 / 0.72); }
.section--emerald .event__time { color: var(--gilt); }
.section--emerald .muhurtham-card {
  background: linear-gradient(180deg, #fbf3e4, #efdcbc);
  color: var(--ink);
}

/* venue card over the temple photo */
.venue--card {
  margin-top: 28px;
  padding: 26px 20px 22px;
  border-radius: 18px;
  background: rgb(251 244 232 / 0.94);
  color: var(--ink);
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.35);
}
.venue--card .label { color: var(--gold) !important; }
.footer { background: var(--damask), var(--maroon-2); }
.footer p { color: rgb(248 236 214 / 0.82); }
.footer .label { color: var(--gilt); }

/* =====================================================================
   PHOTO BACKGROUNDS (bright temple scenes, garlands top, lamps bottom)
   The middle of each picture is soft sky; a cream veil sits behind the
   text column so every line stays readable on a phone in daylight.
   ===================================================================== */
.section--img {
  background-color: var(--mid, #f3dcc0);
  background-image: none;
  background-position: center top, center bottom;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  isolation: isolate;
  padding-top: clamp(160px, 44vw, 230px);    /* garlands stay above the heading */
  padding-bottom: clamp(190px, 50vw, 270px); /* lamps stay below the content */
}
/* a cream veil over the plain sky between the two strips, so text always sits on light, even ground */
.section--img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgb(253 246 236 / 0) 0,
    rgb(253 246 236 / 0) 70px,
    rgb(253 246 236 / 0.82) clamp(150px, 40vw, 210px),
    rgb(253 246 236 / 0.82) calc(100% - clamp(230px, 60vw, 320px)),
    rgb(253 246 236 / 0) calc(100% - clamp(150px, 40vw, 210px)));
}
.section--img .inner { z-index: 1; }

/* darker ink on the bright pictures */
.section--img .label { color: #8a5a22; }
.section--img .title { color: #2f1f15; }
.section--img .sub,
.section--img .person__of,
.section--img .person__ta,
.section--img .date-row__small,
.section--img .event__ta,
.section--img .venue__addr-ta { color: #5a4232; }
.section--img .person__place,
.section--img .person__parents em,
.section--img .and,
.section--img .cal-btn { color: #8a5a22; }
.section--img .ornament { color: #a67a3e; }

/* the families arch, now gold on cream */
.section--img .arch {
  background: rgb(255 251 244 / 0.72);
  border-color: rgb(166 122 62 / 0.55);
  box-shadow:
    inset 0 0 0 6px rgb(255 251 244 / 0.9),
    inset 0 0 0 7px rgb(166 122 62 / 0.28),
    0 20px 44px rgb(90 55 25 / 0.16);
  backdrop-filter: blur(2px);
}

.section--img .event,
.section--img .date-row { background: rgb(255 251 244 / 0.6); }
.section--img .date-row { border-radius: 14px; border: 1px solid rgb(166 122 62 / 0.3); }
.section--img .week { padding: 18px 8px 8px; border-radius: 14px; background: rgb(255 251 244 / 0.6); }
.section--img .week__days span { color: #5a4232; }
.section--img .week__days .heart b { background: #9a6a30; }

.section--venue .title--script { color: #8a5a22 !important; text-shadow: 0 1px 0 rgb(255 250 240 / 0.8); }
.section--venue .venue--card { box-shadow: 0 20px 44px rgb(90 55 25 / 0.2); }

.section--img .grace__card { background: rgb(255 252 246 / 0.92); }

/* =====================================================================
   MUSIC — a small brass-and-cream disc, top right
   ===================================================================== */
.music {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(166 122 62 / 0.6);
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f1e1c4);
  color: #7a5226;
  box-shadow: 0 0 0 3px rgb(255 250 240 / 0.55), 0 6px 16px rgb(70 40 15 / 0.25);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.music:active { transform: scale(0.94); }
.music__bars { display: none; align-items: end; gap: 3px; height: 16px; }
.music__bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 0.9s ease-in-out infinite;
}
.music__bars i:nth-child(2) { animation-delay: -0.3s; }
.music__bars i:nth-child(3) { animation-delay: -0.6s; }
.music__bars i:nth-child(4) { animation-delay: -0.15s; }
.music__off { width: 20px; height: 20px; }
.music[aria-pressed='true'] .music__bars { display: flex; }
.music[aria-pressed='true'] .music__off { display: none; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.gate-on .music { opacity: 0; pointer-events: none; }

.week__days .heart { color: var(--ink) !important; font-weight: 700; }
.section--img .label { color: #774a16; }

.section--warm .label { color: #74501f; }

/* =====================================================================
   HERO v2 — the picture carries its own carved arch; the words sit
   inside it on the calm cream, in deep ink.
   ===================================================================== */
.hero {
  background: url(images/hero.webp) center bottom / cover no-repeat, #f4e3c8;
}
.hero::after { display: none; }
.hero__top {
  gap: 12px;
  padding: max(112px, 16svh) 34px 0;
}
.hero__mono { color: #3a2414; text-shadow: none; }
.hero__mono small { color: #7a4a14; }
.quote__ta { color: #3d2817; font-weight: 500; }
.quote__en { color: #4a3020; }
.names__en { color: #2c1a0e; text-shadow: none; }
.names__ta { color: #4a3020; font-weight: 500; }
.names__weds { color: #8a5518; }
.hero__date {
  margin-top: 4px;
  font-family: var(--caps);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6e4314;
}
.js .hero__date { opacity: 0; transition: opacity 0.9s ease 1.25s; }
.js .revealed .hero__date { opacity: 1; }

/* =====================================================================
   COUPLE ART crowning the families arch
   ===================================================================== */
.arch__art {
  width: min(78%, 260px);
  margin: -34px auto 26px;
  padding: 6px;
  border-radius: 150px 150px 14px 14px;
  background: linear-gradient(180deg, #e6c98d, #b88a48);
  box-shadow: 0 14px 30px rgb(90 55 25 / 0.22);
}
.arch__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 144px 144px 10px 10px;
}

.quote__ta { font-size: clamp(0.66rem, 3vw, 0.82rem); }

/* =====================================================================
   FOOTER CREDIT + "create your own" link
   ===================================================================== */
.credit {
  margin-top: 26px !important;
  font-family: var(--caps);
  font-style: normal !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(248 236 214 / 0.7) !important;
}
.credit b { font-weight: 700; color: var(--gilt); }
.credit__heart {
  display: inline-block;
  width: 11px;
  height: 10px;
  margin: 0 3px;
  vertical-align: -1px;
  fill: #e0a7a0;
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1.05); } }
.own {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgb(226 194 127 / 0.45);
  font-family: var(--caps);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gilt);
  transition: background-color 0.25s ease;
}
.own:hover { background: rgb(226 194 127 / 0.12); }
.own svg { width: 15px; height: 15px; }

/* =====================================================================
   DESKTOP — show the phone layout as a framed card over a blurred temple,
   the same way the invite is meant to be read
   ===================================================================== */
@media (min-width: 640px) {
  :root { --col: 460px; }
  html {
    background:
      linear-gradient(rgb(40 20 10 / 0.45), rgb(40 20 10 / 0.6)),
      url(images/desk-bg.webp) center / cover fixed no-repeat,
      #3a2416;
  }
  body {
    max-width: var(--col);
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgb(226 194 127 / 0.25), 0 30px 80px rgb(0 0 0 / 0.5);
  }
  /* keep the phone proportions so the words stay inside the carved arch on any desktop height */
  .hero { min-height: 860px; }
  .hero__top { padding-top: 138px; }
  .gate, .petals {
    left: 50%;
    right: auto;
    width: var(--col);
    translate: -50% 0;
  }
  .music { right: calc(50% - var(--col) / 2 + 14px); }
}

/* =====================================================================
   SEAMS — a carved gold band with a lotus pendant opens every section,
   so the garland of the next panel hangs from it instead of being cut
   ===================================================================== */
main > section, main > footer { position: relative; }
main > section::after, main > footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 46px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='46' viewBox='0 0 64 46'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f3dca6'/%3E%3Cstop offset='.5' stop-color='%23c9974f'/%3E%3Cstop offset='1' stop-color='%238a5a24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 14a30 30 0 0 0 60 0Z' fill='url(%23g)' stroke='%235a3510' stroke-width='.8'/%3E%3Cpath d='M32 20c3 4 3 8 0 12-3-4-3-8 0-12Zm-7 5c4 0 6 3 7 7-4 0-6-3-7-7Zm14 0c-4 0-6 3-7 7 4 0 6-3 7-7Z' fill='%235a3510'/%3E%3Ccircle cx='32' cy='40' r='2.2' fill='%23c9974f'/%3E%3C/svg%3E") center top / 64px 46px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Crect width='24' height='14' fill='%235a1626'/%3E%3Crect y='0' width='24' height='2' fill='%23e8c88a'/%3E%3Crect y='11.5' width='24' height='2.5' fill='%23b8853f'/%3E%3Cpath d='M12 3.5l3 3.25-3 3.25-3-3.25Z' fill='%23d8b06a'/%3E%3Ccircle cx='0' cy='6.75' r='1.2' fill='%23d8b06a'/%3E%3Ccircle cx='24' cy='6.75' r='1.2' fill='%23d8b06a'/%3E%3C/svg%3E") left top / 24px 14px repeat-x;
  filter: drop-shadow(0 3px 3px rgb(40 15 5 / 0.35));
}

/* =====================================================================
   NOTE — the couple's faces sit clear at the top, the words below
   ===================================================================== */
.note {
  padding-top: clamp(300px, 78vw, 380px);
  background: #2f2119 url(images/note-bg.webp) center top / cover no-repeat;
}
.note::before {
  background: linear-gradient(180deg,
    rgb(47 33 25 / 0.05) 0%,
    rgb(47 33 25 / 0.1) 24%,
    rgb(47 33 25 / 0.62) 39%,
    rgb(47 33 25 / 0.78) 46%,
    rgb(47 33 25 / 0.86) 100%);
}

/* =====================================================================
   MOTION — small, one job each, all off under reduced motion
   ===================================================================== */
/* garland strips drift a few pixels against the scroll (set by app.js) */
.section--img { background-position: center var(--py, 0px), center bottom; }

/* golden sparkles rising through the hero sky */
.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sparkles i {
  position: absolute;
  bottom: 18%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 236 180 / 0.95) 0 25%, rgb(255 200 110 / 0.5) 45%, transparent 70%);
  opacity: 0;
  animation: rise var(--d) ease-in-out var(--w) infinite;
}
@keyframes rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  20% { opacity: 1; }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(var(--x), -46vh, 0) scale(1.1); }
}

/* ornaments draw themselves in when they arrive */
.js svg.ornament.rv { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.6s ease 0.2s, opacity 0.9s ease, transform 0.9s ease; }
.js svg.ornament.rv.in { stroke-dashoffset: 0; }

/* a slow gold light passing over the script words */
.names__weds, .title--script {
  background: linear-gradient(100deg, #7d4c14 0%, #7d4c14 40%, #a8742c 50%, #7d4c14 60%, #7d4c14 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 6s ease-in-out 2.5s infinite;
}
@keyframes sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }

/* the couple doodle breathes gently inside its arch */
.arch__art { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* the seconds digit nudges on every tick */
.count b.tick { animation: tick 0.45s ease; }
@keyframes tick { 0% { transform: translateY(-4px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }

/* lotus pendants glint once as each section scrolls in */
@media (prefers-reduced-motion: reduce) {
  .names__weds, .title--script { -webkit-text-fill-color: #7d4c14; background: none; }
  .sparkles { display: none; }
}

.note .label, .note .title, .note__hint { text-shadow: 0 2px 12px rgb(20 10 5 / 0.75); }

.note .label { color: #f3d79a; }