/* Amrita & Avinash - Shubh Vivah invitation */
:root {
  --ink: #3e3337;
  --ink-soft: #6d5c62;
  --rose: #9c5468;
  --gold: #a8844b;
  --bg-top: #ecdfe6;
  --bg-mid: #eedde4;
  --bg-bot: #f0dbe2;
  --col: 480px;
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --text: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --deva: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif;
  --cw: min(100vw, var(--col));
}
/* phones and tablets: the invitation fills the whole screen width (big phones and foldables included) */
@media (hover: none) and (pointer: coarse) {
  :root { --col: 640px; }
}
html { background: #e7d6dd; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--text);
  color: var(--ink);
  background: #e7d6dd url(a/linen.webp) repeat;
  background-size: 256px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; height: 100svh; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

/* language switching */
html[data-lang="en"] .hi, html[data-lang="hi"] .en { display: none !important; }
.hi { font-family: var(--deva); }

/* the invitation column (phone width; centred on big screens) */
.page {
  position: relative;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%);
  overflow: hidden;
}
@media (min-width: 560px) {
  body { background-color: #dcc7cf; }
  .page { box-shadow: 0 0 0 1px rgba(120, 80, 95, .08), 0 30px 80px rgba(90, 50, 65, .22); }
}

/* ---------------------------------------------------------------- doors */
#doors {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: flex; justify-content: center; pointer-events: auto;
}
#doors .frame { position: relative; width: 100%; max-width: var(--col); height: 100%; perspective: 1700px; perspective-origin: 50% 45%; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: #7d7b67 url(a/silk.webp) center / cover;
  transition: transform 2.5s cubic-bezier(.52, 0, .22, 1), filter 2.5s ease;
  will-change: transform; backface-visibility: hidden;
}
.door.l { left: 0; transform-origin: 0% 50%; box-shadow: inset -10px 0 18px -10px rgba(30, 30, 20, .45); }
.door.r { right: 0; transform-origin: 100% 50%; box-shadow: inset 10px 0 18px -10px rgba(30, 30, 20, .45), -2px 0 6px rgba(0, 0, 0, .18); }
.door::after { /* soft vertical sheen */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 240, .06), rgba(255, 255, 240, 0) 40%, rgba(0, 0, 0, .06));
}
#seal {
  position: absolute; left: 0; top: 50%; z-index: 2;
  width: min(54vw, 236px); transform: translate(-50%, -54%);
  filter: drop-shadow(0 10px 18px rgba(30, 25, 20, .35));
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translate(-50%, -54%) scale(1.025); } }
#doors .tap {
  position: absolute; left: 0; right: 0; bottom: 15%; z-index: 3; text-align: center;
  font-family: var(--text); font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(250, 244, 236, .86); transition: opacity .5s;
}
#doors .tap .hi { letter-spacing: .08em; font-size: 15px; text-transform: none; }
.langpick {
  position: absolute; left: 50%; bottom: 7%; z-index: 3; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px; border-radius: 30px;
  background: rgba(250, 244, 236, .16); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: opacity .5s;
}
.langpick button {
  padding: 7px 16px; border-radius: 30px; font-size: 14px; color: rgba(250, 244, 236, .9); letter-spacing: .04em;
}
.langpick button[data-l="hi"] { font-family: var(--deva); }
.langpick button.on { background: rgba(250, 244, 236, .92); color: #4d4a3d; }
#doors.open .door.l { transform: rotateY(-106deg); filter: brightness(.72); }
#doors.open .door.r { transform: rotateY(106deg); filter: brightness(.72); }
#doors.open { pointer-events: none; }
#doors.open .tap, #doors.open .langpick { opacity: 0; }
#doors.gone { display: none; }

/* ---------------------------------------------------------------- floating controls */
.ctrl {
  position: fixed; top: max(12px, env(safe-area-inset-top)); z-index: 40;
  right: max(12px, calc((100vw - var(--col)) / 2 + 12px));
  display: flex; gap: 8px; opacity: 0; transition: opacity .8s; pointer-events: none;
}
.ctrl.show { opacity: 1; pointer-events: auto; }
.ctrl button {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(247, 236, 240, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(90, 50, 65, .18), inset 0 0 0 1px rgba(255, 255, 255, .6);
  display: grid; place-items: center; font-size: 13px; color: var(--ink);
}
#langBtn .hi { font-size: 15px; }
#musicBtn svg, #fsBtn svg { width: 17px; height: 17px; }
#fsBtn .out { display: none; }
#fsBtn.on .in { display: none; }
#fsBtn.on .out { display: inline; }
#musicBtn.off svg .wave { opacity: .25; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  height: 100vh; min-height: 620px; height: max(620px, 100svh); max-height: 980px;
  background: url(a/linen.webp) repeat; background-size: 256px;
  overflow: hidden;
}
.hero { --tx: 0; --ty: 0; --sy: 0; }
.scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.08); transform-origin: 50% 62%;
  transition: transform 4.2s cubic-bezier(.2, .65, .2, 1); }
.hero.up .scene { transform: none; }
#curtain { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; pointer-events: none;
  translate: calc(var(--tx) * -2px) 0; }
.valance { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; pointer-events: none;
  transform-origin: 50% 0; transform: perspective(800px) rotateX(-72deg); opacity: 0;
  transition: transform 1.8s cubic-bezier(.2, 1.2, .35, 1) .55s, opacity .6s ease .55s;
  translate: calc(var(--tx) * -5px) calc(var(--ty) * -3px); }
.hero.up .valance { transform: none; opacity: 1; }
.palace { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0; padding-top: 93.52%; z-index: 4; pointer-events: none; }
.pl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 50% 97%;
  transform: perspective(700px) rotateX(84deg); opacity: 0;
  transition: transform 1.6s cubic-bezier(.2, 1.28, .35, 1), opacity .5s ease; }
.hero.up .pl { transform: none; opacity: 1; }
.hero.up .pl.back { transition-delay: 1.0s; }
.hero.up .pl.mid { transition-delay: 1.35s; }
.hero.up .pl.front { transition-delay: 1.7s; }
.pl.back { translate: calc(var(--tx) * -3px) calc(var(--sy) * -0.03px + var(--ty) * -2px); }
.pl.mid { translate: calc(var(--tx) * 5px) calc(var(--sy) * -0.08px + var(--ty) * 3px); }
.pl.front { translate: calc(var(--tx) * 11px) calc(var(--sy) * -0.17px + var(--ty) * 6px); }
.names {
  position: absolute; left: 0; right: 0; z-index: 1; text-align: center;
  top: calc(var(--cw) * .26 + 2%); bottom: calc(var(--cw) * .80 + 4%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.9); filter: blur(10px);
  transition: opacity 1.8s ease, transform 2.6s cubic-bezier(.2, .8, .2, 1), filter 2s ease;
  translate: calc(var(--tx) * 3px) calc(var(--sy) * 0.22px);
}
.names.show { opacity: 1; transform: none; filter: none; }
.names .pre { font-size: 13px; letter-spacing: .12em; color: var(--rose); margin-bottom: 6px; }
.names h1 {
  font-family: var(--serif); font-weight: 500; line-height: .98;
  font-size: clamp(40px, min(var(--cw) * .125, 6.6svh), 62px); letter-spacing: .005em;
}
.names h1 .hi { font-family: var(--deva); font-weight: 400; font-size: .82em; line-height: 1.25; }
.names h1 span { display: block; }
.names h1 i { display: block; font-style: normal; font-size: .72em; line-height: 1.15; }
.names .date {
  margin-top: 14px; font-family: var(--text); font-size: 15px; letter-spacing: .26em; color: var(--ink-soft);
}
.names .date.hi { letter-spacing: .06em; font-size: 16px; }
.scrollhint {
  position: absolute; left: 50%; bottom: 10px; z-index: 5; transform: translateX(-50%);
  width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(62, 51, 55, .45);
  opacity: 0; transition: opacity 1s 2.6s;
}
.scrollhint::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: rgba(62, 51, 55, .6); animation: wheel 1.8s infinite;
}
.names.show ~ .scrollhint { opacity: 1; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- shared type */
section { position: relative; text-align: center; }
h2 {
  font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: .01em;
}
h2.hi { font-family: var(--deva); font-weight: 400; font-size: 29px; line-height: 1.35; }
.caps { font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.caps.hi { letter-spacing: .04em; font-size: 14.5px; text-transform: none; }
.it { font-style: italic; font-size: 17.5px; color: var(--ink-soft); }
.it.hi { font-style: normal; font-size: 16px; }
.body { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.body.hi { font-size: 15.5px; line-height: 1.75; }
.rule { width: 34px; height: 1px; background: var(--ink); opacity: .35; margin: 14px auto; }
.links { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.links a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 5px; border-bottom: 1px solid rgba(62, 51, 55, .35);
}
.links a .hi { letter-spacing: .03em; font-size: 15px; text-transform: none; }
.links svg { width: 13px; height: 13px; flex: none; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .12s; } .rv.d2 { transition-delay: .24s; } .rv.d3 { transition-delay: .36s; }

/* ---------------------------------------------------------------- welcome */
.welcome { padding-bottom: 0; }
.welcome .canopy { width: 100%; margin-bottom: -40%; position: relative; z-index: 2; pointer-events: none; }
.welcome .vine { position: absolute; top: 24%; width: 23%; z-index: 1; pointer-events: none; }
.welcome .vine.l { left: -3%; } .welcome .vine.r { right: -3%; }
.welcome .inner { position: relative; z-index: 3; padding: 18% 22% 0; }
.welcome .ganesh { width: 104px; margin: 0 auto 10px; }
.mantra { font-family: var(--deva); font-size: 15px; color: var(--rose); letter-spacing: .02em; }
.shloka { font-family: var(--deva); font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin: 6px 0 22px; }
.welcome h2 { margin-bottom: 14px; }
.swans { position: relative; width: 100%; height: 0; padding-top: 55.56%; margin-top: 18px; z-index: 2; }
.swans.a3d { opacity: 1; }
.swans img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.swans .band { opacity: 0; transform: scaleX(.55); transition: opacity 1s ease, transform 1.8s cubic-bezier(.2, 1, .3, 1); }
.swans .sw { opacity: 0; transition: opacity 1.4s ease .35s, transform 2.6s cubic-bezier(.2, .9, .25, 1) .35s; }
.swans .sw.l { transform: translateX(-48%) rotate(-4deg); }
.swans .sw.r { transform: translateX(48%) rotate(4deg); }
.swans.in .band, .swans.in .sw { opacity: 1; transform: none; }
.swans.in .sw { animation: bob 4.6s ease-in-out 3s infinite alternate; }
.swans.in .sw.r { animation-delay: 3.4s; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -6px; } }

/* ---------------------------------------------------------------- countdown */
.countdown { padding: 0 0 6px; }
.countdown .garland { width: 100%; }
.countdown h2 { margin-top: -6%; }
.medals { display: flex; justify-content: center; align-items: flex-start; gap: 2.4%; padding: 22px 4% 0; }
.medal { width: 22%; position: relative; opacity: 0; transform: perspective(600px) rotateY(-125deg) scale(.9);
  transition: opacity .8s ease, transform 1.7s cubic-bezier(.2, 1.15, .3, 1); }
.medal:nth-child(2), .medal:nth-child(3) { margin-top: 22px; }
.medals.a3d { opacity: 1; }
.medals.in .medal { opacity: 1; transform: none; }
.medals.in .medal:nth-child(2) { transition-delay: .18s; }
.medals.in .medal:nth-child(3) { transition-delay: .36s; }
.medals.in .medal:nth-child(4) { transition-delay: .54s; }
.medal .disc { position: relative; }
.medal .num {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 6.6vw, 31px); color: #7f4457;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  font-variant-numeric: lining-nums tabular-nums;
}
.medal .num.beat { animation: beat .9s ease-out; }
@keyframes beat { 0% { transform: scale(1.16); color: #a3556c; } 100% { transform: scale(1); } }
.medal small { display: block; margin-top: 7px; font-size: 9.5px; letter-spacing: .2em; color: var(--ink-soft); }
.medal small.hi { letter-spacing: .02em; font-size: 13.5px; }
.cd-done { margin-top: 18px; font-size: 18px; color: var(--rose); font-style: italic; }
.necklace { width: 100%; margin-top: 8px; }

/* ---------------------------------------------------------------- invitation */
.invite { padding: 8px 30px 34px; }
.invite .couple { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 8.6vw, 37px); line-height: 1.12; margin: 14px 0 4px; }
.invite .couple.hi { font-family: var(--deva); font-weight: 400; font-size: 29px; line-height: 1.5; }
.invite .couple i { display: block; font-style: italic; font-size: .62em; color: var(--ink-soft); line-height: 1.6; }
.invite .parent { font-size: 14.5px; font-style: italic; color: var(--ink-soft); line-height: 1.45; margin: 2px 0 10px; }
.invite .parent.hi { font-style: normal; font-size: 14px; line-height: 1.7; }
.invite .date { margin-top: 18px; font-size: 18px; }
.invite .bless { margin-top: 16px; }

/* ---------------------------------------------------------------- venue card */
.venue { padding: 6px 0 0; }
.card {
  position: relative; margin: 0 16px; padding: 25% 34px 46px;
  background: #f2e3e8 url(a/linen.webp) repeat; background-size: 220px;
  box-shadow: 0 10px 30px rgba(110, 60, 80, .16), 0 2px 6px rgba(110, 60, 80, .1);
}
.card .lace { position: absolute; pointer-events: none; }
.card .lace.t { left: 0; right: 0; top: -2px; height: 19px; background: url(a/lace_h.webp) repeat-x; background-size: auto 19px; }
.card .lace.b { left: 0; right: 0; bottom: -2px; height: 19px; background: url(a/lace_h.webp) repeat-x; background-size: auto 19px; transform: scaleY(-1); }
.card .lace.l { top: 0; bottom: 0; left: -2px; width: 19px; background: url(a/lace_v.webp) repeat-y; background-size: 19px auto; transform: scaleX(-1); }
.card .lace.r { top: 0; bottom: 0; right: -2px; width: 19px; background: url(a/lace_v.webp) repeat-y; background-size: 19px auto; }
.card .line { position: absolute; top: 24px; bottom: 24px; width: 1px; background: rgba(168, 132, 75, .55); }
.card .line.l { left: 26px; } .card .line.r { right: 26px; }
.card .top { position: absolute; left: -4%; width: 108%; top: -3%; pointer-events: none; }
.card h2 { margin-bottom: 10px; }
.card .place { font-family: var(--serif); font-weight: 600; font-size: 25px; margin-top: 18px; }
.card .place.hi { font-family: var(--deva); font-weight: 400; font-size: 23px; }
.card .sub { margin-top: 4px; }
.card .when { margin-top: 12px; }
.card .lines { margin-top: 12px; font-size: 15.5px; line-height: 1.7; }
.card .lines.hi { font-size: 15px; }
.venue .hanging { width: 100%; margin-top: -9%; position: relative; z-index: 2; pointer-events: none; }

/* ---------------------------------------------------------------- couple + couplet */
.couple-sec { margin-top: -22%; padding: 0 0 20px; position: relative; z-index: 3; }
.archwrap { position: relative; width: 92%; margin: 0 auto; height: 0; padding-top: 125.12%; }
.archwrap .glow {
  position: absolute; left: 13%; right: 13%; top: 12%; bottom: 3%;
  border-radius: 50% 50% 6px 6px / 31% 31% 6px 6px;
  background: radial-gradient(ellipse at 50% 40%, #fbf1f4 0%, #f3e1e7 55%, #ecd4dc 100%);
  box-shadow: inset 0 0 30px rgba(160, 100, 120, .18);
}
.archwrap .photo { position: absolute; left: 50%; bottom: 3.2%; height: 68%; width: auto; transform: translateX(-50%); }
.archwrap .arch { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.couple-sec h2 { margin-top: 10px; }
.couplet { font-family: var(--deva); font-size: 17px; line-height: 1.8; color: var(--rose); margin: 14px 26px 6px; }
.couplet-en { margin: 4px 34px 0; }

/* ---------------------------------------------------------------- timeline */
.timeline { padding: 70px 0 30px; }
.timeline .sprig { position: absolute; top: -14px; width: 24%; pointer-events: none; }
.timeline .sprig.l { left: -2%; } .timeline .sprig.r { right: -2%; }
.tl { list-style: none; position: relative; margin: 30px 26px 0 22px; text-align: left; }
.tl::before {
  content: ''; position: absolute; left: 104px; top: 8px; bottom: 26px; width: 0;
  border-left: 1.6px dashed rgba(62, 51, 55, .5);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 2.6s cubic-bezier(.3, .1, .2, 1);
}
.tl.a3d { opacity: 1; }
.tl.in::before { transform: scaleY(1); }
.tl .ic.pop3 { opacity: 0; transform: perspective(500px) rotateX(72deg) scale(.8); transform-origin: 50% 100%;
  transition: transform 1.3s cubic-bezier(.2, 1.35, .35, 1) .25s, opacity .6s ease .25s; }
.tl li.in .ic.pop3 { opacity: 1; transform: none; }
.tl li { position: relative; display: flex; align-items: flex-start; min-height: 128px; padding-bottom: 14px; }
.tl .ic { width: 86px; flex: none; margin-right: 34px; margin-top: -10px; }
.tl .dot { position: absolute; left: 96px; top: 6px; width: 18px; height: 18px; background: url(a/pearl.webp) center / contain no-repeat;
  transform: scale(0); transition: transform .9s cubic-bezier(.2, 1.7, .4, 1) .5s; }
.tl li.in .dot { transform: scale(1); }
.tl .t b { display: block; font-weight: 600; font-size: 14px; letter-spacing: .14em; }
.tl .t b.hi { letter-spacing: .02em; font-size: 15px; }
.tl .t span { display: block; margin-top: 3px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.tl .t span.hi { letter-spacing: .02em; font-size: 17px; text-transform: none; color: var(--ink); }
.tl .t em { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.tl .t em.hi { font-style: normal; font-size: 14px; }
.timeline .note { margin: 6px 34px 0; font-size: 16px; line-height: 1.6; }

/* ---------------------------------------------------------------- tilak */
.tilak { padding: 10px 0 40px; }
.tilak .branch { width: 100%; margin-bottom: 18px; }
.tilak .hall { width: 74%; margin: 18px auto 8px; }
.tilak .place { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; margin-top: 6px; }
.tilak .place.hi { font-family: var(--deva); font-weight: 400; font-size: 25px; }
.tilak .meta { display: flex; justify-content: center; gap: 22px; margin-top: 14px; font-size: 15px; font-style: italic; }
.tilak .meta.hi { font-style: normal; font-size: 14.5px; }
.tilak .addr { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
.tilak .addr.hi { font-size: 15px; }
.tilak .body { margin: 16px 34px 0; }

/* ---------------------------------------------------------------- kids' request */
.kids { padding: 20px 30px 40px; }
.kids .rhyme { font-family: var(--deva); font-size: 18px; line-height: 1.75; color: var(--rose); margin: 14px 0 8px; }
.kids .who { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; }
.kids .who.hi { font-size: 14.5px; }
.kids .who b { display: block; font-weight: 500; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }
.kids .who b.hi { letter-spacing: .02em; font-size: 14px; text-transform: none; }

/* ---------------------------------------------------------------- blessings frame */
.blessings { padding: 0 0 30px; }
.bframe {
  position: relative; width: 92%; margin: 0 auto; min-height: calc(min(100vw, var(--col)) * .92 * 1180 / 920);
  background: url(a/bframe.webp) center / 100% 100% no-repeat;
  padding: 25% 17% 17%;
}
.bframe h2 { font-size: 40px; }
.bframe h2.hi { font-size: 30px; }
.bframe .body { margin-top: 12px; font-size: 15.5px; }
.bframe .grp { margin-top: 16px; font-size: 14.5px; line-height: 1.5; }
.bframe .grp.hi { font-size: 14px; line-height: 1.65; }
.bframe .grp b { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.bframe .grp.hi b { letter-spacing: .02em; font-size: 13.5px; text-transform: none; color: var(--rose); }

/* ---------------------------------------------------------------- footer */
footer { text-align: center; padding: 10px 24px 56px; }
footer .mono { width: 92px; margin: 0 auto 10px; }
footer .fn { font-family: var(--serif); font-size: 26px; font-weight: 500; }
footer .fn.hi { font-family: var(--deva); font-size: 22px; font-weight: 400; }
footer .fd { margin-top: 2px; font-size: 13px; letter-spacing: .3em; color: var(--ink-soft); }
.share {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 40px; background: #3e3337; color: #f6ecef;
  font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(62, 51, 55, .25);
}
.share .hi { letter-spacing: .03em; font-size: 15px; text-transform: none; }
.share svg { width: 16px; height: 16px; }
footer .shubham { margin-top: 30px; font-family: var(--deva); color: var(--rose); font-size: 15px; }

/* ---------------------------------------------------------------- 3D entrances + ambient motion */
.a3d { opacity: 0; will-change: transform, opacity;
  transition: opacity 1s ease, transform 1.6s cubic-bezier(.2, 1.15, .35, 1), clip-path 2.4s cubic-bezier(.3, .1, .2, 1); }
.a3d.in { opacity: 1; transform: none; }
.pop { transform: perspective(900px) rotateX(68deg); transform-origin: 50% 100%; }
.drop { transform: perspective(900px) rotateX(-80deg); transform-origin: 50% 0; }
.flip { transform: perspective(700px) rotateY(-115deg) scale(.9); }
.zoom { transform: scale(.82) translateY(24px); }
.unroll { opacity: 1; clip-path: inset(0 0 100% 0); }
.unroll.in { clip-path: inset(0 0 0 0); }
.wipe { opacity: 1; clip-path: inset(0 100% 0 0); }
.wipe.in { clip-path: inset(0 0 0 0); }
.sway { transform-origin: 50% 0; animation: sway 7s ease-in-out infinite alternate; }
.sway2 { transform-origin: 50% 0; animation: sway2 5.5s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -0.6deg; } to { rotate: 0.6deg; } }
@keyframes sway2 { from { rotate: -1.3deg; } to { rotate: 1.3deg; } }
.vine.r.sway2 { animation-delay: -2.7s; }
.sprig.r.sway2 { animation-delay: -1.9s; }

/* light sweeping across the seal */
#seal::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 250, 235, .55) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url(a/seal.webp) center / 100% 100% no-repeat; mask: url(a/seal.webp) center / 100% 100% no-repeat;
  animation: shine 4s ease-in-out 1.2s infinite;
}
@keyframes shine { 0%, 50% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* drifting rose petals */
#petals { position: fixed; top: 0; left: 50%; width: min(100vw, var(--col)); height: 100vh; height: 100lvh;
  transform: translateX(-50%); pointer-events: none; z-index: 30; }

@media (prefers-reduced-motion: reduce) {
  .rv, .a3d, .pl, .valance, .names, .medal, .swans .sw, .swans .band, .tl .ic.pop3 { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; }
  .unroll, .wipe { clip-path: none !important; }
  .tl::before, .tl .dot { transform: none !important; }
  .sway, .sway2, .swans.in .sw, #seal, #seal::after { animation: none !important; }
  #petals { display: none; }
}