/* Shared design tokens + layout for the invite. Chapters style themselves in chapters/<id>.css */
/* Fonts chosen by the owner: Gotu (headings) + Mukta (text) */
@font-face { font-family: "Gotu"; src: url(../fonts/Gotu-Regular.3a68e6a7f8.woff2); font-display: swap; }
@font-face { font-family: "Mukta"; font-weight: 600; src: url(../fonts/Mukta-SemiBold.e7a374eab4.woff2); font-display: swap; }

:root {
  /* Paithani silk palette */
  --ivory: #FFF9EC;      /* page silk */
  --ivory-2: #FDEFD3;    /* deeper silk */
  --rani: #C2185B;       /* paithani rani pink */
  --rani-deep: #8E0F43;
  --peacock: #0B6E6E;    /* paithani peacock teal */
  --peacock-deep: #064848;
  --marigold: #F28C18;
  --haldi: #F6C343;      /* turmeric */
  --kumkum: #A5102A;     /* kumkum red */
  --ink: #3D0A0A;        /* body text: deep maroon */
  --zari: #C9952B;       /* gold thread */
  --zari-light: #F3D58A;
  --leaf: #2E7D32;

  /* Gold foil. --foil is bright (for dark grounds and borders); --foil-ink is deep enough to read on ivory */
  --foil: linear-gradient(110deg, #8C5A0F 0%, #C9952B 18%, #F6DC8E 32%, #FFF4C9 38%, #E2B34E 46%, #A9741A 62%, #D9AE52 78%, #F3D58A 86%, #9A6714 100%);
  --foil-ink: linear-gradient(110deg, #6E4309 0%, #9C6B14 22%, #C79634 36%, #DDB458 42%, #A87518 52%, #7C500D 68%, #B5862A 84%, #6E4309 100%);
  --hairline: inset 0 0 0 1px rgba(201,149,43,.55);  /* one gold hairline, used everywhere a border is needed */

  --display: "Gotu", "Mukta", serif;
  --body: "Mukta", "Nirmala UI", sans-serif;
  --ui: "Mukta", "Nirmala UI", sans-serif;

  /* Type scale: few sizes, used consistently. Never add letter-spacing to Devanagari (it breaks the shirorekha). */
  --fs-hero: clamp(40px, 12vw, 54px);   /* names, the one big moment per chapter */
  --fs-h2: clamp(30px, 8.5vw, 40px);    /* chapter titles */
  --fs-h3: clamp(23px, 6.6vw, 28px);    /* sub-titles, card titles */
  --fs-lead: 19px;
  --fs-body: 18px;
  --fs-ui: 17px;                        /* buttons, hints */
  --fs-meta: 15px;                      /* smallest text allowed: labels, captions */

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(61,10,10,.08), 0 6px 14px -6px rgba(61,10,10,.18);    /* resting card */
  --sh-2: 0 2px 4px rgba(61,10,10,.08), 0 16px 34px -14px rgba(61,10,10,.32);  /* lifted card / floating button */

  --col: min(100vw, 480px);   /* patrika column width */
  --pad: clamp(16px, 5vw, 28px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* the one easing: everything enters/moves on this */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1); /* a calm overshoot for small pops only */

  /* hand-made paper: fine fibre grain + soft cloudy mottling (tiny SVG noise, no image files) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .07 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .12 0 0 0 .3 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-bottom: 76px; /* the sound pod */ scrollbar-color: var(--zari) var(--rani-deep); scrollbar-width: thin; }
body {
  margin: 0; color: var(--ink); font: 18px/1.65 var(--body);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  /* the silk box the card sits in (only seen beside the column on wide screens) */
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,214,235,.10) 46%, rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #D23A73 0%, #C2185B 55%, #A8124E 100%);
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; height: 100svh; }
/* a strip of silk below the card where the sound pod rests, so it can always be scrolled clear of the text */
body:not(.locked) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

main#patrika {
  width: var(--col); margin: 0 auto; background: var(--ivory);
  box-shadow: 0 0 0 1px rgba(243,213,138,.9), 0 0 0 7px rgba(78,6,36,.55), 0 0 0 8px rgba(201,149,43,.75), 0 34px 80px -10px rgba(30,0,12,.65);
  position: relative; overflow: hidden; overflow: clip; /* clip: not a scroll container, so scrollIntoView can't shift gated content */
}
/* hand-made paper grain over the whole card, one material for every chapter (painted, no blend modes) */
main#patrika::after {
  content: ""; position: absolute; inset: 0; z-index: 35; pointer-events: none;
  background: var(--grain) 0 0 / 220px 220px; opacity: .55;
}

.chapter {
  position: relative; min-height: 100vh; min-height: 100svh; padding: 56px var(--pad);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
#patrika > .chapter { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* the last line / पुढे चला always clears the sound pod */
/* Seam between chapters: a gold hairline that fades into a small ornament, with the soft shadow of
   the page above lying over this one (a deckled, hand-bound feel instead of a printed border) */
.chapter + .chapter::before {
  content: "✦"; position: absolute; top: -8px; left: 0; right: 0; height: 16px; z-index: 3; pointer-events: none;
  font: 13px/16px var(--ui); color: var(--zari); text-align: center;
  background:
    linear-gradient(90deg, transparent 6%, var(--zari) 30%, transparent calc(50% - 14px), transparent calc(50% + 14px), var(--zari) 70%, transparent 94%) 0 50% / 100% 1px no-repeat,
    linear-gradient(rgba(61,10,10,.10), rgba(61,10,10,0)) 0 8px / 100% 10px no-repeat;
}

h2, .display { font-family: var(--display); font-weight: 400; line-height: 1.25; margin: 0; }
/* letterpress: a hairline of light under the letters, as if pressed into the paper.
   filter (not text-shadow) so it also works on chapters that clip a gradient into the text */
h2 { font-size: var(--fs-h2); color: var(--kumkum); text-wrap: balance; filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); }
p { margin: 0; }

/* Primary action button: kumkum silk pill with one gold hairline */
.btn {
  font: 600 17px/1 var(--ui); color: #fff;
  background: linear-gradient(180deg, #BE1A3C 0%, var(--kumkum) 55%, #870B22 100%);
  border: 0; border-radius: var(--r-pill); padding: 14px 24px; min-height: 48px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--zari-light), inset 0 1px 0 1px rgba(255,255,255,.22), 0 1px 1px rgba(61,10,10,.2), 0 10px 20px -10px rgba(142,15,67,.7);
  transition: transform .16s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .btn:hover, .next:hover { transform: translateY(-1px); filter: brightness(1.06); } }
.btn:active, .next:active { transform: scale(.97); }
.btn.alt { background: linear-gradient(180deg, #13807F 0%, var(--peacock) 55%, #075757 100%); box-shadow: inset 0 0 0 1px var(--zari-light), inset 0 1px 0 1px rgba(255,255,255,.2), 0 1px 1px rgba(6,72,72,.2), 0 10px 20px -10px rgba(6,72,72,.7); }
:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }

/* Gesture hint: plain-language instruction with a pulsing dot */
.hint {
  font: 600 16px/1.3 var(--ui); color: var(--rani-deep);
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
}
.hint::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rani);
  animation: pulse 1.6s var(--ease-out) infinite;
}
.hint { max-height: 160px; }
/* done: fade, then fold away so no blank gap is left */
.revealed .hint, .revealed .hint[data-gesture] {
  opacity: 0; pointer-events: none; max-height: 0; margin-block: 0; padding-block: 0; overflow: hidden;
  transition: opacity .35s, max-height .5s .35s, margin .5s .35s, padding .5s .35s;
}
@keyframes pulse { 50% { transform: scale(.7); opacity: .55; } } /* transform + opacity: no repaint every frame */

/* Gesture hints: <p class="hint" data-gesture="tap|hold|scratch|down|swipe|drag">…</p> shows an animated 👆 acting it out */
.hint[data-gesture] {
  background: linear-gradient(180deg, #FFFFFF, #FFFBF1); padding: 10px 18px 10px 12px; border-radius: var(--r-pill); font-size: 17px;
  box-shadow: var(--hairline), 0 1px 1px rgba(61,10,10,.06), 0 10px 22px -12px rgba(142,15,67,.35);
}
.hint[data-gesture]::before {
  content: "👆"; width: auto; height: auto; background: none; border-radius: 0; font-size: 28px; line-height: 1;
  display: inline-block; animation: g-tap 1.3s var(--ease-out) infinite;
}
.hint[data-gesture="hold"]::before { animation: g-hold 1.8s ease-in-out infinite; }
.hint[data-gesture="scratch"]::before { animation: g-scratch .9s ease-in-out infinite; }
.hint[data-gesture="down"]::before { content: "👇"; animation: g-down 1.4s ease-in-out infinite; }
.hint[data-gesture="swipe"]::before { content: "👉"; animation: g-swipe 1.4s ease-in-out infinite; }
.hint[data-gesture="drag"]::before { animation: g-down 1.4s ease-in-out infinite; }
@keyframes g-tap { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(6px) scale(.86); } }
@keyframes g-hold { 0%, 15% { transform: translateY(0) scale(1); } 30%, 80% { transform: translateY(6px) scale(.84); } }
@keyframes g-scratch { 0%, 100% { transform: translateX(-7px) rotate(-12deg); } 50% { transform: translateX(7px) rotate(12deg); } }
@keyframes g-down { 0%, 100% { transform: translateY(-4px); opacity: .4; } 50% { transform: translateY(6px); opacity: 1; } } /* never fully gone */
@keyframes g-swipe { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(10px); } }

/* Help button: appears after a guest has been idle on a step; doing the step for them */
#helpBtn {
  position: fixed; z-index: 70; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  font: 600 16px var(--ui); color: var(--ink); border: 0; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #FCDD80 0%, var(--haldi) 55%, #EBB12A 100%);
  padding: 13px 20px; min-height: 48px; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 0 0 1px rgba(156,107,20,.45), 0 14px 30px -10px rgba(61,10,10,.55);
  transition: transform .5s var(--ease-spring), opacity .3s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#helpBtn.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; animation: helpwiggle 3s 1.2s ease-in-out infinite; }
#helpBtn.show:active { transform: translate(-50%, 0) scale(.97); }
@keyframes helpwiggle { 0%, 90%, 100% { rotate: 0deg; } 93% { rotate: -2deg; } 97% { rotate: 2deg; } }

/* Marathi ritual words ticker between chapters: a calm woven selvedge, gold on rani silk */
.ribbon {
  display: flex; overflow: hidden; white-space: nowrap; padding: 9px 0;
  background:
    linear-gradient(var(--zari-light), var(--zari-light)) 0 3px / 100% 1px no-repeat,
    linear-gradient(var(--zari-light), var(--zari-light)) 0 calc(100% - 3px) / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,220,240,.14) 50%, rgba(255,255,255,0) 80%),
    linear-gradient(180deg, #B0144F, var(--rani-deep));
  color: var(--zari-light); font: 600 16px var(--ui);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon > div { flex: none; animation: ticker 64s linear infinite; }
.ribbon i { font-style: normal; font-size: 11px; color: var(--zari-light); opacity: .75; margin: 0 .9em; vertical-align: 2px; }
.ribbon.is-off > div { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* After the wedding: keepsake mode, nothing to add to a calendar */
.after-wedding #events .ev-ics { display: none; }

/* Gate: patrika height is clamped by core.js; smooth growth when the next chapter unlocks */
main#patrika { transition: height .6s var(--ease-out); }

/* Scroll-driven reveal utility (modern browsers; harmless elsewhere): add class "sd-rise" */
@supports (animation-timeline: view()) {
  .sd-rise { animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes sd-rise { from { opacity: 0; transform: translateY(40px) scale(.97); } }

  /* Page turn: a newly unlocked chapter rises out of the paper as it scrolls in, and its seam
     is stitched from the centre outwards. Fill is "backwards" only, so once a chapter is on screen
     the animation is no longer applied (no lasting stacking context for fixed children). */
  #patrika > .chapter:not(:first-child) { animation: page-in linear backwards; animation-timeline: view(); animation-range: entry 0px entry 380px; }
  .chapter + .chapter::before { animation: seam-in linear backwards; animation-timeline: view(); animation-range: entry 0px entry 300px; }
  @keyframes page-in { from { opacity: .12; } }
  @keyframes seam-in { from { opacity: 0; transform: scaleX(.2); } }
}

/* "Next" nudge shown after a chapter is revealed: a quiet ivory button, so the chapter's own action stays the hero */
.next {
  margin-top: 24px; font: 600 18px var(--ui); color: var(--peacock-deep); border: 0; min-height: 48px;
  background: #FFFCF4;
  border-radius: var(--r-pill); padding: 12px 26px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--zari), 0 8px 18px -10px rgba(6,72,72,.45);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), filter .3s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.revealed .next { opacity: 1; transform: none; }
.revealed .next:active { transform: scale(.97); transition-duration: .16s; }
.next::after { content: "↓"; margin-left: .35em; display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* Progress thread: a zari thread strung with gold beads, one per chapter */
#thread {
  position: fixed; right: max(8px, calc(50vw - var(--col) / 2 - 28px)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 40; padding: 10px 0;
  opacity: 0; transition: opacity .6s var(--ease-out);
}
body:not(.locked) #thread { opacity: 1; }
#thread::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--zari) 10%, var(--zari) 90%, transparent); }
#thread a {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--zari);
  transition: transform .3s var(--ease-spring), opacity .3s, box-shadow .3s;
}
#thread a::after { content: ""; position: absolute; inset: -7px; } /* a bigger, invisible tap area */
#thread a.done { background: radial-gradient(circle at 35% 30%, #FFF4C9 0 12%, #E2B34E 45%, #9C6B14 100%); box-shadow: 0 1px 2px rgba(61,10,10,.35); }
#thread a.here { transform: scale(1.5); box-shadow: inset 0 0 0 1.5px var(--zari), 0 0 0 3px rgba(194,24,91,.28); }
#thread a.done.here { box-shadow: 0 1px 2px rgba(61,10,10,.35), 0 0 0 3px rgba(194,24,91,.28); }
#thread a.off { opacity: .3; pointer-events: none; }
@media (max-width: 520px) { #thread { right: 7px; gap: 11px; } body:not(.locked) #thread { opacity: .55; } #thread a { width: 7px; height: 7px; } } /* phones: a quiet hairline that stays clear of content */
/* the current bead's name, shown for a moment when the guest reaches a new chapter (placed by core.js) */
#beadSay {
  position: fixed; z-index: 41; transform: translate(6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  font: 600 15px/1 var(--ui); color: var(--rani-deep); background: rgba(255,249,236,.96);
  padding: 7px 12px; border-radius: var(--r-pill); box-shadow: var(--hairline), var(--sh-1);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
#beadSay.show { opacity: 1; transform: translate(0, -50%); transition-duration: .3s; }

/* Sound pod: one pill, bottom-right, holding 🎵 सनई (music.js) and 🗣️ कथा (story.js) */
#soundPod {
  position: fixed; z-index: 60; bottom: max(6px, env(safe-area-inset-bottom)); right: max(10px, calc(50vw - var(--col) / 2 + 10px));
  display: none; gap: 2px; padding: 2px; border-radius: var(--r-pill);
  background: rgba(255,249,236,.94); box-shadow: var(--hairline), var(--sh-2);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
body:not(.locked) #soundPod { display: flex; }
body.scrolling #soundPod { opacity: 0; transform: translateY(10px); pointer-events: none; }
body.help-on #soundPod { transform: translateY(-62px); } /* make room for the help button (core.js toggles help-on) */
body.typing #soundPod { display: none; } /* phone keyboard up */
#soundPod button {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 0 12px 0 9px;
  font: 600 15px/1 var(--ui); color: var(--peacock-deep); background: transparent; border: 0; border-radius: var(--r-pill);
  box-shadow: none; opacity: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out), opacity .2s, background-color .2s;
}
#soundPod button + button::before { content: ""; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 1px; background: rgba(201,149,43,.45); } /* a hairline between the two */
#soundPod button:active { transform: scale(.95); }
#soundPod #musicBtn { background: transparent; box-shadow: none; } /* beats door.css's old round music-button look */
#soundPod #musicBtn::after { content: none; }
#soundPod .sp-ic { font-size: 19px; line-height: 1; }
body.pod-mini #soundPod .sp-lb { display: none; }
body.pod-mini #soundPod button { padding: 0 11px; }
#soundPod button[aria-pressed="false"] { color: #7A6A5A; }
#soundPod button[aria-pressed="false"] .sp-lb { text-decoration: line-through 1.5px; opacity: .7; }
@media (hover: hover) and (pointer: fine) { #soundPod button:hover, #soundPod #musicBtn:hover { background-color: rgba(201,149,43,.12); } }

/* Small notice at the top (e.g. "welcome back") */
.toast {
  position: fixed; z-index: 90; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translate(-50%, -12px); opacity: 0;
  font: 600 17px/1.3 var(--ui); color: var(--peacock-deep); background: rgba(255,249,236,.97);
  padding: 11px 20px; border-radius: var(--r-pill); box-shadow: var(--hairline), var(--sh-2); white-space: nowrap; pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); transition-duration: .35s; }

/* Closing colophon after the last chapter (built by core.js) */
#colophon {
  position: relative; text-align: center; padding: 44px var(--pad) 40px;
  background: radial-gradient(80% 60% at 50% 30%, rgba(243,213,138,.35), transparent 70%);
}
#colophon::before { /* the same seam as between chapters */
  content: "✦"; position: absolute; top: -8px; left: 0; right: 0; height: 16px; font: 13px/16px var(--ui); color: var(--zari);
  background: linear-gradient(90deg, transparent 6%, var(--zari) 30%, transparent calc(50% - 14px), transparent calc(50% + 14px), var(--zari) 70%, transparent 94%) 0 50% / 100% 1px no-repeat;
}
#colophon .co-toran { display: block; width: min(260px, 72%); height: auto; margin: 0 auto 14px; }
#colophon .co-om { font-size: var(--fs-h3); }
#colophon .co-wait { font: 600 var(--fs-lead)/1.5 var(--ui); color: var(--rani-deep); margin-top: 6px; }
#colophon .co-when { font-size: var(--fs-meta); line-height: 1.5; color: var(--ink); opacity: .85; text-wrap: balance; }

#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }

img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- opt-in material utilities for chapters ---------- */
/* .foil: gold-foil display text with one slow sheen when it appears (and on hover). Large text only (≥24px).
   The padding keeps Devanagari matras inside the painted area. */
.foil {
  background: var(--foil-ink) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: .14em .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85));
  animation: foil-sheen 2.6s var(--ease-out) .3s backwards; transition: background-position 1.4s var(--ease-out);
}
.foil.on-dark { background-image: var(--foil); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
@media (hover: hover) { .foil:hover { background-position: 70% 0; } }
@keyframes foil-sheen { from { background-position: 100% 0; } }
/* .letterpress: solid-colour text pressed into the paper */
.letterpress { text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(61,10,10,.12); }
/* .foil-frame: a card edged with a gold-foil hairline (set --frame-bg to the card's own fill) */
.foil-frame { border: 1.5px solid transparent; background: linear-gradient(var(--frame-bg, var(--ivory)), var(--frame-bg, var(--ivory))) padding-box, var(--foil) border-box; }
/* .foil-rule: a hairline divider that fades at both ends */
.foil-rule { height: 1px; width: min(240px, 70%); margin: 14px auto; border: 0; background: linear-gradient(90deg, transparent, var(--zari) 25%, var(--zari-light) 50%, var(--zari) 75%, transparent); }
/* .paper: an ivory hand-made paper card */
.paper { background: var(--grain) 0 0 / 220px 220px, linear-gradient(180deg, #FFFCF4, var(--ivory)); border-radius: var(--r-md); box-shadow: var(--hairline), var(--sh-1); }
/* .deckle: torn hand-made-paper edge, top and bottom */
.deckle {
  --dk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8'%3E%3Cpath d='M0 8V4l5-1 6 2 5-3 7 2 4-2 6 3 5-2 7 1 4-2 6 3 6-1 5 2 6-3 5 2 7-1 4 2 6-2 5 1 6-2 5 3 4-2v6z'/%3E%3C/svg%3E");
  --dk-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8'%3E%3Cpath transform='matrix(1 0 0 -1 0 8)' d='M0 8V4l5-1 6 2 5-3 7 2 4-2 6 3 5-2 7 1 4-2 6 3 6-1 5 2 6-3 5 2 7-1 4 2 6-2 5 1 6-2 5 3 4-2v6z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--dk), linear-gradient(#000 0 0), var(--dk-b); mask-image: var(--dk), linear-gradient(#000 0 0), var(--dk-b);
  -webkit-mask-position: 0 0, 0 7px, 0 100%; mask-position: 0 0, 0 7px, 0 100%;
  -webkit-mask-size: 120px 8px, 100% calc(100% - 14px), 120px 8px; mask-size: 120px 8px, 100% calc(100% - 14px), 120px 8px;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x; mask-repeat: repeat-x, no-repeat, repeat-x;
}

/* ---------- desktop: the card in a silk box with woven Paithani side panels ---------- */
@media (min-width: 560px) {
  body { background-attachment: fixed; } /* desktop only: on phones a fixed background repaints on every scroll */
  body::before, body::after {
    position: fixed; z-index: -1; top: 0; bottom: 0; width: calc(50vw - var(--col) / 2); pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font: 400 clamp(24px, 2.4vw, 36px)/1.45 var(--display); color: rgba(243,213,138,.62);
    white-space: pre; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.25);
    /* lotus buti on a half-drop grid, in gold thread */
    --buti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='-8 -10 56 64'%3E%3Cg fill='none' stroke='%23F3D58A' stroke-width='1' stroke-linejoin='round' opacity='.42'%3E%3Cpath d='M20 8c4 5 4 11 0 16-4-5-4-11 0-16z'/%3E%3Cpath d='M20 24c-6 0-11-4-12-10 6 0 10 4 12 10zM20 24c6 0 11-4 12-10-6 0-10 4-12 10z'/%3E%3Cpath d='M11 26h18M20 26v6M16 32h8'/%3E%3C/g%3E%3Ccircle cx='20' cy='38' r='1.3' fill='%23F3D58A' opacity='.42'/%3E%3C/svg%3E");
  }
  /* each panel: a dark lane beside the card (the thread lives on the right one), then the woven
     border (gold hairline · teal strip with gold dots · gold hairline · gold cord), then the buti field */
  body::before {
    content: "॥ श्री ॥\A शुभ विवाह"; content: "॥ श्री ॥\A शुभ विवाह" / ""; left: 0;
    background:
      linear-gradient(var(--zari-light), var(--zari-light)) right 44px top 0 / 1px 100% no-repeat,
      radial-gradient(circle, var(--zari-light) 1.4px, transparent 2px) right 46px top 0 / 14px 14px repeat-y,
      linear-gradient(var(--peacock-deep), var(--peacock-deep)) right 46px top 0 / 14px 100% no-repeat,
      linear-gradient(var(--zari-light), var(--zari-light)) right 62px top 0 / 1px 100% no-repeat,
      linear-gradient(90deg, #9C6B14, var(--zari-light), #9C6B14) right 68px top 0 / 3px 100% no-repeat,
      linear-gradient(90deg, transparent calc(100% - 72px), rgba(40,0,15,.25) calc(100% - 72px)),
      var(--buti) right 84px top 0 / 56px 64px, var(--buti) right 112px top 32px / 56px 64px;
  }
  body::after {
    content: "चेतना\A ✦ \A देवेन्द्र\A १३ · १२ · २०२६"; content: "चेतना\A ✦ \A देवेन्द्र\A १३ · १२ · २०२६" / ""; right: 0;
    background:
      linear-gradient(var(--zari-light), var(--zari-light)) left 44px top 0 / 1px 100% no-repeat,
      radial-gradient(circle, var(--zari-light) 1.4px, transparent 2px) left 46px top 0 / 14px 14px repeat-y,
      linear-gradient(var(--peacock-deep), var(--peacock-deep)) left 46px top 0 / 14px 100% no-repeat,
      linear-gradient(var(--zari-light), var(--zari-light)) left 62px top 0 / 1px 100% no-repeat,
      linear-gradient(90deg, #9C6B14, var(--zari-light), #9C6B14) left 68px top 0 / 3px 100% no-repeat,
      linear-gradient(90deg, rgba(40,0,15,.25) 72px, transparent 72px),
      var(--buti) left 84px top 0 / 56px 64px, var(--buti) left 112px top 32px / 56px 64px;
  }
}
/* the side text needs room; very narrow side panels keep only the weave */
@media (min-width: 560px) and (max-width: 860px) { body::before, body::after { font-size: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  #patrika > .chapter, .chapter + .chapter::before, .foil { animation: none !important; }
}

/* Off-screen chapters: pause their animations (set by core.js) - smoothness on mid-range phones */
.chapter.is-off, .chapter.is-off *, .chapter.is-off::before, .chapter.is-off::after, .chapter.is-off *::before, .chapter.is-off *::after { animation-play-state: paused !important; }

/* While the door script loads: a calm placeholder instead of a blank screen */
#door:empty { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ivory); }
#door:empty::after { content: '\0965  \0936\094D\0930\0940  \0965'; font: 600 30px var(--display); color: var(--kumkum); animation: pulse-txt 1.4s ease-in-out infinite; }
@keyframes pulse-txt { 50% { opacity: .45; } }

/* Door overlay */
#door {
  /* transparent: on wide screens the core silk box and its Paithani side panels frame the door */
  position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; background: transparent;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; outline: none;
}
#door:focus-visible .d-jamb { outline: 4px solid var(--marigold); outline-offset: 4px; }
#door .d-stage {
  position: relative; width: var(--col); height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(255,249,236,0) 60%),
    radial-gradient(circle, rgba(201,149,43,.22) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
  /* the same gold-edged card frame as main#patrika, so the first view is already the boxed card */
  box-shadow: 0 0 0 1px rgba(243,213,138,.9), 0 0 0 7px rgba(78,6,36,.55), 0 0 0 8px rgba(201,149,43,.75), 0 34px 80px -10px rgba(30,0,12,.65);
  transform-origin: 50% 52%;
  transition: transform 1.1s cubic-bezier(.6,0,.3,1), opacity .9s ease .2s;
}
#door.is-gone .d-stage { transform: scale(1.9); opacity: 0; }

/* toran */
#door .d-toran { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(61,10,10,.25)); animation: d-drop 1s var(--ease-out) both; }
#door .d-sway { transform-box: fill-box; transform-origin: 50% 0; animation: d-sway 3.4s ease-in-out infinite alternate; }
@keyframes d-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes d-drop { from { transform: translateY(-40px); opacity: 0; } }

/* arch: pediment + frame + threshold */
#door .d-arch {
  width: 88%; flex: 1; min-height: 0; display: flex; flex-direction: column;
  margin-top: clamp(34px, 9.5vw, 46px); filter: drop-shadow(0 14px 22px rgba(61,10,10,.28));
  animation: d-rise .9s var(--ease-out) .1s both;
}
@keyframes d-rise { from { transform: translateY(24px) scale(.97); opacity: 0; } }
#door .d-lintel { width: 100%; height: auto; display: block; margin-bottom: -1px; }
#door .d-sub { font: 600 15px var(--ui); fill: var(--peacock); }
#door .d-names { font: 25px var(--display); fill: var(--kumkum); }
#door .d-heart { fill: var(--rani); font-family: var(--ui); font-size: .72em; } /* follows .d-names when it shrinks */
#door .d-shri { font: 15px var(--display); fill: var(--kumkum); }

#door .d-frame {
  flex: 1; min-height: 0; padding: 9px 9px 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, #8A4318, #B8692E 50%, #8A4318);
  box-shadow: inset 0 0 0 2px var(--zari);
}
#door .d-jamb {
  height: 100%; padding: 7px 7px 0;
  background: radial-gradient(circle at 50% 50%, #FFF1C1 0 1px, var(--zari) 1.8px, #8A5A12 2.6px, transparent 3px) 0 0 / 7px 9px, #6B3010;
  box-shadow: inset 0 0 0 2px var(--zari);
}
#door .d-way {
  position: relative; height: 100%; display: flex; perspective: 1100px;
  background: radial-gradient(ellipse at 50% 55%, #FFFDF2 0%, #FFE9A8 30%, #F6C343 60%, #F28C18 100%);
  box-shadow: inset 0 0 0 2px var(--zari);
}
/* light leaking through the seam, inviting a tap */
#door .d-way::after {
  content: ""; position: absolute; left: 50%; top: 4%; bottom: 0; width: 6px; margin-left: -3px; z-index: 2;
  background: linear-gradient(transparent, #FFF6C8 20%, #FFF6C8 80%, transparent);
  filter: blur(3px); animation: d-seam 2.4s ease-in-out infinite; pointer-events: none;
}
#door.is-open .d-way::after { opacity: 0; animation: none; transition: opacity .3s; }
@keyframes d-seam { 50% { opacity: .35; } }

/* door leaves */
#door .d-leaf { flex: 1; position: relative; transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(.55,.06,.22,1); }
#door .d-l { transform-origin: 0 50%; }
#door .d-r { transform-origin: 100% 50%; }
#door:not(.is-drag):not(.is-open) .d-l { animation: d-nudgeL 5s ease-in-out 1.6s infinite; }
#door:not(.is-drag):not(.is-open) .d-r { animation: d-nudgeR 5s ease-in-out 1.6s infinite; }
@keyframes d-nudgeL { 0%, 78%, 100% { transform: none; } 86% { transform: rotateY(9deg); } }
@keyframes d-nudgeR { 0%, 78%, 100% { transform: none; } 86% { transform: rotateY(-9deg); } }
#door.is-drag .d-leaf { transition: none; }
#door.is-open .d-l { transform: rotateY(104deg); }
#door.is-open .d-r { transform: rotateY(-104deg); }
#door .d-leaf::after { /* back of the leaf, seen as it swings inward */
  content: ""; position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden;
  background: linear-gradient(90deg, #5E2A0E, #7A3A14); box-shadow: inset 0 0 0 3px var(--zari);
}
#door .d-face {
  position: absolute; inset: 0; backface-visibility: hidden; padding: 12px 11px;
  display: flex; flex-direction: column; gap: 0;
  background:
    radial-gradient(circle, #FFF1C1 0 1.4px, #C9952B 2.2px, #7A4A0C 3px, transparent 3.5px) left 2px top 6px / 9px 20px repeat-y,
    radial-gradient(circle, #FFF1C1 0 1.4px, #C9952B 2.2px, #7A4A0C 3px, transparent 3.5px) right 2px top 6px / 9px 20px repeat-y,
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #B96A2F, #9A5020 55%, #84401A);
  box-shadow: inset 0 0 0 2px var(--zari), inset 0 0 18px rgba(61,10,10,.35);
}
#door .d-l .d-face { border-right: 1px solid #5E2A0E; }
#door .d-panel { /* raised teak panel: dark groove, lit bevel, sunk field */
  position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(61,10,10,.07) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 40%, #C47A3C, #9A5020 70%, #84401A);
  box-shadow: inset 0 0 0 2px #4A1E08, inset 3px 3px 0 3px rgba(255,214,160,.35), inset -3px -3px 0 3px rgba(61,10,10,.45),
    inset 0 0 0 11px #A85A26, inset 0 0 0 12.5px rgba(61,10,10,.55), 0 1px 0 rgba(255,214,160,.3);
}
#door .d-panel svg { width: 42%; max-height: 54%; filter: drop-shadow(0 2px 2px rgba(61,10,10,.55)); }
#door .d-p1 { flex: 1.45; border-radius: 50% 50% 3px 3px / 22% 22% 3px 3px; }
#door .d-p2 { flex: 1; }
#door .d-p3 { flex: .8; }
#door .d-rail { /* brass studs + zari triangle band between panels */
  flex: 0 0 16px; margin: 3px -4px;
  background:
    radial-gradient(circle at 42% 38%, #FFF6D0 0 1.2px, #E9C46A 2.3px, #A8761E 3.6px, #5E3A08 4.4px, transparent 5px) 50% 50% / 16px 16px repeat-x,
    linear-gradient(var(--zari), var(--zari)) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(var(--zari), var(--zari)) 0 100% / 100% 1.5px no-repeat;
}
/* brass ring handle (kadi) on the inner edge */
#door .d-kadi {
  position: absolute; top: 33%; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF1C1, #C9952B 55%, #7A4A0C);
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
#door .d-kadi::after {
  content: ""; position: absolute; left: 50%; top: 9px; width: 24px; height: 26px; margin-left: -12px;
  border: 3.5px solid #C9952B; border-radius: 50%; border-top-color: transparent;
  box-shadow: 0 2px 2px rgba(0,0,0,.35);
}
#door .d-l .d-kadi { right: 4px; }
#door .d-r .d-kadi { left: 4px; }
/* dindi: the small wicket door cut into the big leaf, with its own ring */
#door .d-dindi {
  position: absolute; left: 13%; right: 9%; top: 50%; bottom: 2.5%; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #3A1405, inset 0 0 0 3.5px var(--zari), inset 0 0 0 5px #3A1405, 0 0 0 1px rgba(255,214,160,.35);
}
#door .d-dindi .d-kadi { top: 38%; right: 6px; transform: scale(.75); }

/* threshold (umbartha), painted with haldi and kumkum dots */
#door .d-step {
  flex: 0 0 24px; margin: 0 -10px; border-radius: 3px;
  background:
    radial-gradient(circle, var(--kumkum) 0 3px, transparent 3.5px) 50% 50% / 26px 24px repeat-x,
    linear-gradient(180deg, #FFD95A, var(--haldi) 60%, #D9A21F);
  box-shadow: inset 0 0 0 2px var(--zari), 0 6px 10px rgba(61,10,10,.25);
}

/* kalash + diyas + hint */
#door .d-foot {
  position: relative; z-index: 2; flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
}
#door .d-kalash {
  width: clamp(70px, 20vw, 88px); margin-top: calc(clamp(70px, 20vw, 88px) * -1.05);
  filter: drop-shadow(0 6px 6px rgba(61,10,10,.3)); animation: d-rise .9s var(--ease-spring) .45s both;
}
#door .d-foot .hint { margin-top: 12px; font-size: 17px; }
#door .d-diya {
  position: absolute; top: -22px; width: 34px; height: 14px; border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #F3D58A, #C9952B 60%, #7A4A0C);
  box-shadow: 0 3px 4px rgba(61,10,10,.3);
}
#door .d-dl { left: calc(50% - 84px); }
#door .d-dr { right: calc(50% - 84px); }
#door .d-flame {
  position: absolute; left: 50%; bottom: 11px; width: 10px; height: 20px; margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff 0 18%, #FFE07A 35%, #F28C18 70%, rgba(232,89,12,0) 100%);
  box-shadow: 0 0 14px 6px rgba(255,190,70,.55);
  transform-origin: 50% 100%; animation: d-flick 1.3s ease-in-out infinite alternate;
}
#door .d-dr .d-flame { animation-delay: -.6s; }
@keyframes d-flick {
  0% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.92, 1.08) skewX(3deg); }
  70% { transform: scale(1.05, .94) skewX(-2deg); } 100% { transform: scale(.97, 1.04) skewX(1deg); }
}
/* the hint and family line step aside as the doors swing */
#door.is-open .d-foot .hint, #door.is-open .d-from { opacity: 0; transform: translateY(10px); transition: opacity .25s ease-out, transform .35s var(--ease-out); }

@media (max-height: 640px) {
  #door .d-arch { margin-top: 30px; width: 74%; }
  #door .d-foot .hint { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #door .d-leaf { transition: transform .5s ease; }
  #door .d-sway, #door .d-flame, #door .d-way::after { animation: none; }
  #door.is-open .d-foot .hint, #door.is-open .d-from { transform: none; }
}

/* ---- round 2: depth, light and ink ---- */
#door .d-par { position: absolute; top: 0; left: -3%; width: 106%; z-index: 3; pointer-events: none;
  translate: calc(var(--px, 0) * -16px) 0; transition: translate .5s var(--ease-out); }
#door .d-arch { translate: calc(var(--px, 0) * 6px) 0; transition: translate .5s var(--ease-out); }
#door .d-foot { translate: calc(var(--px, 0) * -9px) 0; transition: translate .5s var(--ease-out); }
#door .d-leaf { z-index: 1; }

/* guest greeting written in ink */
#door .d-guest { font: 18px var(--display); fill: var(--kumkum); }
#door .d-nib { fill: var(--kumkum); opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 2px rgba(165,16,42,.7)); }

#door .d-from { margin-top: 8px; font: 600 15px var(--ui); color: var(--peacock); letter-spacing: .01em; }
#door .d-from::before, #door .d-from::after { content: "🌼"; margin: 0 6px; font-size: 13px; }

/* light rays and dust pouring through the opening doors */
#door .d-rays {
  position: absolute; inset: -30% -60%; z-index: 0; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.7) 0 3deg, rgba(255,255,255,0) 3deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%);
  transition: opacity 1s ease .15s;
}
#door .d-way { overflow: hidden; }
#door.is-open .d-rays { opacity: 1; animation: d-spin 9s linear infinite; }
@keyframes d-spin { to { transform: rotate(360deg); } }
#door .d-dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#door .d-dust i { position: absolute; bottom: 10%; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff, rgba(255,233,168,0) 70%); }
#door.is-open .d-dust i { animation: d-mote 2.6s ease-out both; }
#door .d-dust i:nth-child(3n) { width: 7px; height: 7px; }
#door .d-dust i:nth-child(1) { left: 44%; --dx: -30px; animation-delay: .1s; } #door .d-dust i:nth-child(2) { left: 52%; --dx: 26px; animation-delay: .25s; }
#door .d-dust i:nth-child(3) { left: 48%; --dx: -12px; animation-delay: .4s; } #door .d-dust i:nth-child(4) { left: 40%; --dx: -48px; animation-delay: .2s; }
#door .d-dust i:nth-child(5) { left: 58%; --dx: 40px; animation-delay: .5s; } #door .d-dust i:nth-child(6) { left: 46%; --dx: 8px; animation-delay: .65s; }
#door .d-dust i:nth-child(7) { left: 54%; --dx: -20px; animation-delay: .35s; } #door .d-dust i:nth-child(8) { left: 36%; --dx: -60px; animation-delay: .7s; }
#door .d-dust i:nth-child(9) { left: 62%; --dx: 56px; animation-delay: .15s; } #door .d-dust i:nth-child(10) { left: 50%; --dx: 0px; animation-delay: .8s; }
#door .d-dust i:nth-child(11) { left: 42%; --dx: -36px; animation-delay: .9s; } #door .d-dust i:nth-child(12) { left: 56%; --dx: 30px; animation-delay: .55s; }
#door .d-dust i:nth-child(13) { left: 49%; --dx: -6px; animation-delay: 1s; } #door .d-dust i:nth-child(14) { left: 51%; --dx: 14px; animation-delay: .45s; }
@keyframes d-mote { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -320px); } }
/* bloom of light across the whole scene as the doors part */
#door .d-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,250,225,.95), rgba(255,233,168,.5) 35%, rgba(255,233,168,0) 70%);
  transition: opacity .9s ease .5s;
}
#door.is-open .d-stage::after { opacity: 1; }

/* gold-leaf sheen sweeping over the carved leaves */
#door .d-sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,190,.95) 48%, rgba(255,255,255,.6) 50%, transparent 63%) -150% 0 / 250% 100% no-repeat;
  animation: d-sheen 6s ease-in-out 1.2s infinite;
}
#door .d-r .d-sheen { animation-delay: 1.5s; }
@keyframes d-sheen { 0% { background-position: 150% 0; } 35%, 100% { background-position: -150% 0; } }
/* deeper carving shadows */
#door .d-frame { box-shadow: inset 0 0 0 2px var(--zari), inset 0 10px 18px rgba(61,10,10,.35); }
#door .d-way { box-shadow: inset 0 0 0 2px var(--zari), inset 0 0 26px rgba(61,10,10,.4); }
@media (prefers-reduced-motion: reduce) { #door .d-sheen, #door.is-open .d-rays { animation: none; } }

/* Shri Ganesh chapter */
#ganesh {
  isolation: isolate; overflow: hidden; gap: 6px; padding-top: 40px; padding-bottom: 28px; /* mantra added: keeps one phone screen */
  background:
    radial-gradient(circle at 50% 34%, #FFFFFF 0%, rgba(255,249,236,0) 46%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}

/* warm light that spreads from the diya */
#ganesh .g-glow {
  position: absolute; z-index: -1; left: 50%; top: 66%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.06);
  background: radial-gradient(circle, rgba(255,214,120,.75) 0%, rgba(246,195,67,.35) 22%, rgba(242,140,24,.12) 42%, rgba(242,140,24,0) 62%);
  transition: transform 2.6s var(--ease-out), opacity 1.2s ease;
}
#ganesh.g-lit .g-glow { opacity: 1; transform: none; }

/* invocation, set like a printed lagna-patrika between two zari flourishes */
#ganesh .g-patrika { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#ganesh .g-flourish { width: min(78%, 260px); height: auto; overflow: visible; opacity: .35; transition: opacity .3s .2s; }
#ganesh.g-lit .g-flourish { opacity: 1; }
#ganesh .g-flip { transform: scaleY(-1); }
#ganesh .g-flourish path[pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out) .2s; }
#ganesh .g-flourish > path, #ganesh .g-flourish > circle { opacity: 0; transition: opacity .6s ease .1s; }
#ganesh.g-lit .g-flourish path[pathLength] { stroke-dashoffset: 0; }
#ganesh.g-lit .g-flourish > path, #ganesh.g-lit .g-flourish > circle { opacity: 1; }
#ganesh .g-shloka { font-size: clamp(23px, 6.6vw, 30px); color: var(--kumkum); line-height: 1.4; }
#ganesh .g-shloka > span { display: block; }
#ganesh .g-shloka > span + span { color: #760E32; color: color-mix(in srgb, var(--rani-deep) 70%, var(--ink)); font-size: .9em; }
#ganesh .g-shloka .w { display: inline-block; }
#ganesh .g-shloka .w, #ganesh .g-sanvivi span {
  /* resting (not yet said): softened but still easy to read for elders; the gold glow marks the spoken word */
  opacity: .6; transform: translateY(6px) scale(.98); color: #734D49; color: color-mix(in srgb, var(--ink) 72%, var(--ivory));
  transition: opacity .9s ease var(--d), transform 1s var(--ease-out) var(--d), color 1s ease var(--d);
}
#ganesh .g-sanvivi span { display: inline-block; }
#ganesh.g-lit .g-shloka .w, #ganesh.g-lit .g-sanvivi span { opacity: 1; transform: none; color: inherit; }
/* invocation karaoke (on entering): the word being said glows gold, said words stay lit */
#ganesh .g-shloka .w.on, #ganesh .g-sanvivi span.on {
  opacity: 1; color: inherit; transform: translateY(-2px);
  text-shadow: 0 0 10px rgba(255,194,51,.95), 0 0 22px rgba(242,140,24,.5);
  transition: opacity .15s ease, color .15s ease, transform .3s var(--ease-spring), text-shadow .2s ease;
}
#ganesh .g-shloka .w.said, #ganesh .g-sanvivi span.said {
  opacity: 1; color: inherit; transform: none;
  transition: opacity .6s ease, color .6s ease, transform .5s var(--ease-out), text-shadow .8s ease;
}
#ganesh .g-sanvivi { font-size: 19px; line-height: 1.6; max-width: 20em; margin-top: 14px; } /* clear of the rangoli's rim */

/* वक्रतुण्ड mantra (straight after the invocation): rests faint, each word glows gold while chanted, then stays readable */
#ganesh .g-mantra { font-size: clamp(15px, 4.1vw, 17px); line-height: 1.4; color: var(--rani-deep); margin: 2px 0 0; }
#ganesh .g-ml { display: block; white-space: nowrap; }
#ganesh .g-ml > span {
  display: inline-block; opacity: .6; color: #734D49; color: color-mix(in srgb, var(--ink) 72%, var(--ivory));
  transition: opacity .5s ease, color .5s ease, text-shadow .8s ease, transform .5s var(--ease-out);
}
#ganesh .g-ml > span.on {
  opacity: 1; color: #9A5B00; transform: translateY(-2px);
  text-shadow: 0 0 10px rgba(255,194,51,.95), 0 0 22px rgba(242,140,24,.55);
  transition: opacity .15s ease, color .15s ease, text-shadow .2s ease, transform .3s var(--ease-spring);
}
#ganesh .g-ml > span.said { opacity: .92; color: var(--rani-deep); }

/* "🔊 थांबवा" pill while a voice clip plays: top-left corner, clear of the centred shloka */
#ganesh .g-hush {
  position: absolute; top: 8px; left: 8px; z-index: 3; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1 var(--ui); color: var(--kumkum);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: #FFFDF5; border: 0; box-shadow: var(--hairline), var(--sh-1);
  opacity: 0; transform: translateY(-6px) scale(.95); pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease-spring);
}
#ganesh.g-chanting .g-hush { opacity: 1; transform: none; pointer-events: auto; }
#ganesh .g-hush:active { transform: scale(.95); }

/* Ganesh with kalash and swastik */
#ganesh .g-deity { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin-top: 0;
  filter: saturate(.72) brightness(.97); transition: filter 1.6s ease; }
#ganesh.g-lit .g-deity { filter: none; }
#ganesh .g-ganesh { position: relative; width: clamp(132px, 37vw, 172px); }
#ganesh .g-ganesh img { /* feathered edges: no box edge from the cut-out, no leaf corners from the crop */
  position: relative; width: 100%; height: auto;
  clip-path: polygon(16% 0, 84% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
#ganesh .g-aura {
  position: absolute; left: 50%; top: 44%; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: .45; transition: opacity 1.6s ease;
  background: radial-gradient(circle, rgba(255,233,168,.95) 0%, rgba(246,195,67,.45) 28%, rgba(246,195,67,0) 58%);
}
#ganesh.g-lit .g-aura { opacity: 1; }
#ganesh .g-aura svg {
  width: 100%; height: 100%; opacity: .28; animation: g-spin 70s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%);
}
@keyframes g-spin { to { transform: rotate(360deg); } }
#ganesh .g-kalash, #ganesh .g-swastik { position: relative; height: auto; margin-bottom: 8px; }
#ganesh .g-kalash { width: clamp(62px, 18vw, 80px); }
#ganesh .g-swastik { width: clamp(58px, 16vw, 72px); margin-bottom: 24px; }

/* entrance once the door has opened */
#ganesh .g-ganesh, #ganesh .g-kalash, #ganesh .g-swastik, #ganesh .g-altar { opacity: 0; }
#ganesh.g-in .g-ganesh { animation: g-up 1.1s var(--ease-out) .1s both; }
#ganesh.g-in .g-kalash { animation: g-up 1s var(--ease-out) .45s both, g-float 4.5s ease-in-out 1.5s infinite; }
#ganesh.g-in .g-swastik { animation: g-up 1s var(--ease-out) .6s both, g-float 4.5s ease-in-out 2.4s infinite; }
#ganesh.g-in .g-altar { animation: g-up 1s var(--ease-out) .8s both; }
@keyframes g-up { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes g-float { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(-6px); } }

/* altar: rangoli on the floor + the diya */
/* the diya's box starts above the altar: its empty top is only the (unlit) flame's room, so it tucks under the deity */
#ganesh .g-altar { position: relative; width: 100%; height: 206px; margin-top: -6px; }
#ganesh .g-altar::before { /* warm pool of light under the rangoli once lit */
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 420px; height: 240px; margin-left: -210px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,214,120,.55), rgba(255,214,120,0) 65%); opacity: 0; transition: opacity 2s ease 1s;
}
#ganesh.g-lit .g-altar::before { opacity: 1; animation: g-pool 3.2s ease-in-out 3s infinite alternate; }
@keyframes g-pool { to { opacity: .55; } }
#ganesh .g-rangoli { /* centre stays under the diya (104px above the altar's foot) whatever the size */
  --rw: min(98vw, 420px); position: absolute; left: 50%; bottom: calc(104px - var(--rw) / 2); width: var(--rw); height: var(--rw); margin-left: calc(var(--rw) / -2);
  transform: scaleY(.56); overflow: visible; filter: drop-shadow(0 6px 4px rgba(61,10,10,.25));
}
#ganesh .g-geru { fill: #9C3B24; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.9);
  transition: opacity 1.2s ease, transform 1.4s var(--ease-out); }
#ganesh.g-bless .g-geru { opacity: 1; transform: none; }
#ganesh .g-geru2 { stroke: rgba(255,253,245,.22); stroke-width: 2; stroke-dasharray: 3 5; }
/* draw-in (.g-bless: the mantra has begun): --d/--t are mantra-clip seconds (set per item by ganesh.js), --k = 1/rate; the mantra's currentTime scrubs these */
#ganesh .g-rangoli path { stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0; }
#ganesh .g-rangoli .g-curl { stroke-width: 2.6; stroke-linecap: round; }
#ganesh .g-rangoli .g-thin { stroke-width: 1; }
#ganesh .g-rangoli .g-band { stroke-width: 8; stroke-linecap: round; }
#ganesh.g-bless .g-rangoli path { stroke-dashoffset: 0; fill-opacity: .97; stroke-opacity: 1; }
#ganesh.g-bless .g-rangoli path[pathLength] {
  animation: g-trace calc(var(--t) * var(--k)) ease calc(var(--d) * var(--k)) both, g-fill calc(var(--t) * var(--k)) ease calc((var(--d) + var(--t) * .6) * var(--k)) both;
}
@keyframes g-trace { from { stroke-dashoffset: 1; stroke-opacity: 0; } 3% { stroke-opacity: 1; } }
@keyframes g-fill { from { fill-opacity: 0; } }
#ganesh .g-dots circle { transform-box: fill-box; transform-origin: center; transform: scale(0); }
#ganesh.g-bless .g-dots circle { transform: none; /* ~150 dots: a few twinkles, then rest */
  animation: g-pop calc(var(--t) * var(--k)) var(--ease-spring) calc(var(--d) * var(--k)) both, g-twinkle 2.6s ease-in-out calc(var(--d) * var(--k) + 1.2s) 4; }
#ganesh.g-bless .g-dots circle:nth-child(3n) { animation-duration: calc(var(--t) * var(--k)), 3.4s; }
@keyframes g-pop { from { transform: scale(0); } }
@keyframes g-twinkle { 50% { opacity: .35; } }
/* rangoli-powder grain, and one soft glow as the border completes on "सर्वदा॥" */
#ganesh .g-grain { opacity: 0; pointer-events: none; transition: opacity 2s ease; }
#ganesh.g-bless .g-grain { opacity: .2; }
#ganesh .g-bloom { opacity: 0; pointer-events: none; }
#ganesh.g-bless .g-bloom { animation: g-bloom calc(var(--t) * var(--k)) ease-out calc(var(--d) * var(--k)) both; }
@keyframes g-bloom { 35% { opacity: .6; } }

#ganesh .g-diya {
  position: absolute; left: 50%; bottom: 92px; width: 132px; height: 142px; margin-left: -66px; padding: 0;
  border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  border-radius: 24px; transition: transform .25s var(--ease-spring);
}
#ganesh .g-diya:active { transform: scale(.95); }
/* unlit: it only breathes during the chant (no need to tap yet), then calls once the hint asks for it */
#ganesh:not(.g-lit) .g-diya { animation: g-soft 3.2s ease-in-out infinite; }
#ganesh.g-wait:not(.g-lit) .g-diya { animation: g-call 2.2s ease-in-out infinite; }
@keyframes g-soft { 0%, 50%, 100% { transform: none; } 75% { transform: scale(1.03); } }
@keyframes g-call { 0%, 60%, 100% { transform: none; } 70% { transform: scale(1.07); } 80% { transform: scale(1.07) rotate(-3deg); } 90% { transform: scale(1.04) rotate(3deg); } }
#ganesh .g-diyasvg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgba(61,10,10,.25)); }
#ganesh .g-flamebox { position: absolute; left: 44%; top: 4%; width: 14%; height: 34%; pointer-events: none; }

#ganesh .g-flame, #ganesh .g-halo { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); opacity: 0; }
#ganesh .g-halo { transform-origin: center; }
#ganesh.g-lit .g-flame { opacity: 1; animation: g-ignite .7s var(--ease-spring) both, g-flicker 1.5s ease-in-out .7s infinite alternate; }
#ganesh.g-lit .g-halo { opacity: 1; animation: g-ignite .9s var(--ease-out) both, g-breathe 2.2s ease-in-out .9s infinite alternate; }
#ganesh.g-lit .g-wick { stroke: #5A2A10; }
@keyframes g-ignite { from { transform: scale(0); } to { transform: none; } }
@keyframes g-flicker {
  0% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.06) skewX(2.5deg); }
  55% { transform: scale(1.04, .95) skewX(-2deg); } 80% { transform: scale(.97, 1.05) skewX(1deg); } 100% { transform: scale(1.02, .98) skewX(-1deg); }
}
@keyframes g-breathe { from { transform: scale(.9); } to { transform: scale(1.12); } }

#ganesh .hint { cursor: pointer; } /* tapping the hint lights the diya too */
/* the hint waits for the chant to end, so elders aren't asked to tap mid-मंगलाचरण (its room is kept: no jump) */
#ganesh:not(.g-wait) .hint { opacity: 0; pointer-events: none; }
#ganesh.g-wait .hint { animation: g-hintin .6s var(--ease-out) both; }
@keyframes g-hintin { from { opacity: 0; transform: translateY(8px); } }

/* wick glows as a finger approaches; lit flame leans away from it */
#ganesh .g-ember { opacity: calc(var(--near, 0) * .95); transition: opacity .2s; filter: blur(1.5px); }
#ganesh.g-lit .g-ember { opacity: 0; }
#ganesh .g-lean { transform-box: fill-box; transform-origin: 50% 100%; transform: skewX(var(--lean, 0deg)) scaleY(calc(1 - var(--near, 0) * .12)); transition: transform .35s var(--ease-out); }

/* help demo: a hand glides to the wick and taps it */
#ganesh .g-hand { position: absolute; left: calc(50% - 6px); top: 40px; font-size: 40px; line-height: 1; opacity: 0; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(61,10,10,.35)); }
#ganesh.g-demo .g-hand { animation: g-handgo 1.9s var(--ease-out) both; }
@keyframes g-handgo {
  0% { opacity: 0; transform: translate(90px, 120px) rotate(18deg); }
  20% { opacity: 1; }
  55% { transform: translate(0, 0) rotate(0); }
  64% { transform: translate(0, 6px) scale(.86); }
  74% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(30px, 60px); }
}

/* golden dust motes rising in the lamp light */
#ganesh .g-motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#ganesh .g-motes i { position: absolute; bottom: 22%; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF6C8, rgba(246,195,67,0) 70%); }
#ganesh.g-lit .g-motes i { animation: g-mote 7s linear infinite; }
#ganesh .g-motes i:nth-child(odd) { width: 8px; height: 8px; }
#ganesh .g-motes i:nth-child(1) { left: 8%; --dx: 10px; animation-delay: 0.00s; }
#ganesh .g-motes i:nth-child(2) { left: 16%; --dx: -13px; animation-delay: -0.58s; }
#ganesh .g-motes i:nth-child(3) { left: 23%; --dx: 16px; animation-delay: -1.16s; }
#ganesh .g-motes i:nth-child(4) { left: 30%; --dx: -19px; animation-delay: -1.74s; }
#ganesh .g-motes i:nth-child(5) { left: 38%; --dx: 22px; animation-delay: -2.32s; }
#ganesh .g-motes i:nth-child(6) { left: 46%; --dx: -25px; animation-delay: -2.90s; }
#ganesh .g-motes i:nth-child(7) { left: 53%; --dx: 28px; animation-delay: -3.48s; }
#ganesh .g-motes i:nth-child(8) { left: 60%; --dx: -31px; animation-delay: -4.06s; }
#ganesh .g-motes i:nth-child(9) { left: 68%; --dx: 34px; animation-delay: -4.64s; }
#ganesh .g-motes i:nth-child(10) { left: 76%; --dx: -37px; animation-delay: -5.22s; }
#ganesh .g-motes i:nth-child(11) { left: 83%; --dx: 40px; animation-delay: -5.80s; }
#ganesh .g-motes i:nth-child(12) { left: 90%; --dx: -43px; animation-delay: -6.38s; }
@keyframes g-mote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -42vh); } } /* fade out below the shloka */

@media (prefers-reduced-motion: reduce) {
  #ganesh .g-ganesh, #ganesh .g-kalash, #ganesh .g-swastik, #ganesh .g-altar { opacity: 1; }
  #ganesh .g-aura svg, #ganesh.g-bless .g-rangoli path[pathLength], #ganesh.g-bless .g-dots circle, #ganesh.g-bless .g-bloom { animation: none; } /* rangoli drawn at once */
  #ganesh .g-ml > span, #ganesh .g-ml > span.on, #ganesh .g-shloka .w.on, #ganesh .g-sanvivi span.on { transition: none; transform: none; text-shadow: none; }
}

/* Chapter: वधू-वर — the अंतरपाट moment. Everything scoped under #couple.
   Stage classes set by couple.js: cp-go (मंगलाष्टके begin) → cp-down (antarpat dropped on the 3rd सावधान)
   → cp-wed (हार exchanged) → cp-done (names unveiled; core's .revealed comes with it). */
#couple {
  justify-content: flex-start; padding-top: 60px; padding-bottom: 28px;
  background:
    radial-gradient(120% 50% at 50% 22%, rgba(246,195,67,.28), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(194,24,91,.08), transparent 70%);
}

/* ---------- stage (all positions are % of a 352 x 420 design) ---------- */
/* full-bleed on phones (a flex item wider than the column stays centred), capped on wide screens */
#couple .cp-stage { position: relative; width: min(calc(100% + 2 * var(--pad)), 440px); aspect-ratio: 352 / 420; overflow: hidden; flex: none; }
#couple .cp-stage > * { position: absolute; }
#couple .cp-toran { left: 0; top: 0; width: 100%; z-index: 7; transform-origin: 50% 0; }
#couple .cp-base { left: 0; bottom: 0; width: 100%; z-index: 3; }
#couple .cp-arch { left: 1.7%; top: 12.4%; width: 96.6%; height: 81%; z-index: 0; filter: drop-shadow(0 6px 10px rgba(61,10,10,.16)); }
#couple .cp-glow {
  left: 22%; top: 30%; width: 56%; height: 60%; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,241,191,.95), rgba(246,195,67,.5) 55%, transparent);
  opacity: 0; transform: scale(.4); transition: opacity 1s .3s, transform 1.4s var(--ease-out) .3s;
}

/* the couple: full figures from characters.js, three stacked poses each */
#couple .cp-fig { top: 23.8%; width: 34.1%; height: 71.43%; z-index: 4; transition: transform 1.5s var(--ease-out) .2s; }
#couple .cp-fig.g { left: 0; }
#couple .cp-fig.b { right: 0; }
#couple .pz { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
#couple .pz svg { display: block; width: 100%; height: 100%; }
#couple .pz0 { opacity: 1; }
#couple.cp-down .pz0 { opacity: 0; }
#couple.cp-down .pz1 { opacity: 1; }
#couple.cp-wed .pz1 { opacity: 0; }
#couple.cp-wed .pz2 { opacity: 1; }
/* after the drop they glide toward each other to exchange the हार */
#couple.cp-down .cp-fig.g { transform: translateX(52%); }
#couple.cp-down .cp-fig.b { transform: translateX(-52%); }
#couple.cp-down .cp-glow { opacity: 1; transform: scale(1); }
#couple.cp-down .cp-toran { animation: cp-swing 1.8s ease-out; }
@keyframes cp-swing { 25% { transform: rotate(.8deg) translateY(2px); } 55% { transform: rotate(-.5deg); } }

/* relatives' hands holding the top corners of the antarpat (sleeves fade in from behind the toran) */
#couple .cp-hold {
  top: -1%; left: 24.6%; width: 8%; z-index: 6; pointer-events: none;
  transition: transform .6s var(--ease-spring);
  -webkit-mask: linear-gradient(transparent 12%, #000 46%); mask: linear-gradient(transparent 12%, #000 46%);
}
#couple .cp-hold.r { left: auto; right: 24.6%; }
#couple .cp-hold svg { display: block; width: 100%; height: auto; }
#couple .cp-hold.r svg { transform: scaleX(-1); }

/* the antarpat itself: held between the couple from chest to shin; a big touch target; no page scroll while pulling it */
#couple .cp-ante {
  left: 28%; top: 37%; width: 44%; z-index: 5; padding: 0; border: 0; background: none;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none;
  transform-origin: 50% 0; transition: transform .6s var(--ease-spring);
  filter: drop-shadow(0 10px 14px rgba(61,10,10,.28));
}
#couple .cp-ante:active { cursor: grabbing; }
#couple .cp-ante:focus-visible { outline-offset: -6px; }
#couple .cp-ante svg { display: block; width: 100%; height: auto; transform-origin: 50% 0; animation: cp-idle 4.8s ease-in-out 1s infinite; }
#couple .cp-fringe { transform-box: fill-box; transform-origin: 50% 0; animation: cp-fringe 2.4s ease-in-out infinite; }
#couple .cp-tassel { transform-box: fill-box; transform-origin: 50% 0; animation: cp-fringe 2.4s ease-in-out .3s infinite; }
#couple .cp-halo { transform-box: fill-box; transform-origin: center; animation: cp-halo 1.6s ease-out infinite; }
#couple.cp-drag .cp-ante, #couple.cp-drag .cp-hold { transition: none; }
#couple.cp-drag .cp-ante svg, #couple.cp-go .cp-ante svg { animation-play-state: paused; }
#couple.cp-go .cp-ante, #couple.revealed .cp-ante { pointer-events: none; }
#couple.cp-go .cp-halo { display: none; }

/* breeze sway + a gentle "tug" every cycle so it's obvious the cloth moves */
@keyframes cp-idle {
  0%, 100% { transform: none; }
  22% { transform: rotate(.7deg); }
  44% { transform: rotate(-.5deg); }
  60% { transform: none; }
  68% { transform: translateY(11px) skewX(-1.5deg) scaleY(1.02); }
  76% { transform: translateY(-2px); }
  82% { transform: translateY(4px); }
  88% { transform: none; }
}
@keyframes cp-fringe { 50% { transform: skewX(6deg); } 0%, 100% { transform: skewX(-4deg); } }
@keyframes cp-halo { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

/* encouragement pill while pulling, "छान! 🌼" after the हार */
#couple .cp-cheer {
  left: 50%; bottom: 13%; z-index: 8; margin: 0; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font: 600 17px/1.3 var(--ui); color: #fff; background: var(--rani);
  box-shadow: inset 0 0 0 2px var(--zari-light), 0 8px 18px rgba(142,15,67,.35);
  opacity: 0; transform: translate(-50%, 10px) scale(.8); transition: opacity .25s, transform .4s var(--ease-spring); pointer-events: none;
}
#couple .cp-cheer.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#couple .cp-ghost { left: 50%; top: 52%; z-index: 9; margin-left: -18px; font-size: 36px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); pointer-events: none; }

/* ---------- cue: instruction, then the मंगलाष्टके words in the same spot ---------- */
#couple .cp-cue { display: grid; place-items: center; min-height: 92px; width: 100%; }
#couple .cp-cue > * { grid-area: 1 / 1; }
#couple .cp-ask { transition: opacity .4s; }
#couple .cp-ask .hint { margin-top: 10px; font-size: 18px; }
#couple .cp-or { font: 600 16px/1.3 var(--ui); color: var(--peacock-deep); margin-top: 4px; }
#couple.cp-go .cp-ask { opacity: 0; pointer-events: none; }

/* "शुभमंगल सावधान": the words land, then flash with each of the three calls (.hit, restarted by JS) */
/* wraps between the two words only if a large phone text size makes the line too wide */
#couple .cp-sav { font: 400 clamp(27px, 8.2vw, 38px)/1.15 var(--display); color: var(--kumkum); position: relative; padding: 22px 0 14px; max-width: 100%; text-wrap: balance; isolation: isolate; }
#couple .cp-w { white-space: nowrap; }
#couple .cp-ml { position: absolute; left: 0; right: 0; top: 0; font: 600 15px/1 var(--ui); color: var(--peacock-deep); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); }
#couple.cp-go .cp-ml { opacity: 1; transform: none; }
#couple .cp-w { display: inline-block; opacity: 0; filter: blur(6px); transform: scale(1.7) translateY(-12px); transition: opacity .4s, filter .5s, transform .7s var(--ease-spring); }
#couple .cp-sav svg { position: absolute; left: 6%; bottom: 0; width: 88%; height: 14px; fill: none; stroke: var(--zari); stroke-width: 2.4; stroke-linecap: round; }
#couple .cp-sav path { stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1s var(--ease-out); }
#couple.cp-go .cp-w { opacity: 1; filter: none; transform: none; transition-delay: .1s; }
#couple.cp-go .cp-w + .cp-w { transition-delay: .22s; }
#couple .cp-sav.hit { animation: cp-flash .75s ease-in-out; }
#couple.cp-down .cp-sav path { stroke-dashoffset: 0; transition-delay: .3s; }
@keyframes cp-flash { 40% { transform: scale(1.14); color: var(--rani); text-shadow: 0 0 16px rgba(246,195,67,.95), 0 0 3px #fff; } }

/* a gold sunburst flares behind the words with each call; diyas light on the third */
#couple .cp-sav::before {
  content: ""; position: absolute; inset: -30px -8px -30px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(246,195,67,.6) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
  opacity: 0; transform: scale(.4);
}
#couple .cp-sav.hit::before { animation: cp-rays .75s ease-in-out; }
#couple.cp-down .cp-sav::before { opacity: .35; transform: scale(1); transition: opacity .6s .6s; }
@keyframes cp-rays { 0% { opacity: 0; transform: scale(.5) rotate(0); } 40% { opacity: 1; transform: scale(1.1) rotate(20deg); } 100% { opacity: .2; transform: scale(.9) rotate(30deg); } }
#couple .cp-dv { display: inline-block; font-size: .55em; vertical-align: .25em; margin: 0 4px; opacity: 0; transform: scale(0); transition: opacity .4s, transform .6s var(--ease-spring); }
#couple.cp-down .cp-dv { opacity: 1; transform: none; }

/* ---------- names + family: veiled until the couple have exchanged हार ---------- */
#couple .cp-names { width: 100%; filter: blur(2.5px); opacity: .55; transform: scale(.97); transition: filter 1s, opacity 1s, transform 1.2s var(--ease-out); }
#couple.cp-done .cp-names { filter: none; opacity: 1; transform: none; }

#couple .cp-warm { font: 600 18px/1.4 var(--body); font-style: normal; color: var(--rani); margin-top: 4px; }
#couple .groom .cp-warm { color: var(--peacock-deep); }
#couple .cp-name { line-height: 1.1; margin: 6px 0 4px; }
#couple .cp-pre { font-size: var(--fs-h3); color: var(--rani-deep); }
#couple .groom .cp-pre { color: var(--peacock-deep); }
/* the names: core gold foil at the hero size; the sheen plays again as each name is unveiled */
#couple .cp-nm { display: inline-block; font-size: var(--fs-hero); }
#couple.cp-done .cp-nm { animation: cp-shine 2.6s var(--ease-out) .2s backwards; }
#couple.cp-done .groom .cp-nm { animation-delay: 1.2s; }
@keyframes cp-shine { from { background-position: 100% 0; } }

/* family lines on a full-bleed paithani ribbon with temple-border edges; it unrolls from the centre */
#couple .cp-rib {
  --c: var(--rani); --s: #FCE1EB;
  position: relative; margin: 6px calc(-1 * var(--pad)) 0; padding: 20px calc(var(--pad) + 6px) 21px;
  background: linear-gradient(100deg, var(--s), #FFF5F8 45%, var(--s));
  clip-path: inset(0 50%); transition: clip-path 1.1s var(--ease-out);
  text-wrap: pretty;
}
#couple .groom .cp-rib { --c: var(--peacock); --s: #D9EFEB; background: linear-gradient(100deg, var(--s), #F2FBF9 45%, var(--s)); }
#couple .cp-rib::before, #couple .cp-rib::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background:
    linear-gradient(var(--zari), var(--zari)) 0 9px / 100% 3px no-repeat,
    conic-gradient(from 135deg at 50% 0, var(--c) 90deg, transparent 0) 0 0 / 16px 9px repeat-x;
  transform: scaleY(-1);
}
#couple .cp-rib::after { top: auto; bottom: 0; transform: none; }
#couple.cp-done .cp-rib { clip-path: inset(0 0); transition-delay: .3s; }
#couple.cp-done .groom .cp-rib { transition-delay: 1.15s; }

#couple .cp-rib p { opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .8s var(--ease-out); }
#couple .cp-l1 { font-size: 17px; line-height: 1.62; color: var(--ink); }
#couple .cp-l2 { font-size: 18.5px; line-height: 1.6; margin-top: 8px; color: var(--rani-deep); }
#couple .groom .cp-l2 { color: var(--peacock-deep); }
#couple .cp-nw { white-space: nowrap; }
#couple .cp-tail { font-family: var(--display); font-size: 1.12em; color: var(--kumkum); white-space: nowrap; }
#couple.cp-done .cp-rib p { opacity: 1; transform: none; }
#couple.cp-done .bride .cp-l1 { transition-delay: .6s; }
#couple.cp-done .bride .cp-l2 { transition-delay: .8s; }
#couple.cp-done .groom .cp-l1 { transition-delay: 1.45s; }
#couple.cp-done .groom .cp-l2 { transition-delay: 1.65s; }

/* ornament joining the two families: zari threads + a मंगळसूत्र (black beads, two gold वाट्या) */
#couple .cp-knot { display: block; width: min(240px, 70%); margin: 16px auto 4px; overflow: visible; }
#couple .cp-knot .cp-ln { fill: none; stroke: var(--zari); stroke-width: 1.8; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1s var(--ease-out); }
#couple .cp-ms { transform-box: fill-box; transform-origin: 50% 0; transform: scale(0) translateY(-20px); opacity: 0; transition: transform .9s var(--ease-spring), opacity .4s; }
#couple.cp-done .cp-knot .cp-ln { stroke-dashoffset: 0; transition-delay: .9s; }
#couple.cp-done .cp-ms { transform: none; opacity: 1; transition-delay: 1s; }

/* core shows "next" on .revealed (at once for the help demo): wait until the names are out */
#couple .next { margin-top: 22px; }
#couple:not(.cp-done) .next { display: none; }

/* ---------- richness: gold-leaf gleam, silk shimmer, swaying toran pendants ---------- */
#couple .cp-gleam { animation: cp-gleam 6s ease-in-out infinite; }
#couple .cp-shim { animation: cp-gleam 4.2s ease-in-out 1.6s infinite; }
@keyframes cp-gleam { 0% { transform: translateX(0); } 35%, 100% { transform: translateX(560px); } }
#couple .cp-pend { transform-box: fill-box; transform-origin: 50% 0; animation: cp-mh 2.8s ease-in-out infinite; }
@keyframes cp-mh { 50% { transform: rotate(2.5deg); } 0%, 100% { transform: rotate(-2deg); } }

/* rangoli laid on the floor between the couple; slowly turning, blooms with each सावधान */
#couple .cp-rangoli { left: 30%; bottom: 3.5%; width: 40%; height: 15%; z-index: 2; perspective: 520px; pointer-events: none; }
#couple .cp-rangoli svg { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 100%; transform: rotateX(66deg); filter: drop-shadow(0 6px 6px rgba(165,16,42,.18)); }
#couple .cp-rg { transform-box: fill-box; transform-origin: center; animation: cp-turn 60s linear infinite; }
@keyframes cp-turn { to { transform: rotate(360deg); } }
#couple.cp-down .cp-rangoli svg { animation: cp-bloom 1.2s ease-in-out; }
@keyframes cp-bloom { 40% { transform: rotateX(66deg) scale(1.12); filter: drop-shadow(0 0 14px rgba(246,195,67,.9)); } }

/* before the reveal only a teaser of the names shows, as if seen through the woven antarpat (vertical threads),
   fading out below so the chapter (and core's gate) fits one screen */
#couple .cp-names {
  max-height: 170px; overflow: hidden;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, rgba(0,0,0,.35) 5px 8px), linear-gradient(#000 45%, transparent); -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(90deg, #000 0 5px, rgba(0,0,0,.35) 5px 8px), linear-gradient(#000 45%, transparent); mask-composite: intersect;
}
#couple.cp-done .cp-names { max-height: none; overflow: visible; -webkit-mask: none; mask: none; }

/* Chrome <104 ignores translate: centre the rangoli with auto margins instead (its transform is animated by cp-bloom) */
@supports not (translate: 0) {
  #couple .cp-rangoli svg { top: 0; bottom: 0; margin: auto 0; }
}

/* शुभ मुहूर्त — haldi-yellow silk page */
#muhurta {
  padding-top: 92px; padding-bottom: 88px; overflow: hidden; isolation: isolate;
  background:
    repeating-linear-gradient(45deg, rgba(201,149,43,.07) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg, rgba(194,24,91,.035) 0 1.5px, transparent 1.5px 9px),
    radial-gradient(110% 45% at 50% 0%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(242,140,24,.25), transparent 70%),
    radial-gradient(60% 40% at 100% 60%, rgba(194,24,91,.1), transparent 70%),
    linear-gradient(180deg, #FFF6D2 0%, #FDE7A4 55%, #F9D97F 100%);
}
/* the "next" nudge only appears once the muhurta is open (core gate keeps the page short until then) */
#muhurta:not(.revealed) .next { display: none; }

/* drifting marigold petals behind everything */
#muhurta .mh-float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#muhurta .mh-float i {
  position: absolute; top: -20px; width: 14px; height: 9px; border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #FFC107, #F57C00); opacity: .55;
  animation: mhFall 14s linear infinite;
}
#muhurta .mh-float i:nth-child(1) { left: 8%; animation-delay: -2s; }
#muhurta .mh-float i:nth-child(2) { left: 22%; animation-delay: -9s; animation-duration: 17s; background: linear-gradient(135deg, #F06292, #C2185B); }
#muhurta .mh-float i:nth-child(3) { left: 39%; animation-delay: -5s; animation-duration: 12s; }
#muhurta .mh-float i:nth-child(4) { left: 57%; animation-delay: -12s; }
#muhurta .mh-float i:nth-child(5) { left: 71%; animation-delay: -1s; animation-duration: 16s; background: linear-gradient(135deg, #F06292, #C2185B); }
#muhurta .mh-float i:nth-child(6) { left: 85%; animation-delay: -7s; animation-duration: 13s; }
#muhurta .mh-float i:nth-child(7) { left: 94%; animation-delay: -4s; animation-duration: 18s; }
@keyframes mhFall {
  from { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-24px, 520px) rotate(260deg); }
  to { transform: translate(10px, 1050px) rotate(540deg); }
}

/* lush marigold toran */
#muhurta .mh-toran { position: absolute; top: 10px; left: 0; right: 0; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(150,70,0,.25)); }
#muhurta .mh-toran svg { display: block; width: 100%; height: auto; overflow: visible; }
#muhurta .mh-sway { transform-box: fill-box; transform-origin: 50% 0; animation: mhSway 3.4s ease-in-out infinite alternate; }
@keyframes mhSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

#muhurta h2 { position: relative; z-index: 2; }
#muhurta .hint { position: relative; z-index: 2; }
/* progress lives inside the hint: a small second line of gold dots + "३ पैकी १ उघडले" */
#muhurta .mh-hint { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#muhurta .mh-prog { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--ui); color: var(--peacock-deep); }
#muhurta .mh-dots { display: flex; gap: 6px; }
#muhurta .mh-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(142,15,67,.16); box-shadow: inset 0 0 0 1px rgba(142,15,67,.28); }
#muhurta .mh-dots .dot.on { background: radial-gradient(circle at 35% 30%, #FFF4C9, #E2B34E 45%, #9C6B14); box-shadow: 0 0 6px rgba(226,179,78,.8); }

/* tiles: date medallion on top, वार + वेळ arches tucked beneath, all over a big rangoli */
#muhurta .mh-tiles {
  position: relative; isolation: isolate; width: 100%; max-width: 340px; margin-top: 70px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "d d" "v t";
  justify-items: center; column-gap: 12px;
}
#muhurta .mh-date { grid-area: d; }
#muhurta .mh-var { grid-area: v; margin-top: -14px; }
#muhurta .mh-time { grid-area: t; margin-top: -14px; }
#muhurta .mh-tile { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Sanskar Bharati rangoli behind the medallion (slow turn) */
#muhurta .mh-rangoli { position: absolute; left: 50%; top: 96px; width: 360px; height: 360px; margin: -180px 0 0 -180px; z-index: -1; pointer-events: none; }
#muhurta .mh-rangoli svg { width: 100%; height: 100%; animation: mhTurn 120s linear infinite; filter: drop-shadow(0 2px 2px rgba(160,90,0,.3)); }
@keyframes mhTurn { to { transform: rotate(360deg); } }

/* gold-leaf frame */
#muhurta .mh-frame {
  position: relative; overflow: hidden; padding: 6px;
  border-radius: 73px 73px 22px 22px;
  background: linear-gradient(135deg, #FFF1B8 0%, #E2B04A 30%, #B9852A 52%, #FFE9A8 72%, #B07A1E 100%);
  box-shadow: 0 0 0 2.5px var(--rani), 0 0 0 5px #fff, 0 16px 30px rgba(142,15,67,.3);
}
#muhurta .mh-date .mh-frame { border-radius: 50%; }

#muhurta .mh-shape {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  width: 134px; height: 148px; border-radius: 67px 67px 16px 16px;
  background:
    radial-gradient(circle, rgba(201,149,43,.16) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(circle at 50% 30%, #FFFFFF 0%, var(--ivory) 55%, var(--ivory-2) 100%);
  box-shadow: inset 0 2px 10px rgba(120,60,0,.25);
}
#muhurta .mh-date .mh-shape { width: 180px; height: 180px; border-radius: 50%; }

#muhurta .mh-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--kumkum); line-height: 1.1;
}
#muhurta .mh-face b { font: 400 30px/1.2 var(--display); }
/* numbers use the body face: it draws true Marathi digits */
#muhurta .mh-face .mh-big { font: 600 68px/1 var(--body); }
#muhurta .mh-face .mh-clock { font-size: 42px; margin-top: 2px; color: var(--rani-deep); }
#muhurta .mh-face .mh-sub { font: 500 19px/1.25 var(--body); color: var(--ink); }
#muhurta .mh-date .mh-face { padding-top: 4px; }
#muhurta .mh-date .mh-sub:last-child { color: var(--peacock); font-size: 22px; font-weight: 600; }
#muhurta .mh-day { padding-top: 12px; }

#muhurta canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
#muhurta .mh-open canvas { opacity: 0; transform: scale(1.18); pointer-events: none; }
#muhurta .mh-open .mh-face { animation: mhPop .8s var(--ease-spring) both; }
@keyframes mhPop { 0% { transform: scale(.82); opacity: .4; } 60% { transform: scale(1.07); opacity: 1; } 100% { transform: none; } }

/* label pill doubles as a progress bar while scratching */
#muhurta .mh-label {
  position: relative; z-index: 3; margin-top: -15px;
  font: 600 16px/1 var(--ui); color: #fff; padding: 8px 16px 7px; border-radius: 999px;
  background: linear-gradient(90deg, var(--marigold) calc(var(--p) * 100%), var(--rani) calc(var(--p) * 100%));
  box-shadow: inset 0 0 0 1.5px var(--zari-light), 0 4px 10px rgba(142,15,67,.3);
}
#muhurta .mh-tile { --p: 0; }
#muhurta .mh-open .mh-label { background: var(--peacock); }

#muhurta .mh-tip {
  position: absolute; left: 50%; bottom: 30px; z-index: 4; pointer-events: none; white-space: nowrap;
  font: 600 15px/1.2 var(--ui); color: var(--rani-deep); background: #fff; padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--marigold), 0 6px 14px rgba(142,15,67,.22);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s, transform .3s var(--ease-spring);
}
#muhurta .mh-busy:not(.mh-open) .mh-tip { opacity: 1; transform: translate(-50%, 0); }

/* help demo fingertip */
#muhurta .mh-finger {
  position: absolute; left: 0; top: 0; z-index: 5; margin: -6px 0 0 -14px; font-size: 34px; line-height: 1;
  pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
#muhurta .mh-finger.on { opacity: 1; }

/* tithi + countdown unfold only after the muhurta is open */
#muhurta .mh-details {
  width: 100%; display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .9s var(--ease-out), opacity .8s .2s;
}
#muhurta.mh-done .mh-details { grid-template-rows: 1fr; opacity: 1; }
#muhurta .mh-inner { overflow: hidden; min-height: 0; padding: 36px 18px 30px; margin: 0 -12px -22px; }

/* lagna-patrika panel: printed double rule, kumkum corners, swastik seal */
#muhurta .mh-patrika {
  position: relative; margin: 0 auto; max-width: 360px; padding: 26px 16px 14px;
  background:
    radial-gradient(circle at 10px 10px, var(--kumkum) 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--kumkum) 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--kumkum) 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--kumkum) 3px, transparent 3.5px),
    linear-gradient(180deg, #FFFDF5, var(--ivory));
  border: 2px solid var(--kumkum); border-radius: 4px;
  box-shadow: inset 0 0 0 4px #FFFDF5, inset 0 0 0 5px var(--zari), 0 8px 20px rgba(142,15,67,.16);
}
#muhurta .mh-swastik { position: absolute; left: 50%; top: -20px; width: 38px; height: 38px; margin-left: -19px; padding: 4px; background: #FFFDF5; border-radius: 50%; box-shadow: 0 0 0 2px var(--zari); }
/* reward: once all three tiles are clear the swastik draws itself on the seal, then its four dots appear */
#muhurta .mh-swastik path { stroke: var(--kumkum); stroke-width: 2.8; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out) .7s; }
#muhurta .mh-swastik path + path { transition-delay: 1s; }
#muhurta .mh-swastik circle { fill: var(--kumkum); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.5); transition: opacity .3s ease-out 1.9s, transform .4s var(--ease-spring) 1.9s; }
#muhurta.mh-done .mh-swastik path { stroke-dashoffset: 0; }
#muhurta.mh-done .mh-swastik circle { opacity: 1; transform: none; }
/* "॥ शुभ विवाह ॥": the subject of the मिती sentence, in gold foil that sheens as the panel unfolds */
#muhurta .mh-shubh { font: 400 24px/1.3 var(--display); margin-bottom: 4px; }
#muhurta.mh-done .mh-shubh { animation: foil-sheen 2.6s var(--ease-out) .9s backwards; }
#muhurta .mh-tithi { font: 19px/1.6 var(--body); color: var(--ink); text-wrap: balance; }
#muhurta .mh-tithi + .mh-tithi { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(201,149,43,.7); }
#muhurta .mh-em { color: var(--kumkum); font-weight: 600; }

#muhurta .mh-cd-title { margin: 18px 0 8px; font: 600 16px/1.3 var(--ui); color: var(--rani-deep); }
#muhurta .mh-cd {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0 auto; max-width: 340px; padding: 16px 10px 14px; border-radius: 16px;
  color: var(--ivory);
  background:
    radial-gradient(circle, var(--zari-light) 1.8px, transparent 2.3px) 0 4px / 12px 8px repeat-x,
    radial-gradient(circle, var(--zari-light) 1.8px, transparent 2.3px) 6px calc(100% - 4px) / 12px 8px repeat-x,
    linear-gradient(160deg, var(--peacock) 0%, var(--peacock-deep) 100%);
  box-shadow: inset 0 0 0 2px var(--zari), 0 10px 24px rgba(6,72,72,.3);
}
#muhurta .mh-cd i { font-style: normal; font-size: 15px; color: var(--zari-light); margin-bottom: 20px; }
#muhurta .mh-u { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
#muhurta .mh-n { display: grid; overflow: hidden; height: 46px; font: 600 34px/48px var(--body); }
#muhurta .mh-n span { grid-area: 1 / 1; }
#muhurta .mh-u small { font: 600 15px/1.2 var(--ui); color: var(--zari-light); }

#muhurta .mh-over { margin-top: 18px; font: 400 clamp(28px, 8vw, 34px)/1.3 var(--display); color: var(--kumkum); }

/* paithani border band along the bottom of the page */
#muhurta .mh-band { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; overflow: hidden; box-shadow: 0 -4px 12px rgba(142,15,67,.15); }
#muhurta .mh-band svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  #muhurta .mh-swastik path, #muhurta .mh-swastik circle { transition: none; }
}

/* Chapter: उखाणा — flip card with haldi-kunku karanda. Everything scoped under #ukhana. */
#ukhana {
  /* top-aligned (so nothing jumps when "पुढे चला" appears), with the ~664px task centred in the first screen */
  justify-content: flex-start; padding-top: max(48px, calc((100vh - 664px) / 2)); padding-top: max(48px, calc((100svh - 664px) / 2)); overflow: hidden;
  background:
    radial-gradient(70% 40% at 50% 40%, rgba(255,226,138,.45), transparent 70%),
    radial-gradient(60% 30% at 0% 100%, rgba(194,24,91,.10), transparent 70%),
    radial-gradient(60% 30% at 100% 0%, rgba(11,110,110,.10), transparent 70%),
    linear-gradient(180deg, #FFF4F8, var(--ivory) 40%, #FFF6E4);
}
#ukhana .uk-defs { position: absolute; width: 0; height: 0; }
#ukhana > * { position: relative; z-index: 1; }

#ukhana .uk-spin { transform-origin: 0 0; animation: uk-spin 60s linear infinite; }
@keyframes uk-spin { to { transform: rotate(360deg); } }

/* ---------- header (core h2 + .foil: one sheen when it appears) ---------- */
#ukhana .uk-sub { font: 600 18px/1.35 var(--ui); color: var(--rani-deep); }

/* ---------- bride / groom toggle ---------- */
#ukhana .uk-tog {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 300px); margin-top: 14px;
  padding: 5px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 2px var(--zari-light), 0 8px 20px rgba(142,15,67,.14);
}
#ukhana .uk-tog button {
  position: relative; z-index: 1; min-height: 48px; border: 0; background: none; cursor: pointer;
  font: 600 18px var(--ui); color: var(--ink); border-radius: 999px; touch-action: manipulation;
  transition: color .35s;
}
#ukhana .uk-tog button[aria-pressed="true"] { color: #fff; }
/* tell the guest the ukhane can be switched: a line above, and the other side gently beckons until tried once */
#ukhana .uk-tip { margin: 12px 0 -4px; font: 600 16px/1.35 var(--ui); color: var(--peacock-deep); }
#ukhana .uk-tog.uk-try button[aria-pressed="false"] { animation: uk-beckon 1.8s ease-in-out infinite; }
#ukhana .uk-tog.uk-try button[aria-pressed="false"]::after {
  content: ""; position: absolute; inset: 3px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--rani);
  animation: uk-beckon-ring 1.8s ease-out infinite; pointer-events: none;
}
@keyframes uk-beckon { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@keyframes uk-beckon-ring { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  #ukhana .uk-tog.uk-try button[aria-pressed="false"], #ukhana .uk-tog.uk-try button[aria-pressed="false"]::after { animation: none; }
  #ukhana .uk-tog.uk-try button[aria-pressed="false"]::after { opacity: 1; transform: none; }
}
#ukhana .uk-th {
  position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: linear-gradient(135deg, var(--rani), #E8457E); box-shadow: inset 0 0 0 2px var(--zari-light), 0 4px 12px rgba(194,24,91,.35);
  transition: transform .5s var(--ease-spring), background .4s;
}
#ukhana[data-side="g"] .uk-th { transform: translateX(100%); background: linear-gradient(135deg, var(--peacock), #17A2A2); box-shadow: inset 0 0 0 2px var(--zari-light), 0 4px 12px rgba(11,110,110,.35); }

/* ---------- the flip card ---------- */
#ukhana .uk-card { position: relative; width: min(100%, 360px); height: 410px; margin-top: 22px; perspective: 1300px; flex: none; }
#ukhana .uk-toran { position: absolute; z-index: 6; left: -5%; top: -16px; width: 110%; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(61,10,10,.22)); }
#ukhana .uk-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease-out); }
#ukhana .uk-inner.flip { transform: rotateY(180deg); }
#ukhana .uk-face {
  position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: var(--sh-2);
}
#ukhana .uk-face::after { /* gold-foil edge (as .foil-frame; a ring, because each face paints its own silk) */
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  padding: 2px; background: var(--foil);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

#ukhana .uk-front {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,246,214,.95), transparent 55%),
    radial-gradient(circle, rgba(194,24,91,.12) 1.6px, transparent 2.2px) 0 0 / 18px 18px,
    linear-gradient(165deg, #FFE3EE, #FFF3D6 55%, #FFDDB0);
}
#ukhana[data-side="g"] .uk-front {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,246,214,.95), transparent 55%),
    radial-gradient(circle, rgba(11,110,110,.13) 1.6px, transparent 2.2px) 0 0 / 18px 18px,
    linear-gradient(165deg, #D9F2EE, #FFF6DC 55%, #FFDDB0);
}
#ukhana .uk-face .uk-rg { position: absolute; width: 190px; pointer-events: none; }
#ukhana .uk-c1 { left: -95px; bottom: -95px; }
#ukhana .uk-c2 { right: -95px; bottom: -95px; }
#ukhana .uk-c3 { width: 300px !important; left: 50%; top: 50%; margin: -150px 0 0 -150px; opacity: .55; }

/* portrait medallion: sun rays + marigold ring */
#ukhana .uk-medal { position: absolute; left: 50%; top: 46px; width: 142px; height: 142px; transform: translateX(-50%); }
#ukhana .uk-rays {
  position: absolute; inset: -30px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(246,195,67,.7) 0 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent); mask: radial-gradient(closest-side, #000 45%, transparent);
  animation: uk-spin 26s linear infinite;
}
#ukhana .uk-ring { position: absolute; inset: -9px; width: calc(100% + 18px); filter: drop-shadow(0 3px 4px rgba(61,10,10,.25)); }
#ukhana .uk-por {
  position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 50%;
  object-fit: cover; object-position: 50% 12%;
  background: radial-gradient(circle at 50% 35%, #FFFBEF, #F8C6D8); box-shadow: inset 0 0 0 3px var(--zari);
}
#ukhana[data-side="g"] .uk-por { background: radial-gradient(circle at 50% 35%, #FFFBEF, #A8DCD3); }

/* the relatives' tease: "नाव घ्या!" */
#ukhana .uk-tease {
  position: absolute; left: 50%; top: 204px; transform: translateX(-50%); white-space: nowrap;
  font: 400 21px/1.2 var(--display); color: var(--kumkum); padding: 8px 16px 6px; border-radius: 14px;
  background: rgba(255,255,255,.92); box-shadow: 0 0 0 2px var(--rani), 0 6px 14px rgba(142,15,67,.18);
}
#ukhana .uk-tease::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; background: #fff;
  border-left: 2px solid var(--rani); border-top: 2px solid var(--rani); transform: rotate(45deg);
}

/* the karanda button */
#ukhana .uk-bowl {
  position: absolute; left: 50%; bottom: 14px; width: 220px; margin-left: -110px; padding: 0 0 8px; border: 0; background: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 12px rgba(61,10,10,.25));
}
#ukhana .uk-bowl::before { /* pulse ring inviting a tap */
  content: ""; position: absolute; left: 50%; top: 46%; width: 180px; height: 110px; margin: -55px 0 0 -90px; border-radius: 50%;
  border: 3px solid var(--marigold); animation: uk-pulse 1.8s ease-out infinite;
}
@keyframes uk-pulse { from { transform: scale(.75); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
#ukhana .uk-bowl svg { display: block; width: 100%; height: auto; }
#ukhana .uk-glow { opacity: .55; transform-box: fill-box; transform-origin: center; animation: uk-glow 2.2s ease-in-out infinite; }
@keyframes uk-glow { 50% { opacity: .95; transform: scale(1.08); } }
#ukhana .uk-bl {
  position: relative; display: inline-block; margin-top: -14px; padding: 9px 22px 7px; border-radius: 999px;
  font: 400 24px/1.1 var(--display); color: #fff; background: linear-gradient(135deg, var(--kumkum), var(--rani));
  box-shadow: inset 0 0 0 2px var(--zari-light), 0 6px 14px rgba(165,16,42,.35);
}
#ukhana .uk-bowl:active .uk-bl { transform: scale(.95); }

/* ---------- back: the ukhana itself ---------- */
#ukhana .uk-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 18px 26px;
  background:
    radial-gradient(circle at 50% 45%, #FFFDF6, transparent 70%),
    linear-gradient(170deg, #FFF0F5, #FFFBEF 50%, #FFF1D9);
}
#ukhana[data-side="g"] .uk-back { background: radial-gradient(circle at 50% 45%, #FFFDF6, transparent 70%), linear-gradient(170deg, #E6F5F2, #FFFBEF 50%, #FFF1D9); }
#ukhana .uk-back::before { /* paithani temple border along the bottom */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: linear-gradient(var(--zari), var(--zari)) 0 0 / 100% 3px no-repeat,
    conic-gradient(from 135deg at 50% 100%, var(--rani) 90deg, transparent 0) 0 3px / 18px 13px repeat-x, var(--peacock);
}
#ukhana[data-side="g"] .uk-back::before { background: linear-gradient(var(--zari), var(--zari)) 0 0 / 100% 3px no-repeat, conic-gradient(from 135deg at 50% 100%, var(--peacock) 90deg, transparent 0) 0 3px / 18px 13px repeat-x, var(--rani); }
#ukhana .uk-back > * { position: relative; }
/* speaker: portrait under a warm spotlight */
#ukhana .uk-spk { position: relative; width: 96px; height: 96px; flex: none; }
#ukhana .uk-spot {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,236,170,.95), rgba(255,214,120,.45) 55%, transparent);
  opacity: .45; transition: opacity .8s, transform 1.2s var(--ease-out);
}
#ukhana .uk-pic {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px var(--zari), 0 0 0 6px #fff, 0 0 0 8px var(--rani), 0 8px 18px rgba(142,15,67,.25);
  transition: transform .9s var(--ease-spring);
}
#ukhana[data-side="g"] .uk-pic { box-shadow: 0 0 0 3px var(--zari), 0 0 0 6px #fff, 0 0 0 8px var(--peacock), 0 8px 18px rgba(11,110,110,.25); }
#ukhana .uk-mini {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  background: radial-gradient(circle at 50% 35%, #FFFBEF, #F8C6D8); transform-origin: 50% 35%;
}
#ukhana[data-side="g"] .uk-mini { background: radial-gradient(circle at 50% 35%, #FFFBEF, #A8DCD3); }
#ukhana .uk-blush { /* लाजरी smile: pink cheeks */
  position: absolute; top: 55%; width: 24%; height: 14%; filter: blur(1.5px); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,60,120,.6), rgba(255,60,120,0)); transition: opacity 1s .2s;
}
#ukhana .uk-blush.l { left: 13%; }
#ukhana .uk-blush.r { left: 44%; }
#ukhana .uk-who { font: 600 18px/1.2 var(--ui); color: var(--rani-deep); margin: 12px 0 4px; }
#ukhana[data-side="g"] .uk-who { color: var(--peacock-deep); }
#ukhana .uk-emo { position: absolute; left: 50%; top: -6px; z-index: 2; font-size: 34px; line-height: 1; pointer-events: none; opacity: 0; }

/* cinema while the voice speaks: letterbox bars, vignette, brighter spotlight */
#ukhana .uk-vig, #ukhana .uk-bar { position: absolute !important; pointer-events: none; }
#ukhana .uk-vig { inset: 0; opacity: 0; transition: opacity .9s; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(110,14,50,.22)); }
#ukhana .uk-bar { left: 0; right: 0; height: 24px; z-index: 3; transform: scaleY(0); transition: transform .7s var(--ease-out);
  background: linear-gradient(var(--rani-deep), #5E0A2E); box-shadow: inset 0 -2px 0 var(--zari); }
#ukhana .uk-bar.t { top: 0; transform-origin: 50% 0; }
#ukhana .uk-bar.b { bottom: 0; transform-origin: 50% 100%; box-shadow: inset 0 2px 0 var(--zari); }
#ukhana.uk-cine .uk-vig { opacity: 1; }
#ukhana.uk-cine .uk-bar { transform: none; }
#ukhana.uk-cine .uk-spot { opacity: 1; transform: scale(1.12); }

/* karaoke: dim words light up in gold as they are spoken */
#ukhana .uk-lines { min-height: 140px; display: flex; flex-direction: column; justify-content: center; gap: 8px; user-select: text; }
#ukhana .uk-lines p { font: 400 clamp(20px, 5.7vw, 23px)/1.45 var(--display); color: var(--ink); text-wrap: balance; }
#ukhana .uk-lines span { display: inline-block; color: rgba(61,10,10,.22); transition: color .25s, text-shadow .4s, transform .35s var(--ease-spring), opacity .3s; }
#ukhana .uk-lines span.lit { color: #9A5B00; text-shadow: 0 0 12px rgba(246,195,67,.95), 0 0 2px rgba(255,236,170,.9); transform: translateY(-3px); }
#ukhana .uk-lines .uk-nm { padding: 0 .1em; border-radius: 6px; }
/* the spouse's name inks in gold foil (as .foil) */
#ukhana .uk-lines .uk-nm.lit {
  background: var(--foil-ink) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 6px rgba(246,195,67,.75));
}
/* no voice: the words type in instead (same timings) */
#ukhana .uk-type span { opacity: 0; transform: translateY(10px) scale(.85); }
#ukhana .uk-type span.lit { opacity: 1; transform: none; }

/* endings: bride's shy smile, groom's proud nod; the portrait breathes while speaking */
@media (prefers-reduced-motion: no-preference) {
  #ukhana.uk-speaking .uk-spk { animation: uk-breathe 3s ease-in-out infinite; }
  #ukhana.uk-speaking .uk-mini { animation: uk-kb 11s ease-out forwards; }
  #ukhana.uk-shy .uk-pic { transform: rotate(-8deg) translate(-3px, 2px); }
  #ukhana.uk-proud .uk-pic { animation: uk-nod 1s ease-in-out; }
}
@keyframes uk-breathe { 50% { transform: scale(1.04); } }
@keyframes uk-kb { from { transform: scale(1); } to { transform: scale(1.16) translateY(3%); } }
@keyframes uk-nod { 20%, 60% { transform: translateY(4px) rotate(2deg); } 40%, 80% { transform: translateY(-2px); } }
#ukhana.uk-shy .uk-blush { opacity: 1; }
#ukhana .uk-flour { width: 200px; height: 18px; margin-top: 12px; fill: none; stroke: var(--zari); stroke-width: 2.2; stroke-linecap: round; }
#ukhana .uk-dia { fill: var(--rani); stroke: var(--zari-light); stroke-width: 1.2; }
#ukhana .uk-meta { font: 600 17px var(--ui); color: var(--peacock-deep); margin-top: 6px; }

#ukhana .uk-toast {
  position: absolute; z-index: 7; left: 50%; bottom: -24px; transform: translate(-50%, 10px); width: max-content; max-width: 96%;
  font: 600 17px/1.3 var(--ui); color: #fff; background: var(--peacock-deep); padding: 10px 16px; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--zari-light), 0 10px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .4s var(--ease-spring);
}
#ukhana .uk-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- below the card: the actions (shown once the ukhana is taken) ---------- */
#ukhana .uk-cue { display: grid; place-items: center; width: 100%; min-height: 70px; margin-top: 18px; }
#ukhana .uk-cue > * { grid-area: 1 / 1; transition: opacity .4s, transform .5s var(--ease-spring); }
#ukhana .uk-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; opacity: 0; transform: translateY(10px) scale(.95); pointer-events: none; }
#ukhana.uk-on .uk-acts { opacity: 1; transform: none; pointer-events: auto; }
/* copy: a quiet text button under the two main actions */
#ukhana .uk-copy {
  flex-basis: 100%; min-height: 44px; border: 0; background: none; cursor: pointer; touch-action: manipulation;
  font: 600 17px var(--ui); color: var(--peacock-deep); text-decoration: underline; text-decoration-color: var(--zari); text-underline-offset: 4px;
}
#ukhana .uk-copy:active { transform: scale(.97); }

#ukhana .uk-ghost { position: absolute; z-index: 9; font-size: 40px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
#ukhana .next { margin-top: 14px; }
/* no reserved space for "पुढे चला" until the ukhana is done (it was leaving the screen half-empty) */
#ukhana:not(.revealed) .next { display: none; }
/* until then copy is the last thing on the page: keep it above the sound pod even when the help button lifts the pod */
#ukhana:not(.revealed) .uk-cue { margin-bottom: 28px; }

@media (prefers-reduced-motion: reduce) {
  #ukhana .uk-inner { transition: none; }
}

/* Chapter: मेहंदी — find the groom's name in the bride's mehendi. Scoped under #mehendi. */
#mehendi {
  --henna: #A0461A;          /* fresh stain */
  justify-content: flex-start; padding-top: max(28px, calc((100vh - 760px) / 2)); padding-top: max(28px, calc((100svh - 760px) / 2)); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 36% at 50% 58%, rgba(255,236,200,.85), transparent 72%),
    radial-gradient(60% 30% at 0% 100%, rgba(46,125,50,.10), transparent 70%),
    radial-gradient(60% 30% at 100% 0%, rgba(194,24,91,.08), transparent 70%),
    linear-gradient(180deg, #FFF6EA, var(--ivory) 45%, #FFF3E0);
}
#mehendi.mh-done { --henna: #7A2E0E; } /* the stain deepens once the name is found */
#mehendi > * { position: relative; z-index: 1; }

/* ---------- header ---------- */
#mehendi h2 { font-size: var(--fs-h2); }
#mehendi .mh-sub { font: 600 17px/1.3 var(--ui); color: var(--rani-deep); }
#mehendi .foil-rule { margin: 8px auto 0; }
#mehendi .hint { margin-top: 10px; max-width: 360px; text-align: center; line-height: 1.35; }
#mehendi .mh-hint { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#mehendi .mh-how { font: 500 15px/1.3 var(--ui); color: var(--peacock-deep); white-space: nowrap; }
#mehendi .mh-prog { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--ui); color: var(--rani-deep); }
#mehendi .mh-dots { display: flex; gap: 6px; }
#mehendi .mh-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(142,15,67,.16); box-shadow: inset 0 0 0 1px rgba(142,15,67,.28); }
#mehendi .mh-dots .dot.on { background: radial-gradient(circle at 35% 30%, #FFF4C9, #E2B34E 45%, #9C6B14); box-shadow: 0 0 6px rgba(226,179,78,.8); }

/* ---------- panel: fills the column, but never taller than the first screen leaves room for ---------- */
#mehendi .mh-panel {
  position: relative; width: min(100%, 420px, calc((100vh - 236px) * 13 / 18)); width: min(100%, 420px, calc((100svh - 236px) * 13 / 18)); min-width: min(100%, 300px);
  aspect-ratio: 390 / 540; flex: none; margin-top: 10px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
#mehendi .mh-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: linear-gradient(#000 94%, transparent); mask-image: linear-gradient(#000 94%, transparent); /* the forearms fade out */
}
#mehendi .mh-halo {
  position: absolute; inset: 4% -10% 10%; z-index: -1; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(246,195,67,.2) 0 6deg, transparent 6deg 15deg),
    radial-gradient(closest-side, rgba(255,241,191,.95), rgba(255,226,180,.45) 60%, transparent);
  mask: radial-gradient(closest-side, #000 55%, transparent); -webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
  animation: mh-spin 80s linear infinite;
}
@keyframes mh-spin { to { rotate: 360deg; } }

/* henna ink: one colour drives everything, so the "deepening" is a single transition */
#mehendi svg { color: var(--henna); transition: color 2.4s ease .3s; }
#mehendi .mh-name { font-family: var(--display); fill: currentColor; transform-box: fill-box; transform-origin: center; }
#mehendi .mh-name.on { animation: mh-pop .9s var(--ease-spring) both; }
#mehendi .mh-name.on.late { animation-duration: 1.4s; }
@keyframes mh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1.15); } }

/* the henna draws itself (~2s): outlines first, then fills and the jaal fade in */
#mehendi .mh-wait .s, #mehendi .mh-wait .t { stroke-dasharray: 1; stroke-dashoffset: 1; }
#mehendi .mh-wait .f, #mehendi .mh-wait text, #mehendi .mh-wait .jl { opacity: 0; }
#mehendi .mh-anim .s, #mehendi .mh-anim .t { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mh-draw 1.3s var(--ease-out) var(--d, 0s) forwards; }
#mehendi .mh-anim .f, #mehendi .mh-anim text { opacity: 0; animation: mh-fade .6s ease calc(var(--d, 0s) + .7s) forwards; }
#mehendi .mh-anim .jl { opacity: 0; animation: mh-jl 1s ease 1.2s forwards; }
@keyframes mh-jl { to { opacity: .55; } }
@keyframes mh-draw { to { stroke-dashoffset: 0; } }
@keyframes mh-fade { to { opacity: 1; } }

#mehendi .mh-cone {
  position: absolute; right: -3%; top: 1%; width: 30px; pointer-events: none; z-index: 3;
  transform: rotate(28deg); transform-origin: 50% 100%; filter: drop-shadow(0 4px 6px rgba(61,10,10,.25));
  transition: opacity .6s;
}
#mehendi .mh-cone svg { display: block; width: 100%; }
#mehendi.mh-drawing .mh-cone { animation: mh-cone 2.4s ease-in-out; }
@keyframes mh-cone {
  0% { translate: -250px 20px; rotate: 10deg; } 22% { translate: -150px 120px; } 44% { translate: -260px 260px; rotate: -6deg; }
  66% { translate: -70px 250px; } 84% { translate: -120px 380px; rotate: 8deg; } 100% { translate: 0 0; rotate: 0deg; }
}
#mehendi.mh-done .mh-cone { opacity: 0; }

/* ---------- feedback ---------- */
#mehendi .mh-rip { fill: none; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: mh-rip .9s var(--ease-out) forwards; }
#mehendi .mh-rip.cold { stroke: #29B6F6; }
#mehendi .mh-rip.warm { stroke: #FFA000; }
#mehendi .mh-rip.hot { stroke: #F4511E; stroke-width: 4; }
@keyframes mh-rip { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

#mehendi .mh-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; max-width: 92%; width: max-content; text-align: center;
  font: 600 16px/1.3 var(--ui); padding: 8px 14px; border-radius: 999px; color: #fff;
  translate: -50% 0; opacity: 0; scale: .9; transition: opacity .2s, scale .3s var(--ease-spring), translate .45s var(--ease-out);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 16px rgba(61,10,10,.22);
}
#mehendi .mh-tip.on { opacity: 1; scale: 1; translate: -50% -6px; }
#mehendi .mh-tip.cold { background: linear-gradient(135deg, #0277BD, #26A6C9); }
#mehendi .mh-tip.warm { background: linear-gradient(135deg, #E65100, #F59E0B); }
#mehendi .mh-tip.hot { background: linear-gradient(135deg, #BF360C, #E64A19); }
#mehendi .mh-tip.good { background: linear-gradient(135deg, var(--peacock-deep), var(--peacock)); box-shadow: inset 0 0 0 1px var(--zari-light), 0 6px 16px rgba(6,72,72,.3); }

#mehendi .mh-shim circle { fill: rgba(255,214,79,.3); stroke: #FFC93C; stroke-width: 2; stroke-dasharray: 4 5; transform-box: fill-box; transform-origin: center; animation: mh-shim 1.1s ease-in-out 3; }
#mehendi .mh-shim text { font-size: 16px; animation: mh-twinkle .5s ease-in-out 6 alternate; }
@keyframes mh-shim { 50% { transform: scale(1.15); opacity: .55; } }
@keyframes mh-twinkle { to { opacity: .2; } }

#mehendi .mh-mark circle { fill: none; stroke: #E2B54E; stroke-width: 2.2; stroke-dasharray: 5 4; transform-box: fill-box; transform-origin: center; animation: mh-turn 12s linear infinite; }
#mehendi .mh-mark text { font: 700 13px var(--ui); fill: #fff; paint-order: stroke; stroke: var(--leaf); stroke-width: 5px; }
@keyframes mh-turn { to { transform: rotate(360deg); } }

/* magnifier: gold rim, zari handle */
#mehendi .mh-lens {
  position: absolute; left: 0; top: 0; z-index: 4; width: 132px; height: 132px; border-radius: 50%; pointer-events: none;
  background: var(--ivory); overflow: visible; opacity: 0; scale: .6; transition: opacity .25s, scale .4s var(--ease-spring);
  box-shadow: 0 0 0 5px #E2B54E, 0 0 0 8px #8A5A10, 0 0 0 10px #FFF1BF, 0 14px 30px rgba(61,10,10,.35);
}
#mehendi .mh-lens.on { opacity: 1; scale: 1; }
#mehendi .mh-lens svg { width: 100%; height: 100%; border-radius: 50%; display: block; }
#mehendi .mh-lens::before { /* glass glint */
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 30%), radial-gradient(circle, transparent 62%, rgba(255,214,79,.22));
}
#mehendi .mh-lens::after {
  content: ""; position: absolute; width: 16px; height: 60px; left: 50%; top: 100%; margin-left: -8px; border-radius: 8px;
  background: linear-gradient(90deg, #6E420A, #E2B54E 40%, #FFF1BF 55%, #8A5A10); transform-origin: 50% -66px; rotate: -38deg; translate: 0 2px;
  box-shadow: inset 0 -14px 0 #A5102A;
}

/* ---------- finale ---------- */
#mehendi .mh-done-card { display: none; width: 100%; max-width: 380px; margin-top: 10px; padding: 14px 16px; }
#mehendi.mh-done .mh-done-card { display: block; animation: mh-card .6s var(--ease-out) 1.2s both; }
@keyframes mh-card { from { opacity: 0; transform: translateY(12px) scale(.97); } }
#mehendi .mh-done-card p { font-size: 17px; line-height: 1.45; color: var(--ink); }
#mehendi .mh-done-card .mh-big { font: 400 26px/1.3 var(--display); color: var(--rani); margin-bottom: 4px; }
#mehendi .mh-done-card b { color: var(--henna); transition: color 2s; }

@media (prefers-reduced-motion: reduce) {
  #mehendi .mh-halo, #mehendi.mh-drawing .mh-cone, #mehendi .mh-mark circle, #mehendi .mh-shim circle, #mehendi .mh-name.on { animation: none; }
  #mehendi .mh-rip { animation-name: mh-fade-out; }
  #mehendi .mh-done-card { animation: none !important; }
  @keyframes mh-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* Chrome <104 ignores translate/rotate/scale: same layout via transform (the lens keeps JS's inline transform, so it just fades) */
@supports not (translate: 0) {
  #mehendi .mh-tip { transform: translateX(-50%) scale(.9); transition: opacity .2s, transform .3s var(--ease-spring); }
  #mehendi .mh-tip.on { transform: translate(-50%, -6px); }
  #mehendi .mh-lens::after { transform: translateY(2px) rotate(-38deg); }
}

/* सस्नेह निमंत्रण — rani-pink silk page with an aarti thali */
#blessings {
  padding-top: 80px; padding-bottom: 72px; overflow: hidden; isolation: isolate;
  --lit: 0;
  --size: min(300px, 76vw);
  background:
    repeating-linear-gradient(45deg, rgba(194,24,91,.05) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg, rgba(201,149,43,.06) 0 1.5px, transparent 1.5px 9px),
    radial-gradient(70% 38% at 50% 42%, rgba(255,236,170,.55), transparent 70%),
    radial-gradient(60% 40% at 100% 0%, rgba(194,24,91,.14), transparent 70%),
    radial-gradient(50% 35% at 0% 100%, rgba(11,110,110,.08), transparent 70%),
    linear-gradient(180deg, #FFEAF1 0%, #FDD9E6 60%, #FBCADB 100%);
}
#blessings:not(.revealed) .next { display: none; }
#blessings h2 { position: relative; z-index: 2; }
#blessings .hint { position: relative; z-index: 2; }
/* progress lives inside the hint: a small second line of gold dots + "५ पैकी २" (same as शुभ मुहूर्त) */
#blessings .bl-hint { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#blessings .bl-prog { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--ui); color: var(--rani-deep); }
#blessings .bl-dots { display: flex; gap: 6px; }
#blessings .bl-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(142,15,67,.16); box-shadow: inset 0 0 0 1px rgba(142,15,67,.28); }
#blessings .bl-dots .dot.on { background: radial-gradient(circle at 35% 30%, #FFF4C9, #E2B34E 45%, #9C6B14); box-shadow: 0 0 6px rgba(226,179,78,.8); }

/* jhalar valance with marigold strands and brass bells */
#blessings .bl-jhalar { position: absolute; top: 10px; left: 0; right: 0; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(142,15,67,.22)); }
#blessings .bl-jhalar svg { display: block; width: 100%; height: auto; overflow: visible; }
#blessings .bl-sway { transform-box: fill-box; transform-origin: 50% 0; animation: blSway 3s ease-in-out infinite alternate; }
@keyframes blSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* the thali */
#blessings .bl-thali { position: relative; width: var(--size); height: var(--size); margin: 48px auto 44px; isolation: isolate; }
#blessings .bl-rangoli { position: absolute; inset: -18%; z-index: -1; pointer-events: none; }
#blessings .bl-rangoli svg { width: 100%; height: 100%; animation: blTurn 120s linear infinite; filter: drop-shadow(0 2px 2px rgba(142,15,67,.3)); }
@keyframes blTurn { to { transform: rotate(-360deg); } }
#blessings .bl-plate {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--zari), 0 0 0 5px #fff, 0 0 0 7px var(--rani), 0 20px 44px rgba(142,15,67,.32);
}
#blessings .bl-plate svg { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* center diya brightens with every symbol */
#blessings .bl-diya { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -54%); }
#blessings .bl-diya svg { width: 100%; height: 100%; overflow: visible; }
/* finale: one aarti circle round the thali. The diya steps out, circles once clockwise (staying upright), returns.
   Units are the diya's own viewBox (100 = 30% of the plate), so 66 ≈ a fifth of the plate out from the centre. */
#blessings .bl-orbit { transform-box: view-box; transform-origin: 50% 50%; }
#blessings.bl-done .bl-diya { z-index: 3; }
#blessings.bl-done .bl-orbit { animation: bl-aarti 3.2s cubic-bezier(.77,0,.175,1) 1 both; }
@keyframes bl-aarti {
  0% { transform: rotate(90deg) translateX(0) rotate(-90deg); }
  14% { transform: rotate(90deg) translateX(66px) rotate(-90deg); }
  86% { transform: rotate(450deg) translateX(66px) rotate(-450deg); }
  100% { transform: rotate(450deg) translateX(0) rotate(-450deg); }
}
@media (prefers-reduced-motion: reduce) { #blessings.bl-done .bl-orbit { animation: none; } }
#blessings .bl-halo {
  transform-box: fill-box; transform-origin: center;
  opacity: calc(.2 + var(--lit) * .8); transform: scale(calc(.55 + var(--lit) * .75));
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-spring);
}
#blessings .bl-flamebox { /* the flame grows with every symbol */
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scale(calc(.7 + var(--lit) * .6)); transition: transform .8s var(--ease-spring);
}
#blessings .bl-flame {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: blFlicker 1.6s ease-in-out infinite alternate;
}
@keyframes blFlicker { 0% { transform: scale(.94, 1) skewX(-2deg); } 50% { transform: scale(1.04, 1.08) skewX(2deg); } 100% { transform: scale(.98, .96) skewX(-1deg); } }

/* symbols placed around the rim */
#blessings .bl-sym {
  --r: calc(var(--size) * .355);
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -38%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
  display: flex; flex-direction: column; align-items: center;
  border: 0; padding: 0; background: none; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#blessings .bl-art {
  position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #FFFFFF 0%, var(--ivory) 55%, #F6DFB0 100%);
  box-shadow: 0 0 0 3px var(--zari), 0 0 0 5px #FFF8E8, 0 7px 16px rgba(90,30,0,.28);
  transition: box-shadow .5s, background .5s;
}
#blessings .bl-art > * { filter: saturate(.55); transition: filter .6s; }
#blessings .bl-art::after { /* "tap me" ring pulse on unlit symbols */
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--rani);
  animation: blRing 2.4s ease-out infinite; animation-delay: calc(var(--i) * .45s); opacity: 0;
}
@keyframes blRing { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
#blessings .bl-art .mehendi { width: 72px; height: auto; margin-top: 2px; }

/* bridal mehendi art (Invite.mehendi, also used by ashirwad): .mh-draw inks the henna in, line by line */
.mehendi { display: block; overflow: visible; }
.mehendi.mh-draw .mh-ln { stroke-dasharray: 1 1; animation: mhInk 1.7s cubic-bezier(.45, 0, .25, 1) .35s both; }
.mehendi.mh-draw .mh-2 { animation-delay: .75s; }
.mehendi.mh-draw .mh-3 { animation-delay: 1.15s; }
.mehendi.mh-draw .mh-fill { animation: mhFill 1.1s ease-out 1.25s both; }
@keyframes mhInk { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mhFill { from { opacity: 0; } }
#blessings .bl-sanai { width: 64px; height: auto; }

#blessings .bl-glow {
  position: absolute; left: 50%; top: 38px; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,120,.95) 0%, rgba(255,176,40,.45) 40%, transparent 68%);
  opacity: 0; transform: scale(.5); transition: opacity .5s, transform .6s var(--ease-spring); pointer-events: none;
}
#blessings .bl-cap {
  position: relative; margin-top: 7px; padding: 3px 10px 2px; border-radius: 999px; white-space: nowrap;
  font: 600 15px/1.3 var(--ui); color: var(--rani-deep); background: rgba(255,249,236,.94);
  box-shadow: 0 2px 6px rgba(142,15,67,.18); transition: background .4s, color .4s;
}

#blessings .lit .bl-glow { opacity: 1; transform: scale(1); animation: blGlow 2.6s ease-in-out .6s infinite alternate; }
@keyframes blGlow { to { opacity: .6; transform: scale(.88); } }
#blessings .lit .bl-art {
  background: radial-gradient(circle at 40% 32%, #FFFDF2 0%, #FFEDB0 60%, #F6C343 100%);
  box-shadow: 0 0 0 3px var(--marigold), 0 0 0 5px #FFF8E8, 0 0 22px rgba(255,170,40,.75);
}
#blessings .lit .bl-art > * { filter: none; }
#blessings .lit .bl-art::after { animation: none; }
#blessings .lit .bl-cap { background: var(--rani); color: #fff; }
#blessings .lit .bl-notes { animation: blNotes 1.8s ease-in-out infinite alternate; }
@keyframes blNotes { to { transform: translateY(-3px); } }

/* the sentence: faint until each phrase is written in */
#blessings .bl-vakya {
  font: 18px/1.6 var(--body); color: rgba(61,10,10,.58); max-width: 400px; text-wrap: pretty;
  transition: color 1s .2s;
}
#blessings .bl-ph {
  background: linear-gradient(90deg, var(--rani-deep) 0 40%, rgba(61,10,10,.58) 44% 100%) 100% 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.2s var(--ease-out);
  padding: .45em 0; /* vertical padding (no layout effect) so the text-clip covers matras above/below the line box */
}
#blessings .bl-ph.on { background-position: 0 0; }
#blessings .bl-tail { background-image: linear-gradient(90deg, var(--ink) 0 40%, rgba(61,10,10,.58) 44% 100%); transition-duration: 1.8s; }
#blessings.bl-done .bl-vakya { color: var(--ink); animation: blSettle 1.2s var(--ease-out); }
#blessings.bl-done .bl-tail { background-position: 0 0; }
@keyframes blSettle { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: none; } }
/* read-aloud karaoke: the word being spoken glows gold */
#blessings .bl-w { transition: color .5s, text-shadow .5s; }
#blessings .bl-w.say { color: #A86B00; text-shadow: 0 0 12px rgba(255,193,7,.9), 0 0 3px rgba(255,236,170,.95); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) { #blessings .bl-w, #blessings .bl-w.say { transition: none; text-shadow: none; } }

#blessings .bl-fly {
  position: fixed; z-index: 70; pointer-events: none; white-space: nowrap;
  font: 19px/1.3 var(--body); color: var(--kumkum);
  background: rgba(255,249,236,.92); padding: 2px 10px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(142,15,67,.25);
}

/* "॥ शुभ विवाह ॥" unfolds only at the finale (keeps the task inside the first screen) */
#blessings .bl-end { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s var(--ease-out) .6s; }
#blessings .bl-end > div { overflow: hidden; min-height: 0; }
#blessings.bl-done .bl-end { grid-template-rows: 1fr; }
#blessings .bl-shubh {
  margin-top: 14px; font: 400 var(--fs-hero)/1.2 var(--display); /* colour: .foil */
  opacity: 0; transform: scale(.6) translateY(10px);
  transition: opacity .7s var(--ease-out) 1s, transform .9s var(--ease-spring) 1s;
}
#blessings.bl-done .bl-shubh { opacity: 1; transform: none; animation: foil-sheen 2.6s var(--ease-out) 1.3s backwards; } /* the foil sheens as it unfolds */

#blessings .bl-band { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; overflow: hidden; box-shadow: 0 -4px 12px rgba(142,15,67,.15); }

/* help demo fingertip */
#blessings .bl-finger {
  position: absolute; left: 0; top: 0; z-index: 5; margin: -4px 0 0 -12px; font-size: 34px; line-height: 1;
  pointer-events: none; opacity: 0; transition: opacity .3s, transform .6s var(--ease-out); filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
#blessings .bl-finger.on { opacity: 1; }
#blessings .bl-band svg { display: block; }

/* very narrow screens / large phone text (130% zoom ≈ 300px wide): smaller symbols on a wider thali so labels never sit under a neighbour */
@media (max-width: 340px) {
  #blessings { --size: min(300px, 86vw); }
  #blessings .bl-art { width: 60px; height: 60px; }
  #blessings .bl-art > * { transform: scale(.8); }
  #blessings .bl-glow { top: 30px; }
}

/* कार्यक्रम – swipeable deck of event cards */
#events {
  background:
    radial-gradient(circle at 12% 8%, rgba(246,195,67,.35), transparent 38%),
    radial-gradient(circle at 92% 92%, rgba(194,24,91,.14), transparent 42%),
    repeating-linear-gradient(45deg, rgba(201,149,43,.07) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #FFF4DE 0%, #FFE6C4 100%);
  overflow: hidden;
}
/* keep the whole deck + big button on one phone screen; "पुढे चला" takes its space only once done */
#events:not(.revealed) .next { display: none; }
#events .ev-flourish { width: 160px; height: 14px; margin-top: 6px; }

#events .ev-deck {
  position: relative; width: min(100%, 340px); height: 456px;
  margin: 14px auto 28px; touch-action: pan-y; outline-offset: 10px;
}
#events .ev-card {
  position: absolute; inset: 0; border-radius: var(--r-lg); padding: 14px 18px 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--c-ink); background: var(--c-bg);
  box-shadow: var(--sh-2), inset 0 0 0 1.5px rgba(255,255,255,.55);
  transition: transform .45s var(--ease-out);
  will-change: transform; user-select: none; -webkit-user-select: none; cursor: grab; overflow: hidden;
  transform-origin: 50% 80%;
}
/* inner double border like a printed card */
#events .ev-card::before {
  content: ""; position: absolute; inset: 8px; border-radius: calc(var(--r-lg) - 6px); pointer-events: none;
  border: 1.5px solid var(--c-line); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4.5px var(--c-line); opacity: .55;
}
#events .ev-card.dragging { transition: none; cursor: grabbing; }
/* gold-leaf sheen sweeping the top card */
#events .ev-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 35%, rgba(255,250,230,.95) 48%, rgba(255,220,130,.7) 52%, transparent 65%) 220% 0 / 260% 100% no-repeat;
}
#events .ev-card.top::after { animation: ev-sheen 4.2s 1.2s ease-in-out infinite; }
@keyframes ev-sheen { 0% { background-position: 220% 0; } 55%, 100% { background-position: -140% 0; } }
#events .ev-card:not(.top) > * { opacity: .55; transition: opacity .4s; }
#events .ev-card > * { position: relative; }

/* deal-in when the chapter first appears */
#events:not(.dealt) .ev-card { transform: translateY(60px) scale(.9) !important; opacity: 0; }
#events.dealt .ev-card { animation: ev-deal .7s var(--ease-out) backwards; }
#events.dealt .ev-card[data-i="1"] { animation-delay: .08s; }
#events.dealt .ev-card[data-i="2"] { animation-delay: .16s; }
#events.dealt .ev-card[data-i="3"] { animation-delay: .24s; }
@keyframes ev-deal { from { opacity: 0; translate: 0 80px; } }

#events .ev-motif { height: 84px; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: -6px; }
/* count + name + facts sit as one group, centred between the motif and the calendar button */
/* line drawing under the motif (events.js ILLO), in the card's accent colour */
#events .ev-illo { flex: 1 1 0; min-height: 76px; max-height: 128px; width: 100%; margin-top: 4px; color: var(--c-accent); opacity: .9; } /* grows into the free space */
#events .ev-vivah .ev-illo { opacity: 1; }
#events .ev-count { font: 600 var(--fs-meta)/1 var(--ui); color: var(--c-accent); padding-top: 6px; }
#events .ev-name { font: 400 44px/1.15 var(--display); margin: 8px 0 0; /* clear of the count for tall-matra fonts (Gotu) */ color: var(--c-head); }
#events .ev-name.foil { color: transparent; } /* gold-foil title on the red शुभ विवाह card */
#events .ev-facts { display: flex; align-items: center; gap: 14px; margin-top: 8px; text-align: left; }
#events .ev-date {
  display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 5px 8px 6px; border-radius: var(--r-md);
  background: var(--c-pill); color: var(--c-pill-ink); line-height: 1.1;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), var(--sh-1);
}
#events .ev-date b { font: 400 32px/1.05 var(--body); }
#events .ev-date small { font: 600 var(--fs-meta)/1.2 var(--ui); opacity: .92; }
#events .ev-tp { display: flex; flex-direction: column; gap: 2px; }
#events .ev-tp b { font: 400 30px/1.1 var(--body); color: var(--c-head); white-space: nowrap; }
#events .ev-tp b small { display: block; font: 600 17px/1.2 var(--ui); color: var(--c-accent); } /* सकाळी / संध्याकाळी / दुपारी */
#events .ev-tp span { font: 600 17px/1.2 var(--ui); color: var(--c-accent); display: inline-flex; align-items: center; gap: 4px; }
#events .ev-where { font: 17px/1.4 var(--body); margin-top: 6px; }
#events .ev-mandav .ev-where { text-shadow: 0 0 4px #E2F2CC, 0 0 10px #E2F2CC; } /* stays readable where the banana leaves pass behind */
#events .ev-where b { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--c-head); }

/* calendar: one plain-language button (Android: Google Calendar link; iPhone/desktop: .ics) */
#events .ev-cal { margin-top: auto; padding-bottom: 6px; display: flex; flex-direction: column; align-items: center; }
#events .ev-ics, #events .ev-gcal {
  min-height: 48px; padding: 10px 20px; border-radius: var(--r-pill); border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-ui)/1 var(--ui);
  color: var(--c-btn-ink); background: var(--c-btn);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), var(--sh-1);
  transition: transform .2s var(--ease-spring), background .3s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#events .ev-ics:active, #events .ev-gcal:active { transform: scale(.95); }
#events .ev-ics.done { background: var(--peacock); color: #fff; text-decoration: none; }
.after-wedding #events .ev-cal { display: none; }

/* ---- card themes ---- */
#events .ev-mandav { --c-bg: linear-gradient(170deg, #F6FBE8 0%, #DDF0C2 55%, #BFE09A 100%); --c-ink: #1E3F1F; --c-head: #1F5A22; --c-accent: #2E7D32; --c-line: #5E9E3A; --c-pill: #2E7D32; --c-pill-ink: #FFF9EC; --c-btn: #1F5A22; --c-btn-ink: #FFF9EC; }
#events .ev-haldi  { --c-bg: linear-gradient(170deg, #FFFBE3 0%, #FFE893 55%, #F6C343 100%); --c-ink: #4A2A00; --c-head: #8A4B00; --c-accent: #9A5200; --c-line: #C9952B; --c-pill: #B05A00; --c-pill-ink: #FFF9EC; --c-btn: #8A4B00; --c-btn-ink: #FFF6D0; }
#events .ev-sangeet{ --c-bg: linear-gradient(170deg, #FFF1F8 0%, #F9D3EA 50%, #E3C3F2 100%); --c-ink: #3E0B3B; --c-head: #8E0F6A; --c-accent: #8E24AA; --c-line: #B4529E; --c-pill: linear-gradient(90deg, #C2185B, #8E24AA); --c-pill-ink: #fff; --c-btn: #6A1B7A; --c-btn-ink: #FFF1F8; }
#events .ev-vivah  { --c-bg: radial-gradient(circle at 50% 18%, #C8243F 0%, #A5102A 45%, #6E0A20 100%); --c-ink: #FFF3D6; --c-head: #F3D58A; --c-accent: #F3D58A; --c-line: #F3D58A; --c-pill: linear-gradient(180deg, #F7DF9E, #C9952B); --c-pill-ink: #5A0717; --c-btn: linear-gradient(180deg, #F7DF9E, #C9952B); --c-btn-ink: #5A0717; }

/* ---- motifs ---- */
#events .ev-mandav .ev-motif svg { width: 108%; height: 100%; margin: -12px -4% 0; }
#events .ev-leaf { transform-box: fill-box; transform-origin: 50% 0; animation: ev-sway 3.2s ease-in-out infinite alternate; }
@keyframes ev-sway { from { rotate: -5deg; } to { rotate: 5deg; } }

#events .ev-haldi .ev-motif { gap: 0; }
#events .ev-bowl { width: 150px; height: 88px; }
#events .ev-flower {
  height: 72px; width: auto; animation: ev-spin 9s linear infinite;
  /* the source art is cropped at its edges: feather it so no hard cut shows */
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent);
}
#events .ev-flower.r { transform: scaleX(-1); animation-direction: reverse; }
#events .ev-drop { animation: ev-bob 1.8s ease-in-out infinite; }
@keyframes ev-bob { 50% { transform: translateY(-6px); } }
@keyframes ev-spin { 50% { rotate: 8deg; } }

#events .ev-music { width: 100%; height: 100%; }
#events .ev-note { animation: ev-float 3.4s ease-in-out infinite; }
@keyframes ev-float { 0%, 100% { translate: 0 6px; opacity: .55; } 50% { translate: 0 -8px; opacity: 1; } }
#events .ev-dholki { animation: ev-beat .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ev-beat { 50% { scale: 1.04; } }

#events .ev-vivah .ev-motif { position: relative; height: 70px; }
#events .ev-rays { position: absolute; width: 150px; height: 150px; left: 50%; top: 50%; margin: -75px 0 0 -75px; animation: ev-rot 24s linear infinite; }
@keyframes ev-rot { to { rotate: 360deg; } }
#events .ev-antar { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
#events .ev-cloth { animation: ev-wave 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes ev-wave { from { transform: skewY(-1deg); } to { transform: skewY(1deg); } }

/* banana leaves framing the मांडव card */
#events .ev-banana { position: absolute; bottom: -28px; width: 52px; height: 166px; pointer-events: none; transform-origin: 50% 100%; }
#events .ev-banana.l { left: 6px; rotate: 9deg; }
#events .ev-banana.r { right: 6px; rotate: -9deg; }

/* ---- what to do: one plain sentence, how to do it, and the four steps ---- */
#events .ev-ask { font: 600 19px/1.3 var(--ui); color: var(--rani-deep); margin-top: 8px; text-wrap: balance; }
#events .ev-ask b { font-weight: 700; color: var(--kumkum); }
#events .ev-how { font: 500 15px/1.35 var(--ui); color: rgba(61,10,10,.82); margin-top: 2px; text-wrap: balance; }
#events .ev-steps {
  display: flex; align-items: center; gap: 2px; width: min(100%, 360px); margin-top: 10px; padding: 3px; border-radius: var(--r-pill);
  background: rgba(255,252,244,.85); box-shadow: inset 0 0 0 1px rgba(201,149,43,.55), var(--sh-1);
}
#events .ev-steps button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 3px; border: 0; border-radius: var(--r-pill); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; cursor: pointer;
  font: 600 15px/1 var(--ui); color: rgba(61,10,10,.6); /* not yet seen: muted */
  transition: background-color .3s var(--ease-out), color .3s, transform .16s var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#events .ev-steps button:active { transform: scale(.95); }
#events .ev-steps i { display: none; font: 700 12px/1 var(--ui); font-style: normal; }
#events .ev-steps .seen { color: var(--ink); }
#events .ev-steps .seen i { display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--zari); } /* seen: a zari ✓ */
#events .ev-steps [aria-current="true"] { color: #fff; background: linear-gradient(180deg, #D63A7F, var(--rani) 60%, var(--rani-deep)); box-shadow: 0 4px 10px -4px rgba(142,15,67,.7); }
#events .ev-steps [aria-current="true"] i { color: var(--rani-deep); background: var(--zari-light); }
#events .ev-tally { flex: none; padding: 0 8px 0 5px; font: 700 16px/1 var(--ui); color: var(--peacock-deep); white-space: nowrap; }

/* the 👆 that slides over the top card during the first-time nudge (events.js) */
#events .ev-hand { position: absolute; z-index: 30; right: 16%; top: 44%; font-size: 46px; line-height: 1; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 6px rgba(61,10,10,.35)); }

/* ---- controls: a small back arrow + one big "next" button ---- */
#events .ev-ctrl { display: flex; align-items: center; gap: 10px; width: min(100%, 340px); }
#events .ev-nav {
  flex: none; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 0; background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--zari), var(--sh-1);
  color: var(--kumkum); display: grid; place-items: center; cursor: pointer;
  transition: transform .16s var(--ease-out), background .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#events .ev-nav svg { width: 24px; height: 24px; }
#events .ev-nav:active { transform: scale(.94); background: var(--ivory-2); }
#events .ev-go { flex: 1; min-height: 56px; padding: 12px 18px; font-size: 19px; }
#events .ev-go:not(.alt) { background: linear-gradient(180deg, #D63A7F 0%, var(--rani) 55%, var(--rani-deep) 100%); }
#events .ev-go i { font-style: normal; display: inline-block; animation: ev-point 1.6s ease-in-out infinite; } /* the arrow leans the way the cards go */
@keyframes ev-point { 50% { transform: translateX(4px); } }
#events .ev-go.alt { cursor: default; }
#events .ev-go.alt i { display: none; }
#events .ev-go.alt:active { transform: none; }

/* phones: keep the big button on the first screen, clear of the sound pod (bottom-right) */
@media (max-height: 900px) {
  #events { padding-top: 14px; justify-content: flex-start; }
  #events .ev-ask { margin-top: 4px; }
  #events .ev-steps { margin-top: 8px; }
  #events .ev-deck { height: clamp(350px, calc(100vh - 367px), 456px); height: clamp(350px, calc(100svh - 367px), 456px); margin: 8px auto 16px; }
  #events .next { margin-top: 10px; } /* "पुढे चला" stays clear of the sound pod at the natural stop */
}
@media (max-height: 800px) {
  #events .ev-flourish { display: none; }
  #events .ev-motif { height: 64px; }
  /* short phones: the deck gets shorter, so the line drawing gives way first; the calendar button must never be clipped */
  #events .ev-illo { min-height: 0; }
  #events .ev-name { font-size: 40px; }
  #events .ev-vivah .ev-motif { height: 60px; }
}
@media (max-height: 700px) { #events .ev-illo { display: none; } }
@media (max-width: 360px) {
  #events .ev-name { font-size: 40px; }
  #events .ev-vivah .ev-motif { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  #events .ev-card.top::after, #events .ev-leaf, #events .ev-note, #events .ev-drop, #events .ev-flower, #events .ev-dholki, #events .ev-cloth, #events .ev-rays, #events .ev-go i { animation: none; }
}

/* Chrome <104 ignores rotate: keep the banana leaves leaning outward */
@supports not (translate: 0) {
  #events .ev-banana.l { transform: rotate(9deg); }
  #events .ev-banana.r { transform: rotate(-9deg); }
}

/* Chapter: ✦ खास लग्नाचा सेल्फी — optional festive selfie frame (last section). Scoped under #photobooth. */
#photobooth {
  justify-content: flex-start; padding-top: 34px; gap: 8px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 40% at 50% 42%, rgba(255,214,120,.45), transparent 70%),
    repeating-linear-gradient(135deg, rgba(194,24,91,.05) 0 10px, transparent 10px 26px),
    linear-gradient(180deg, #FFF0F5 0%, #FFF6E5 60%, #FFEFD6 100%);
}
/* last chapter: the colophon follows, so no full-screen height or sound-pod clearance (left a big empty band) */
#patrika > #photobooth { min-height: 0; padding-bottom: 44px; }
#photobooth .pb-kicker {
  display: inline-block; vertical-align: middle; font: 600 18px/1 var(--ui); color: var(--rani-deep); padding: 8px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #FFE38A, #F6C343); box-shadow: 0 4px 12px rgba(201,149,43,.4); rotate: -4deg;
}
#photobooth .hint { margin-top: 0; max-width: 360px; text-align: left; line-height: 1.35; cursor: pointer; } /* tapping it = the main button of the moment */

/* ---------- the card ---------- */
#photobooth .pb-stage {
  position: relative; width: min(100%, 316px); aspect-ratio: 1080 / 1350; flex: none; margin-top: 4px;
  border-radius: var(--r-sm); overflow: hidden; rotate: -1.2deg; /* gold-foil edge: .foil-frame */
  box-shadow: var(--sh-2);
  transition: rotate .6s var(--ease-spring), scale .6s var(--ease-spring);
}
#photobooth[data-pb-mode="start"] .pb-stage { cursor: pointer; animation: pb-float 5s ease-in-out infinite; }
#photobooth:not([data-pb-mode="start"]) .pb-stage { rotate: 0deg; }
@keyframes pb-float { 50% { translate: 0 -6px; rotate: .8deg; } }
#photobooth .pb-cv { display: block; width: 100%; height: 100%; touch-action: none; -webkit-tap-highlight-color: transparent; }
#photobooth[data-pb-mode="start"] .pb-cv { touch-action: manipulation; }

/* gold-foil glint sweeping across the card (preview only, not in the saved photo) */
#photobooth .pb-sheen { /* a 2.5x-wide band slid with transform (moving background-position repainted the card every frame) */
  position: absolute; top: 0; bottom: 0; left: 0; width: 250%; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 35%, rgba(255,246,200,.95) 48%, rgba(255,255,255,.2) 52%, transparent 62%);
  transform: translateX(96%); animation: pb-glint 5.5s ease-in-out 1s infinite;
}
@keyframes pb-glint { 0%, 55% { transform: translateX(96%); } 100% { transform: translateX(-156%); } }

#photobooth .pb-count {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 400 140px/1 var(--display); color: #fff; text-shadow: 0 0 24px var(--rani), 0 6px 0 var(--rani-deep); opacity: 0;
}
#photobooth .pb-count.on { animation: pb-num .8s var(--ease-out); }
@keyframes pb-num { 0% { opacity: 0; transform: scale(2.2); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }
#photobooth .pb-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#photobooth .pb-flash.on { animation: pb-flash .7s ease-out; }
@keyframes pb-flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---------- controls (shown per mode) ---------- */
#photobooth .pb-start, #photobooth .pb-live, #photobooth .pb-acts, #photobooth .pb-stacts { display: none; width: 100%; max-width: 380px; }
#photobooth[data-pb-mode="start"] .pb-start,
#photobooth[data-pb-mode="live"] .pb-live,
#photobooth[data-pb-mode="edit"] .pb-acts,
#photobooth[data-pb-mode="status"] .pb-stacts { display: flex; gap: 10px; justify-content: center; align-items: center; animation: pb-in .45s var(--ease-out) both; }
@keyframes pb-in { from { opacity: 0; transform: translateY(8px); } }

#photobooth .pb-start .btn, #photobooth .pb-acts .btn, #photobooth .pb-live .btn, #photobooth .pb-stacts .btn { min-height: 54px; font-size: 18px; justify-content: center; }
#photobooth .pb-start .btn { flex: 1; padding-inline: 12px; }
/* "tap me" ring: a pseudo-element that grows and fades (transform + opacity, no box-shadow repaint) */
#photobooth .pb-cam, #photobooth .pb-nudge, #photobooth .pb-stshare { position: relative; }
#photobooth .pb-cam::after, #photobooth .pb-nudge::after, #photobooth .pb-stshare::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(165,16,42,.4); animation: pb-pulse 2s ease-out infinite;
}
@keyframes pb-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.08, 1.3); opacity: 0; } }
#photobooth .pb-nudge { animation: pb-wig 1.4s ease-in-out infinite; }
#photobooth .pb-nudge::after { animation-duration: 1.4s; }
@keyframes pb-wig { 0%, 70%, 100% { rotate: 0deg; } 80% { rotate: -3deg; } 90% { rotate: 3deg; } }

#photobooth .pb-x, #photobooth .pb-again, #photobooth .pb-back {
  flex: none; width: 54px; height: 54px; align-self: center; border-radius: 50%; border: 2px solid var(--zari); background: #fff; cursor: pointer;
  font: 600 24px/1 var(--ui); color: var(--peacock-deep); touch-action: manipulation; transition: transform .25s var(--ease-spring);
}
#photobooth .pb-x:active, #photobooth .pb-again:active, #photobooth .pb-back:active { transform: scale(.9); }
#photobooth .pb-shoot { flex: 1; font-size: 20px; }
#photobooth .pb-acts .btn { padding-inline: 14px; }
#photobooth .pb-save { flex: 1.3; }
#photobooth .pb-share { flex: 1; }

/* ---------- 📱 status card (9:16, no photo) ---------- */
#photobooth .pb-start { flex-wrap: wrap; }
/* quiet secondary action: ivory with one zari hairline, like the other quiet buttons */
#photobooth .pb-stbtn {
  flex: 1 1 100% !important; color: var(--peacock-deep);
  background: rgba(255,255,255,.78); box-shadow: var(--hairline), var(--sh-1);
}
#photobooth .pb-st { display: none; width: 100%; height: 100%; }
#photobooth[data-pb-mode="status"] .pb-stage { aspect-ratio: 1080 / 1920; width: min(100%, 262px); rotate: 0deg; }
#photobooth[data-pb-mode="status"] .pb-cv { display: none; }
#photobooth[data-pb-mode="status"] .pb-st { display: block; animation: pb-card .7s var(--ease-spring) both; }
@keyframes pb-card { from { opacity: 0; transform: scale(.85) rotate(-4deg); } }
#photobooth .pb-stacts .btn { flex: 1; padding-inline: 12px; }
#photobooth .pb-stacts { flex-wrap: wrap; }
#photobooth .pb-stshare { flex: 1 1 100% !important; font-size: 19px !important; }

/* ---------- 📤 send to the family (edit mode, the guest's own photo, online only) ---------- */
#photobooth .pb-send { display: none; width: 100%; max-width: 380px; flex-direction: column; gap: 6px; }
#photobooth.pb-own[data-pb-mode="edit"] .pb-send { display: flex; animation: pb-in .45s var(--ease-out) .15s both; }
#photobooth .pb-name {
  width: 100%; min-height: 48px; font: 17px/1.4 var(--body); color: var(--ink); padding: 10px 14px; border-radius: 14px;
  border: 2px solid var(--zari-light); background: #FFFDF6; outline: none; transition: border-color .2s, box-shadow .2s;
}
#photobooth .pb-name:focus { border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(242,140,24,.18); }
#photobooth .pb-name::placeholder { color: rgba(61,10,10,.36); opacity: 1; }
#photobooth .pb-sendbtn { min-height: 52px; font-size: 17px; line-height: 1.25; padding-inline: 14px; color: var(--peacock-deep); background: rgba(255,255,255,.82); box-shadow: var(--hairline), var(--sh-1); }
#photobooth .pb-sendbtn:disabled { cursor: default; transform: none; }
#photobooth .pb-sendbtn.pb-sent { color: #fff; background: var(--leaf); box-shadow: inset 0 0 0 1px var(--zari-light), var(--sh-1); animation: pb-pop .5s var(--ease-spring); }
@keyframes pb-pop { 45% { transform: scale(1.05); } }
#photobooth .pb-send small { font: 600 15px/1.3 var(--ui); color: var(--ink); opacity: .72; }

#photobooth .pb-msg { min-height: 1.4em; font: 600 17px/1.4 var(--ui); color: var(--peacock-deep); max-width: 360px; }
#photobooth .pb-safe { font: 600 15px/1.4 var(--ui); color: var(--leaf); opacity: .85; max-width: 340px; }

@media (prefers-reduced-motion: reduce) {
  #photobooth .pb-sheen, #photobooth .pb-stage, #photobooth .pb-nudge, #photobooth .pb-st, #photobooth .pb-send, #photobooth .pb-sendbtn, #photobooth .pb-cam::after, #photobooth .pb-nudge::after, #photobooth .pb-stshare::after { animation: none !important; }
  #photobooth .pb-cam::after, #photobooth .pb-nudge::after, #photobooth .pb-stshare::after { opacity: 0; }
}

/* (empty) The MapLibre earth-zoom overlay was removed; the venue's satellite zoom video + drawn fallback are styled in venue.css. */

/* मी येणार – marigold toran over haldi silk, RSVP cards, wish form, diyas on the Godavari */
#rsvp {
  justify-content: flex-start; padding-top: 70px; gap: 0;
  background:
    radial-gradient(circle at 15% 12%, rgba(246,195,67,.35), transparent 38%),
    radial-gradient(circle at 90% 40%, rgba(194,24,91,.10), transparent 40%),
    repeating-linear-gradient(45deg, rgba(11,110,110,.05) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #FFF4D6 0%, #FFF9EC 45%, #E9F6F2 100%);
}
/* marigold toran: garland of flowers with mango leaves */
#rsvp::after {
  content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 34px; pointer-events: none;
  background:
    radial-gradient(circle at 12px 10px, #F28C18 7px, #E8590C 8px, transparent 9px) 0 0 / 24px 22px repeat-x,
    radial-gradient(ellipse 5px 11px at 12px 22px, var(--leaf) 90%, transparent) 12px 6px / 48px 30px repeat-x;
  animation: rv-sway 5s ease-in-out infinite alternate; transform-origin: 50% 0;
}
@keyframes rv-sway { to { transform: skewX(-1.5deg) translateX(2px); } }

#rsvp .rv-kicker { font: 600 var(--fs-meta)/1.2 var(--ui); color: var(--peacock-deep); }
#rsvp .rv-title { margin-top: 6px; color: var(--kumkum); }
#rsvp .rv-sub { font: 600 15px/1.35 var(--ui); color: var(--rani-deep); opacity: .85; margin-top: 4px; }
#rsvp .rv-off {
  margin-top: 18px; padding: 12px 18px; border-radius: var(--r-md); font: 600 16px/1.4 var(--ui); color: var(--peacock-deep);
  background: #fff; box-shadow: var(--hairline), var(--sh-1);
}
#rsvp [hidden] { display: none !important; }
#rsvp .rv-ask, #rsvp .rv-wish { width: 100%; max-width: 400px; }

/* ---- the two big choices ---- */
#rsvp .rv-choices { display: grid; gap: 12px; margin-top: 18px; }
#rsvp .rv-choice {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px;
  font: 600 19px/1.25 var(--ui); text-align: left; border: 0; border-radius: var(--r-md); cursor: pointer; touch-action: manipulation;
  box-shadow: var(--hairline), var(--sh-1);
  transition: transform .25s var(--ease-spring), box-shadow .25s, opacity .25s, filter .25s;
}
/* both choices start as outlined cards; only the chosen one fills with colour */
#rsvp .rv-yes {
  color: #13623A; background: #FFFFFF; box-shadow: inset 0 0 0 2px #1E9E54, var(--sh-1);
}
/* a soft green halo breathes round "हो" until a choice is made (opacity only: no repaint per frame) */
#rsvp .rv-yes::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 8px rgba(30,158,84,.13); opacity: 0; animation: rv-beckon 2.6s ease-in-out infinite;
}
#rsvp.rv-coming .rv-yes::before, #rsvp.rv-notcoming .rv-yes::before { animation: none; }
#rsvp .rv-no {
  color: var(--rani-deep); background: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(194,24,91,.6), var(--sh-1);
}
#rsvp .rv-yes[aria-checked="true"] { color: #fff; background: linear-gradient(100deg, #1E9E54, var(--peacock)); }
#rsvp .rv-no[aria-checked="true"] { color: #fff; background: linear-gradient(100deg, var(--rani), var(--rani-deep)); }
#rsvp .rv-emo {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px;
  background: rgba(255,255,255,.9); box-shadow: 0 0 0 2px var(--zari-light);
}
#rsvp .rv-choice:active { transform: scale(.97); }
#rsvp .rv-choice[aria-checked="true"] { transform: scale(1.02); animation: none; box-shadow: inset 0 0 0 2px var(--haldi), 0 0 0 4px rgba(246,195,67,.35), var(--sh-2); }
#rsvp .rv-choice[aria-checked="true"]::after { content: "✓"; position: absolute; right: 16px; font-size: 22px; }
#rsvp.rv-coming .rv-no, #rsvp.rv-notcoming .rv-yes { opacity: .55; filter: saturate(.6); transform: scale(.97); }
@keyframes rv-beckon { 50% { opacity: 1; } }

/* ---- details form ---- */
#rsvp .rv-form, #rsvp .rv-thanks {
  margin-top: 14px; padding: 16px; border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.85); box-shadow: var(--hairline), var(--sh-1);
  animation: rv-open .5s var(--ease-spring);
}
@keyframes rv-open { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
#rsvp .rv-count { display: contents; }
#rsvp.rv-notcoming .rv-count { display: none; }
#rsvp .rv-label { font: 600 16px/1.2 var(--ui); color: var(--peacock-deep); }
#rsvp .rv-stepper { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
#rsvp .rv-step {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; font-size: 24px; touch-action: manipulation;
  background: radial-gradient(circle at 50% 35%, #FFE9A8, var(--haldi)); box-shadow: inset 0 0 0 2px #fff, 0 6px 14px -6px rgba(201,149,43,.9);
  transition: transform .2s var(--ease-spring);
}
#rsvp .rv-step:active { transform: scale(.9); }
#rsvp .rv-n {
  min-width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font: 400 40px/1 var(--display); color: #fff; padding-top: 6px;
  background: radial-gradient(circle at 50% 35%, #D8264A, var(--kumkum) 60%, #6E0A20); box-shadow: inset 0 0 0 3px var(--zari-light);
}
#rsvp .rv-n.rv-bump { animation: rv-bump .35s var(--ease-spring); }
#rsvp .rv-n.rv-nope { animation: rv-nope .3s ease-in-out; }
@keyframes rv-bump { 40% { transform: scale(1.18); } }
@keyframes rv-nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

#rsvp .rv-input {
  width: 100%; font: 18px/1.4 var(--body); color: var(--ink); padding: 12px 14px; border-radius: 14px;
  border: 2px solid var(--zari-light); background: #FFFDF6; outline: none; transition: border-color .2s, box-shadow .2s;
}
#rsvp .rv-input:focus { border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(242,140,24,.18); }
#rsvp .rv-input::placeholder { color: rgba(61,10,10,.36); opacity: 1; } /* clearly a hint, not a filled box */
#rsvp .rv-send { margin-top: 6px; }
#rsvp .btn:disabled { opacity: .6; pointer-events: none; }
#rsvp .rv-err { font: 600 15px/1.3 var(--ui); color: var(--kumkum); min-height: 0; }
#rsvp .rv-ty { font: 400 22px/1.45 var(--display); color: var(--peacock-deep); text-wrap: balance; }
#rsvp .rv-thanks { background: linear-gradient(180deg, #FFFFFF, #FFF4D6); }
#rsvp .rv-edit { font: 600 15px var(--ui); color: var(--rani-deep); background: none; border: 0; padding: 8px; cursor: pointer; text-decoration: underline dotted; }

/* ---- wish form ---- */
#rsvp .rv-h3 { font: 400 var(--fs-h3)/1.3 var(--display); color: var(--rani-deep); margin: 30px 0 10px; }
/* one-tap blessings for elders */
#rsvp .rv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
#rsvp .rv-chip {
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: var(--r-pill); cursor: pointer; touch-action: manipulation;
  font: 600 16px/1.2 var(--ui); color: var(--rani-deep); background: #FFFDF6; box-shadow: var(--hairline), var(--sh-1);
  -webkit-tap-highlight-color: transparent; transition: transform .16s var(--ease-out), background-color .2s, color .2s;
}
#rsvp .rv-chip:active { transform: scale(.96); }
#rsvp .rv-chip[aria-pressed="true"] { color: #fff; background: var(--rani); box-shadow: inset 0 0 0 1px var(--zari-light), var(--sh-1); }

#rsvp .rv-wform { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#rsvp .rv-text { resize: none; min-height: 96px; }
#rsvp .rv-wrow { display: flex; gap: 8px; width: 100%; align-items: center; }
#rsvp .rv-wname { flex: 1; min-width: 0; }
#rsvp .rv-left { flex: none; font: 600 var(--fs-meta) var(--ui); color: var(--peacock); min-width: 66px; text-align: right; }
#rsvp .rv-left.rv-near { color: var(--kumkum); }
#rsvp .rv-wmsg { font: 600 16px/1.4 var(--ui); color: var(--peacock-deep); text-wrap: balance; }

/* ---- wall: diyas drifting on the Godavari ---- */
#rsvp .rv-wall { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
#rsvp .rv-wallhint { font: 600 var(--fs-meta) var(--ui); color: var(--peacock); margin: -6px 0 8px; }
#rsvp .rv-river {
  position: relative; align-self: stretch; height: 232px; margin: 0 calc(var(--pad) * -1); overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 0%, rgba(255,233,168,.5), transparent 55%),
    linear-gradient(180deg, #D5F0F2 0%, #A8DCE4 45%, #6FB8C6 100%);
  box-shadow: inset 0 8px 12px -8px rgba(11,110,110,.45), inset 0 -8px 12px -8px rgba(6,72,72,.4);
}
#rsvp .rv-waves { position: absolute; left: 0; width: 200%; height: 14px; animation: rv-flow 7s linear infinite; }
#rsvp .rv-waves:nth-of-type(1) { top: 40px; }
#rsvp .rv-waves:nth-of-type(2) { top: 108px; animation-duration: 9s; opacity: .7; }
#rsvp .rv-waves:nth-of-type(3) { top: 176px; animation-duration: 11s; opacity: .5; }
@keyframes rv-flow { to { translate: -50% 0; } }
#rsvp .rv-ghat { position: absolute; right: 6px; top: 10px; width: 60px; height: 48px; overflow: visible; opacity: .9; }

#rsvp .rv-diyas { position: absolute; inset: 0; }
#rsvp .rv-diyas.rv-in { animation: rv-fadein 1.2s ease-out; }
@keyframes rv-fadein { from { opacity: 0; } }
#rsvp .rv-diya {
  position: absolute; left: 0; top: calc(14px + var(--lane) * 70px); width: 100px; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  animation: rv-drift var(--dur) linear infinite, rv-bob 2.4s ease-in-out infinite alternate;
  animation-delay: var(--delay), calc(var(--lane) * -.7s);
}
#rsvp .rv-diya svg { width: 48px; height: 44px; overflow: visible; }
/* the flame's glow: a static painted halo (a drop-shadow filter would be redrawn on every flicker frame) */
#rsvp .rv-diya::before {
  content: ""; position: absolute; z-index: -1; top: -12px; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,90,.95) 0, rgba(255,194,51,.5) 35%, rgba(255,194,51,0) 70%);
}
#rsvp .rv-tag {
  max-width: 100px; margin-top: -4px; padding: 1px 9px; border-radius: var(--r-pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-meta)/1.45 var(--ui); color: var(--rani-deep); background: rgba(255,249,236,.94); box-shadow: var(--hairline);
}
#rsvp .rv-diya:focus-visible { outline-offset: 0; border-radius: 12px; }
#rsvp .rv-deco { cursor: default; }
@keyframes rv-drift { from { translate: -104px 0; } to { translate: min(100vw, 480px) 0; } }
@keyframes rv-bob { from { rotate: -4deg; } to { rotate: 4deg; } }
#rsvp .rv-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: rv-flicker .5s ease-in-out infinite alternate; }
@keyframes rv-flicker { from { transform: scale(.9, 1.06) rotate(-3deg); } to { transform: scale(1.06, .94) rotate(3deg); } }
#rsvp .rv-reading .rv-diya, #rsvp .rv-reading .rv-waves { animation-play-state: paused; }

/* tapped diya: a small patra floats up out of the river */
#rsvp .rv-read {
  position: absolute; inset: 14px 18px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 20px; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(180deg, #FFFDF6, #FFF4D6); box-shadow: var(--hairline), var(--sh-2);
  animation: rv-rise .45s var(--ease-spring);
}
@keyframes rv-rise { from { opacity: 0; transform: translateY(30px) scale(.92); } }
#rsvp .rv-rdiya svg { width: 40px; height: 36px; filter: drop-shadow(0 0 8px rgba(255,194,51,.9)); }
#rsvp .rv-rtext { font: 18px/1.5 var(--body); color: var(--ink); overflow-wrap: anywhere; max-height: 120px; overflow: auto; }
#rsvp .rv-rname { font: 600 15px var(--ui); color: var(--rani-deep); }
#rsvp .rv-close {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 16px; color: var(--rani-deep); background: rgba(194,24,91,.08);
}
/* empty wall: a gentle invitation floating on the water instead of placeholder diyas */
#rsvp .rv-empty {
  /* centred by inset + auto margins (not translate: Chrome < 104 ignores it, and rv-rise animates transform) */
  position: absolute; inset: 0; margin: auto; height: max-content; z-index: 1; width: max-content; max-width: calc(100% - 40px);
  padding: 12px 20px; border-radius: var(--r-pill); font: 600 var(--fs-ui)/1.4 var(--ui); color: var(--peacock-deep); text-wrap: balance;
  background: rgba(255,253,246,.94); box-shadow: var(--hairline), var(--sh-1); animation: rv-rise .6s var(--ease-spring);
}
#rsvp .rv-more {
  margin-top: 12px; min-height: 48px; font: 600 var(--fs-ui)/1 var(--ui); color: var(--peacock-deep); background: #fff; border: 0;
  border-radius: var(--r-pill); padding: 14px 24px; cursor: pointer; box-shadow: var(--hairline), var(--sh-1); touch-action: manipulation;
}
#rsvp.rv-offline .rv-wall .rv-h3 { margin-top: 24px; }

/* after the wedding: no RSVP, the wishes wall stays as a keepsake */
.after-wedding #rsvp .rv-ask, .after-wedding #rsvp .rv-fwd, .after-wedding #rsvp .rv-sub, .after-wedding #rsvp .rv-title, .after-wedding #rsvp .rv-kicker { display: none; }

@media (prefers-reduced-motion: reduce) {
  #rsvp::after, #rsvp .rv-yes::before, #rsvp .rv-waves, #rsvp .rv-flame { animation: none; }
  /* diyas rest in a row on the water instead of drifting */
  #rsvp .rv-diyas { display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-evenly; justify-items: center; }
  #rsvp .rv-diya { animation: none; position: static; }
}

/* विवाहस्थळ – peacock-tinted silk */
#venue {
  background:
    radial-gradient(circle at 50% 30%, rgba(243,213,138,.45), transparent 55%),
    repeating-linear-gradient(-45deg, rgba(11,110,110,.05) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #E2F3EE 0%, #F4F8EC 55%, #FFF4E2 100%);
  overflow: hidden;
}
#venue h2 { color: var(--peacock-deep); }

#venue .vn-stage {
  position: relative; width: min(100%, 280px); aspect-ratio: 260 / 236; margin-top: 10px; isolation: isolate;
}
/* Sanskar Bharati rangoli on the floor under the mandap (squashed into perspective, slowly turning) */
#venue .vn-rangoli { position: absolute; left: 50%; top: 92%; width: 130%; height: auto; translate: -50% -50%; scale: 1 .34; z-index: -1; filter: drop-shadow(0 6px 6px rgba(142,15,67,.18)); }
#venue .rangoli .rg-spin { animation: vn-rg-spin 40s linear infinite; transform-origin: 0 0; }
/* idle loops that repaint every frame (SVG transforms) rest where they are once their moment is over (venue.js adds .vn-rest) */
#venue.vn-rest .rangoli .rg-spin, #venue.vn-rest .vn-flag, #venue.vn-rest .vn-couple .ia-sway { animation-play-state: paused; }
#venue .rangoli .rg-spin.rev { animation-direction: reverse; animation-duration: 55s; }
@keyframes vn-rg-spin { to { transform: rotate(360deg); } }
/* gold-leaf sheen sweeping across the closed curtains */
#venue .vn-sheen {
  position: absolute; inset: 0 0 6%; z-index: 4; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 35%, rgba(255,246,214,.95) 48%, rgba(255,224,140,.7) 52%, transparent 65%) 200% 0 / 250% 100% no-repeat;
  animation: vn-sheen 4.5s 1s ease-in-out 3; /* background-position repaints: three sweeps, then the breathing curtains do the inviting */
}
@keyframes vn-sheen { 0% { background-position: 200% 0; } 60%, 100% { background-position: -120% 0; } }
#venue.vn-open .vn-sheen { display: none; }

/* procession lane */
#venue .vn-lane {
  position: relative; width: min(100%, 340px); height: 82px; margin-top: 18px;
  background:
    radial-gradient(circle, #F28C18 2.2px, transparent 2.8px) 0 100% / 22px 10px repeat-x,
    linear-gradient(transparent 62%, #EED7AA 62%, #E3C48A 90%, transparent 90%);
  border-radius: 0 0 12px 12px;
}
#venue .vn-gate { position: absolute; right: 0; bottom: 4px; width: 34px; height: 80px; }
#venue .vn-group { position: absolute; left: 0; bottom: 4px; width: 142px; transition: transform .5s var(--ease-spring); }
#venue .vn-varat { display: block; width: 100%; height: auto; overflow: visible; }
#venue .vn-group.walk .vn-m, #venue .vn-group.walk .vn-horse { animation: vn-step .45s ease-in-out; }
#venue .vn-group.walk .vn-m:nth-of-type(2) { animation-delay: .06s; }
@keyframes vn-step { 30% { translate: 0 -5px; } 60% { translate: 0 0; } 80% { translate: 0 -2px; } }
#venue .vn-flag { transform-box: fill-box; transform-origin: 0 50%; animation: vn-flagwave 1.1s ease-in-out infinite alternate; }
@keyframes vn-flagwave { to { transform: skewY(8deg) scaleX(.85); } }
#venue .vn-prog { font: 600 17px/1.3 var(--ui); color: var(--peacock-deep); margin-top: 8px; min-height: 22px; }

/* the two drums */
#venue .vn-drums { display: flex; gap: 14px; margin-top: 10px; width: min(100%, 320px); }
#venue .vn-drum {
  position: relative; flex: 1; min-height: 96px; border: 0; border-radius: 22px; cursor: pointer; padding: 8px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 30%, #fff, #FFF1D6); color: var(--kumkum); font: 600 18px/1.1 var(--ui);
  box-shadow: inset 0 0 0 2px var(--zari), inset 0 0 0 5px #fff, 0 10px 22px -10px rgba(142,15,67,.5);
  user-select: none; -webkit-user-select: none;
}
#venue .vn-drum svg { width: 74px; height: 52px; }
#venue .vn-drum.vn-turn { animation: vn-call 1.3s ease-in-out infinite; }
@keyframes vn-call { 50% { box-shadow: inset 0 0 0 2px var(--zari), inset 0 0 0 5px #fff, 0 0 0 7px rgba(242,140,24,.35), 0 10px 22px -10px rgba(142,15,67,.5); } }
#venue.revealed .vn-drum.vn-turn { animation: none; }
#venue .vn-pop {
  position: absolute; left: 50%; top: -6px; font: 400 26px/1 var(--display); font-style: normal; color: var(--rani); pointer-events: none;
  text-shadow: 0 2px 0 #fff, 0 0 10px rgba(242,140,24,.6);
}
#venue .vn-glow {
  position: absolute; inset: -12% -8% -4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,222,140,.95), rgba(246,195,67,.45) 55%, transparent);
  opacity: 0; transform: scale(.6); transition: opacity 1.2s .4s, transform 1.4s .4s var(--ease-out);
}
/* the source art has a stray arrow at its right edge: clip it and re-centre the mandap */
#venue .vn-mandap {
  position: absolute; top: 4%; left: 9%; width: 92%; height: auto;
  clip-path: inset(0 11% 0 0); transform: scale(.94); transition: transform 1.4s .3s var(--ease-out), filter 1.4s .3s;
  filter: saturate(.7) brightness(.9);
}
/* the couple step into the mandap once the pallu parts (art: characters.js) */
#venue .vn-couple {
  position: absolute; left: 50%; bottom: 19%; height: 37%; translate: -50% 0; pointer-events: none;
  opacity: 0; transform: translateY(16px) scale(.94); transform-origin: 50% 100%;
}
#venue .vn-couple svg { display: block; width: auto; height: 100%; filter: drop-shadow(0 4px 4px rgba(61,10,10,.25)); }
/* the couple's sway + blink (characters.js) loop forever: still while hidden, a few blinks once they arrive */
#venue:not(.vn-open) .vn-couple * { animation: none; }
#venue.vn-open .vn-couple .ia-eye { animation-iteration-count: 3; }
#venue.vn-open .vn-couple { opacity: 1; transform: none; transition: opacity .7s .9s var(--ease-out), transform .7s .9s var(--ease-out); }

/* पैठणी pallu drapes: rani silk with zari buttis, an 18px peacock border of gold narli motifs on the meeting edge,
   a zari hem, and marigold tassels hanging at the outer sides */
#venue .vn-curtain {
  --e: right; --d: 90deg;
  position: absolute; top: 4%; height: 94%; width: 52%; z-index: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22'%3E%3Cpath d='M6 2C10 5 11 10 9 14C7.5 16.5 4.5 16.5 3.8 14.2C3.2 12 5 10.6 6.6 11.4C4.6 8.6 4.6 5.4 6 2Z' fill='%23F3D58A'/%3E%3Ccircle cx='6' cy='19.5' r='1.3' fill='%23F28C18'/%3E%3C/svg%3E") var(--e) 3px top 4px / 12px 22px repeat-y,
    linear-gradient(0deg, #F3D58A 0 2px, #0B6E6E 2px 9px, #F3D58A 9px 10.5px, transparent 10.5px),
    linear-gradient(var(--d), transparent calc(100% - 18px), #F3D58A calc(100% - 18px) calc(100% - 16.5px), #0B6E6E calc(100% - 16.5px) calc(100% - 1.5px), #F3D58A calc(100% - 1.5px)),
    radial-gradient(circle, rgba(243,213,138,.85) 1.2px, transparent 1.8px) 0 0 / 16px 20px,
    linear-gradient(var(--d), rgba(90,0,30,.22), transparent 28%, rgba(255,220,235,.14) 55%, transparent 80%),
    linear-gradient(180deg, #D81B6A, #C2185B 50%, #9C0F4C);
  filter: drop-shadow(0 6px 10px rgba(61,10,10,.3));
  transition: transform 1.5s cubic-bezier(.65,.05,.25,1);
}
#venue .vn-curtain.l { left: 0; transform-origin: 0 0; }
#venue .vn-curtain.r { right: 0; transform-origin: 100% 0; --e: left; --d: 270deg; }
#venue .vn-curtain::after { /* gonda: zari cord with three marigolds */
  content: ""; position: absolute; bottom: -16px; width: 14px; height: 50px;
  background:
    radial-gradient(circle at 50% 7px, #FDBA3C 0 4px, #E8590C 5px, transparent 6px),
    radial-gradient(circle at 50% 21px, #F6C343 0 4.5px, #F28C18 5.5px, transparent 6.5px),
    radial-gradient(circle at 50% 36px, #FDBA3C 0 5px, #E8590C 6px, transparent 7px),
    linear-gradient(90deg, transparent 6px, #C9952B 6px 8px, transparent 8px) 0 0 / 100% 44px no-repeat;
}
#venue .vn-curtain.l::after { left: 6px; }
#venue .vn-curtain.r::after { right: 6px; }
#venue .vn-pelmet { position: absolute; left: -2%; top: 0; width: 104%; height: 13%; z-index: 3; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }

/* closed: curtains breathe gently to invite a tap */
#venue:not(.vn-open) .vn-curtain.l { animation: vn-breathe 3s ease-in-out infinite; }
#venue:not(.vn-open) .vn-curtain.r { animation: vn-breathe 3s ease-in-out infinite -.4s; }
@keyframes vn-breathe { 50% { transform: skewX(1.5deg) scaleX(.985); } }

#venue.vn-open .vn-curtain.l { transform: scaleX(.2) skewX(4deg); }
#venue.vn-open .vn-curtain.r { transform: scaleX(.2) skewX(-4deg); }
#venue.vn-open .vn-glow { opacity: 1; transform: scale(1); animation: vn-pulse 3.2s 1.8s ease-in-out 3; }
#venue.vn-open .vn-mandap { transform: none; filter: none; }
@keyframes vn-pulse { 50% { opacity: .7; transform: scale(1.04); } }

#venue .vn-name { font: 400 var(--fs-h3)/1.3 var(--display); color: var(--rani-deep); margin-top: 14px; text-wrap: balance; }
#venue .vn-addr { font: var(--fs-body)/1.5 var(--body); color: var(--ink); margin-top: 2px; }

/* the map journey (venue.js), ~6.6s: a globe turns until India faces us → it zooms ×3 straight into the India
   drawing → महाराष्ट्र glows → zoom to नाशिक → the hall's street map → kalash pin. Tapping it opens directions.
   Only transform + opacity animate (all on HTML boxes, so the compositor runs them); .end = the last frame, static.
   Box and drawings are 4:3, so every % below is a point on the 320×240 drawings. */
#venue .vn-mapbox { position: relative; width: min(100%, 340px); }
#venue .vn-map {
  display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 16px 0; border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #0E7C7A, var(--peacock-deep) 75%); color: inherit; text-decoration: none;
  box-shadow: var(--hairline), 0 0 0 3px var(--zari-light), var(--sh-2); -webkit-tap-highlight-color: transparent; isolation: isolate;
}
#venue .vn-map > * { position: absolute; }
#venue .vt-sky { inset: 0; }
#venue .vt-tw { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the globe: ocean sphere, a gold rim with a soft halo, land strip clipped round, a fixed sunlit highlight + terminator on top */
#venue .vt-globe {
  left: 25.52%; top: 15.85%; width: 48.75%; height: 65%; border-radius: 50%; overflow: hidden; /* centre = India's centre */
  background: radial-gradient(circle at 36% 30%, #A8ECEC, #3DB3C0 30%, #11818F 62%, #0A5C6B);
  box-shadow: 0 0 0 1.5px rgba(243,213,138,.8), 0 0 22px 3px rgba(150,232,236,.5);
}
#venue .vt-globe::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgba(255,255,255,.55), transparent 26%), radial-gradient(circle at 40% 36%, transparent 48%, rgba(3,40,54,.62) 100%);
}
#venue .vt-strip { position: absolute; left: 0; top: 0; width: 300%; height: 100%; transform: translateX(-57.05%); }
#venue .vt-strip svg { display: block; width: 100%; height: 100%; }
#venue .vt-zoom { inset: 0; transform-origin: 34.78% 54.08%; } /* origin = नाशिक on the India drawing */
#venue .vt-zoom svg { display: block; width: 100%; height: 100%; opacity: 0; transform-origin: 49.89% 48.35%; } /* India's centre */
#venue .vt-mh, #venue .vt-god { opacity: 0; }
#venue .vt-glow {
  position: absolute; left: 29.4%; top: 43.3%; width: 20%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,236,170,.95), rgba(246,195,67,.55) 45%, transparent);
}
#venue .vt-cap {
  left: 5%; bottom: 7%; opacity: 0; pointer-events: none; /* bottom-left: the sea beside the peninsula stays empty */
  font: 400 22px/1.2 var(--display); color: #FFE9A8; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#venue .vt-local { inset: 0; opacity: 0; transform-origin: 68% 56.2%; } /* lands onto the pin */
#venue .vn-svgmap { display: block; width: 100%; height: 100%; }
#venue .vt-name {
  left: 50%; bottom: 7%; translate: -50% 0; white-space: nowrap; opacity: 0; padding: 5px 14px 3px; border-radius: var(--r-pill);
  font: 400 17px/1.3 var(--display); color: var(--rani-deep); background: rgba(255,249,236,.95); box-shadow: inset 0 0 0 1px var(--zari), var(--sh-1);
}
#venue .vn-pin { left: 68%; top: 56.2%; width: 38px; translate: -50% -100%; opacity: 0; z-index: 2; transform-origin: 50% 100%; }
#venue .vn-pin svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
#venue .vn-ring { left: 68%; top: 56.2%; width: 46px; height: 46px; margin: -23px 0 0 -23px; scale: 1 .5; opacity: 0; z-index: 1; }
#venue .vn-ring svg { display: block; width: 100%; height: 100%; }
/* replay chip: outside the link (a tap never opens Maps), top-right over the map (its top = the map's 16px margin + 8) */
#venue .vn-replay {
  position: absolute; top: 24px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 0 13px 0 10px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 600 15px/1 var(--ui); color: var(--peacock-deep); background: rgba(255,249,236,.95); box-shadow: inset 0 0 0 1px var(--zari), var(--sh-1);
  opacity: 0; transform: translateY(-4px) scale(.96); visibility: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s;
}
#venue .vn-replay::before { content: ""; position: absolute; inset: -5px -4px; } /* ≥44px tap target */
#venue .vn-replay svg { width: 17px; height: 17px; flex: none; }
#venue .vn-replay.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
#venue .vn-replay.on:active { transform: scale(.96); transition-duration: .1s; }

/* timeline: globe 0–2.3s, zoom into India 2.3–3.5, महाराष्ट्र 3.4–4.5, नाशिक 4.5–5.6, street map 5.0, pin 5.7, name 6.3 */
#venue .vn-map.go .vt-tw { animation: vt-tw 1.2s ease-in-out 5 alternate; }
#venue .vn-map.go .vt-tw:nth-child(2) { animation-delay: -.4s; }
#venue .vn-map.go .vt-tw:nth-child(3) { animation-delay: -.8s; }
#venue .vn-map.go .vt-globe { animation: vt-globe 3.5s linear both; } /* one animation: two transform animations on a box can't go to the compositor */
#venue .vn-map.go .vt-strip { animation: vt-spin 2.3s .05s cubic-bezier(.4,0,.2,1) both; }
/* same curve + timing as the globe's zoom and exactly 1/3 its scale, so India stays locked while they crossfade */
#venue .vn-map.go .vt-zoom svg { animation: vt-in 1.2s 2.3s cubic-bezier(.6,0,.3,1) both; }
#venue .vn-map.go .vt-zoom { animation: vt-zoom 1.1s 4.5s cubic-bezier(.65,0,.35,1) forwards; }
#venue .vn-map.go .vt-mh { animation: vt-fade .5s 3.55s ease-out both; }
#venue .vn-map.go .vt-god { animation: vt-fade .5s 4s ease-out both; }
#venue .vn-map.go .vt-glow { animation: vt-glow 1.1s 3.4s cubic-bezier(.65,0,.35,1) both; }
#venue .vn-map.go .vt-cap.c1 { animation: vt-cap 1.5s 1.9s both; }
#venue .vn-map.go .vt-cap.c2 { animation: vt-cap 1.2s 3.45s both; }
#venue .vn-map.go .vt-cap.c3 { animation: vt-cap 1.4s 4.45s both; }
#venue .vn-map.go .vt-sky { animation: vt-out .6s 5s forwards; }
#venue .vn-map.go .vt-local { animation: vt-land .8s 5s var(--ease-out) both; }
#venue .vn-map.go .vn-pin { animation: vn-drop .9s 5.7s var(--ease-out) both; }
#venue .vn-map.go .vn-ring { animation: vt-fade .3s 6.2s both; }
#venue .vn-map.go .vn-ring.p, #venue .vn-map.end .vn-ring.p { animation: vn-ring 1.6s 6.4s ease-out 6; }
#venue .vn-map.go .vt-name { animation: vt-name .6s 6.3s var(--ease-out) both; }
#venue .vn-map.end .vt-sky, #venue .vn-map.end .vt-zoom, #venue .vn-map.end .vt-globe { opacity: 0; }
#venue .vn-map.end .vt-local, #venue .vn-map.end .vn-pin, #venue .vn-map.end .vn-ring, #venue .vn-map.end .vt-name { opacity: 1; }
#venue .vn-map.end .vn-ring.p { animation-delay: 0s; }
@keyframes vt-tw { from { opacity: .25; } to { opacity: 1; } }
@keyframes vt-spin { from { transform: translateX(-57.05%); } to { transform: translateX(-4.7%); } } /* Americas → Pacific → Asia → India */
/* 0–.7s: arrives; 2.3–3.5s: zooms ×3 into India (same curve as vt-in), fading after 40% of the zoom */
@keyframes vt-globe {
  0% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  20% { opacity: 1; transform: none; }
  65.714% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6,0,.3,1); }
  79.43% { opacity: 1; animation-timing-function: ease; }
  100% { opacity: 0; transform: scale(3); }
}
@keyframes vt-in { 0% { opacity: 0; transform: scale(.33333); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes vt-zoom { 0% { transform: none; opacity: 1; } 45% { opacity: 1; } 100% { transform: translate(33.22%, 2.12%) scale(5); opacity: 0; } } /* नाशिक slides onto the pin */
@keyframes vt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-glow { from { opacity: 0; transform: translate(7.7%, -78%) scale(.6); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes vt-cap { 0% { opacity: 0; transform: translateY(8px); } 20%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-land { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
@keyframes vt-name { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vn-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* the real satellite zoom (venue.js .vid): a pre-rendered video, our captions on top, the pin lands on its centre.
   .end without the video = its last frame as an image (reduced motion, keepsake, switched off) */
#venue .vt-vid, #venue .vt-end { inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#venue .vt-end { opacity: 0; }
#venue .vn-map:not(.vid) .vt-vid, #venue .vn-map:not(.vid) .vt-end, #venue .vn-map:not(.vid) .vt-attr, #venue .vn-map.vid.end .vt-vid,
#venue .vn-map.vid .vt-sky, #venue .vn-map.vid .vt-globe, #venue .vn-map.vid .vt-zoom, #venue .vn-map.vid .vt-local { display: none; }
#venue .vn-map.vid.end .vt-end { opacity: 1; }
#venue .vt-attr {
  right: 6px; bottom: 3px; z-index: 1; pointer-events: none; font: 400 10px/1.2 var(--ui); letter-spacing: .01em;
  color: rgba(255,255,255,.72); text-shadow: 0 0 3px rgba(0,0,0,.6);
}
#venue .vn-map.vid .vn-pin, #venue .vn-map.vid .vn-ring { left: 50%; top: 50%; }
#venue .vn-map.vid .vt-cap { transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
#venue .vn-map.vid .vt-cap.on { opacity: 1; transform: none; }
#venue .vn-map.land .vn-pin { animation: vn-drop .9s var(--ease-out) both; }
#venue .vn-map.land .vn-ring { animation: vt-fade .3s .5s both; }
#venue .vn-map.land .vn-ring.p { animation: vn-ring 1.6s .7s ease-out 6; }
#venue .vn-map.land .vt-name { animation: vt-name .6s .6s var(--ease-out) both; }
@keyframes vn-drop {
  0% { opacity: 0; transform: translateY(-90px); }
  45% { opacity: 1; transform: translateY(0) scaleY(.82); }
  65% { transform: translateY(-16px); }
  82% { transform: translateY(0) scaleY(.94); }
  100% { opacity: 1; transform: none; }
}

/* map + button stay folded until the procession arrives and the curtains part, so the
   curtain and the dhol step fit one phone screen (keepsake mode: always open) */
#venue .vn-map, #venue .vn-go { transition: max-height .9s var(--ease-out), margin .9s var(--ease-out), opacity .6s .3s, visibility 0s; max-height: 260px; }
#venue:not(.vn-open) .vn-map, #venue:not(.vn-open) .vn-go { max-height: 0; margin-block: 0; min-height: 0; padding-block: 0; opacity: 0; visibility: hidden; transition: none; }
#venue:not(.revealed) .next { display: none; }
.after-wedding #venue .vn-map, .after-wedding #venue .vn-go { max-height: 260px; opacity: 1; visibility: visible; }
.after-wedding #venue .vn-map { margin-block: 16px; }
.after-wedding #venue .vn-go { padding-block: 14px; min-height: 56px; }
#venue .vn-t { font-family: var(--ui); font-weight: 600; }
#venue .vn-wave { animation: vn-flow 2.4s linear 5; } /* SVG dash repaints: ~12s of flow, then still */
#venue .vn-map:not(.go):not(.end) .vn-wave { animation: none; } /* SVG dash = repaint each frame: only once the street map is up */
#venue .vn-map.go .vn-wave { animation-delay: 5s; }
@keyframes vn-flow { to { stroke-dashoffset: -30; } }

/* directions: the one loud button here – rani silk, double zari border (not the quiet ivory "पुढे चला") */
#venue .vn-go {
  min-height: 56px; padding: 14px 26px; font-size: 19px; color: #FFF9EC;
  background: linear-gradient(180deg, #DA2C7C 0%, var(--rani) 50%, var(--rani-deep) 100%);
  box-shadow: inset 0 0 0 2px var(--zari-light), inset 0 0 0 4px rgba(142,15,67,.9), inset 0 0 0 5px var(--zari), 0 12px 24px -10px rgba(142,15,67,.8);
}
#venue .vn-hd { width: 30px; height: 21px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  #venue:not(.vn-open) .vn-curtain, #venue .vn-sheen, #venue .rangoli .rg-spin, #venue .vn-flag, #venue .vn-drum.vn-turn { animation: none; }
  #venue.vn-open .vn-glow, #venue .vn-wave, #venue .vn-map .vn-ring.p { animation: none; }
  #venue .vn-map .vn-ring.p { opacity: 0; }
  #venue.vn-open .vn-couple { transform: none; transition: opacity .4s; }
}

/* Chrome <104 (old Android WebView) ignores translate/scale: same resting layout via transform or offsets
   (offsets where a keyframe animates transform, since the animation would override a static transform) */
@supports not (translate: 0) {
  #venue .vn-rangoli { transform: translate(-50%, -50%) scale(1, .34); }
  #venue .vn-couple { transform: translateX(-50%) translateY(16px) scale(.94); }
  #venue.vn-open .vn-couple { transform: translateX(-50%); }
  #venue .vt-name { left: 0; right: 0; width: max-content; margin: 0 auto; }
  #venue .vn-pin { top: auto; bottom: 43.8%; margin-left: -19px; } /* tip on the 68% / 56.2% point */
  #venue .vn-map.vid .vn-pin { top: auto; bottom: 50%; }
  #venue .vn-ring { transform: scale(1, .5); }
  @keyframes vn-ring { from { transform: scale(1, .5); opacity: 1; } to { transform: scale(1.6, .8); opacity: 0; } }
}

/* आपले स्नेहांकित – rose silk with a brass-rod scroll */
#family {
  background:
    radial-gradient(circle at 85% 12%, rgba(194,24,91,.16), transparent 40%),
    radial-gradient(circle at 10% 88%, rgba(242,140,24,.18), transparent 42%),
    repeating-linear-gradient(90deg, rgba(194,24,91,.045) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #FDEAF0 0%, #FFF3EA 100%);
}
#family h2 { color: var(--rani-deep); }
#family .fm-letter { font: 400 var(--fs-lead)/1.4 var(--display); color: var(--kumkum); margin-bottom: 6px; text-wrap: balance; } /* कळावे, लोभ असावा… */
/* keep the closed scroll + hint on one phone screen; "पुढे चला" takes its space only once unrolled */
#family:not(.revealed) .next { display: none; }

#family .fm-scroll { width: min(100% - 40px, 360px); margin-top: 14px; }
#family .fm-body { position: relative; --p: 0; --y: 0px; margin: 0 10px; }

/* brass rods with turned finials */
#family .fm-rod {
  position: relative; height: 22px; margin: 0 -10px; border-radius: 11px; z-index: 3;
  background: linear-gradient(180deg, #7A5212 0%, #F3D58A 30%, #C9952B 55%, #8A5E14 85%, #5C3D0A 100%);
  box-shadow: 0 4px 8px rgba(61,10,10,.3);
}
#family .fm-rod::before, #family .fm-rod::after {
  content: ""; position: absolute; top: -5px; width: 28px; height: 32px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 35% 30%, #FFF0C2, #C9952B 45%, #6B470E 100%);
  box-shadow: 0 3px 6px rgba(61,10,10,.35);
}
#family .fm-rod::before { left: -14px; }
#family .fm-rod::after { right: -14px; }

#family .fm-bottom {
  position: absolute; left: -20px; right: -20px; top: -2px; margin: 0; cursor: grab; touch-action: none;
  transform: translateY(var(--y)); -webkit-tap-highlight-color: transparent;
}
#family .fm-bottom.held { cursor: grabbing; }
/* larger invisible hit area for fingers: the whole rod plus the chevron under it */
#family .fm-grip { position: absolute; left: 0; right: 0; top: -14px; height: 64px; touch-action: none; }
#family .fm-grip::after {
  content: ""; position: absolute; left: 50%; top: 26px; width: 14px; height: 14px; margin-left: -7px;
  border-right: 3px solid var(--rani); border-bottom: 3px solid var(--rani); transform: rotate(45deg);
  animation: fm-nudge 1.4s ease-in-out infinite;
}
#family.fm-open .fm-grip::after { display: none; }
@keyframes fm-nudge { 50% { translate: 0 8px; } }
#family:not(.fm-open) .fm-bottom { animation: fm-tug 2.4s 1s ease-in-out infinite; }
@keyframes fm-tug { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 0 10px; } }

/* the silk sheet: in layout at full height, clipped to the unrolled part */
#family .fm-paper {
  position: relative; z-index: 2; padding: 0 0 0; overflow: hidden;
  background:
    radial-gradient(circle, #F3D58A 1.7px, transparent 2.2px) 0 0 / 12px 14px repeat-y,
    radial-gradient(circle, #F3D58A 1.7px, transparent 2.2px) 100% 0 / 12px 14px repeat-y,
    linear-gradient(90deg, #0B6E6E 0 12px, #C2185B 12px 15px, #F3D58A 15px 16px, transparent 16px calc(100% - 16px), #F3D58A calc(100% - 16px) calc(100% - 15px), #C2185B calc(100% - 15px) calc(100% - 12px), #0B6E6E calc(100% - 12px)),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), transparent 70%),
    repeating-linear-gradient(0deg, rgba(201,149,43,.06) 0 1px, transparent 1px 5px),
    #FFF8E7;
  box-shadow: inset 0 0 0 1px rgba(201,149,43,.4);
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0);
}
#family .fm-flip { transform: scaleY(-1); }
#family .fm-band { display: block; width: 100%; height: 26px; }

#family .fm-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 16px 18px 4px; position: relative; }
#family .fm-names::before { content: ""; position: absolute; left: 50%; top: 24px; bottom: 14px; width: 1.5px; background: linear-gradient(transparent, var(--zari), transparent); }
#family .fm-names ul { list-style: none; margin: 0; padding: 0; }
#family .fm-names li { padding: 7px 0 9px; line-height: 1.3; }
/* once opened, the names ink in one by one in reading order (--i from family.js); the teaser row is already there */
#family.fm-open .fm-names li:not(:first-child) { animation: fm-ink .6s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + .5s); }
@keyframes fm-ink { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
/* each name is exactly two lines: "श्री. मन्साराम" must not break after "श्री." */
#family .fm-names li span:first-child { display: block; white-space: nowrap; font: 400 clamp(18px, 5vw, 21px)/1.25 var(--display); color: var(--kumkum); }
#family .fm-names li span:last-child { display: block; font: 18px/1.35 var(--body); color: var(--ink); }
#family .fm-names li + li { background: radial-gradient(circle, var(--zari) 1.5px, transparent 2px) 50% 0 / 10px 4px repeat-x; }

#family .fm-foot { padding: 6px 14px 16px; display: flex; flex-direction: column; align-items: center; }
#family .fm-crest { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
#family .fm-mor { width: 62px; height: 52px; }
#family .fm-mor.l { transform: scaleX(-1); }
#family.fm-open .fm-mor { animation: fm-bow 3s 1.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
#family.fm-open .fm-mor.l { animation-name: fm-bow-l; }
@keyframes fm-bow { to { transform: rotate(-4deg); } }
@keyframes fm-bow-l { from { transform: scaleX(-1); } to { transform: scaleX(-1) rotate(-4deg); } }
/* gold-leaf sheen sweeps the silk once it is unrolled */
#family .fm-paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 35%, rgba(255,246,214,.95) 48%, rgba(255,214,120,.8) 52%, transparent 65%) 220% 0 / 260% 100% no-repeat;
}
#family.fm-open .fm-paper::after { animation: fm-sheen 5s 1.6s ease-in-out infinite; }
@keyframes fm-sheen { 0% { background-position: 220% 0; } 55%, 100% { background-position: -140% 0; } }
#family .fm-foot img { width: 58px; height: auto; filter: drop-shadow(0 3px 4px rgba(61,10,10,.25)); }
#family .fm-parivar { font: 400 clamp(22px, 6vw, 28px)/1.35 var(--display); margin-top: 4px; text-wrap: balance; } /* colour: .foil */

/* closed state: pheta + button wait in the space the scroll will cover */
/* sits just under the bottom rod (the scroll starts partly unrolled as a teaser) and fades as it is pulled */
#family .fm-closed {
  position: absolute; left: 0; right: 0; top: calc(var(--y) + 46px); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0;
  opacity: clamp(0, calc(1.4 - var(--p) * 2.5), 1); transition: opacity .6s;
}
#family .fm-closed .btn { margin-top: 14px; }
#family .fm-closed .hint { margin-top: 12px; }
#family .fm-pheta { width: 160px; height: auto; animation: fm-float 3.6s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(61,10,10,.25)); }
@keyframes fm-float { 50% { translate: 0 -8px; } }
#family.fm-open .fm-closed { opacity: 0; pointer-events: none; }
#family.fm-open .fm-parivar { animation: fm-glow 1.2s 1s var(--ease-out) both, foil-sheen 2.6s var(--ease-out) 1.4s backwards; }
#family .hint { cursor: pointer; } /* tapping the hint unrolls the scroll too */
@keyframes fm-glow { from { opacity: 0; transform: scale(.9); } }

@media (max-width: 340px) {
  #family .fm-names { gap: 0 6px; padding-inline: 14px; } /* keep 2 columns: the draft's row order is seniority */
  #family .fm-names::before { display: none; }
}
#family .nb { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  #family:not(.fm-open) .fm-bottom, #family .fm-pheta, #family .fm-grip::after, #family.fm-open .fm-mor, #family.fm-open .fm-paper::after { animation: none; }
  #family.fm-open .fm-names li:not(:first-child) { animation: fm-fade .4s both; animation-delay: calc(var(--i) * 40ms + .3s); }
  @keyframes fm-fade { from { opacity: 0; } }
}

/* आशीर्वाद – haldi-to-rose silk, the closing page */
#ashirwad {
  background:
    radial-gradient(circle at 50% 26%, rgba(243,213,138,.55), transparent 45%),
    repeating-linear-gradient(135deg, rgba(201,149,43,.06) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #FFF6D6 0%, #FFEFE4 55%, #FCE1EC 100%);
  padding-bottom: 96px; /* room for the floating music button */
}
#ashirwad .as-swastik { width: 52px; height: auto; margin-bottom: 10px; animation: as-turn 30s linear infinite; }
@keyframes as-turn { to { rotate: 360deg; } }
#ashirwad .as-line span { display: block; }

/* ---- deepdaan on the Godavari ---- */
#ashirwad .as-river {
  position: relative; align-self: stretch; height: 92px; margin: 14px calc(var(--pad) * -1) 0; overflow: hidden;
  background: linear-gradient(180deg, #D5F0F2 0%, #A8DCE4 55%, #7EC4D0 100%);
  box-shadow: inset 0 6px 10px -6px rgba(11,110,110,.35);
}
#ashirwad .as-ghat { position: absolute; left: 8px; bottom: 0; width: 76px; height: 70px; overflow: visible; }
#ashirwad .as-waves { position: absolute; left: 0; width: 200%; height: 14px; animation: as-flow 6s linear infinite; }
#ashirwad .as-waves:nth-of-type(2) { top: 26px; }
@keyframes as-flow { to { translate: -50% 0; } }
#ashirwad .as-diya {
  position: absolute; left: 0; width: 44px; height: 40px;
  top: calc(30px + (var(--i) % 2) * 22px);
  animation: as-drift 24s linear infinite, as-bob 2.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -4.8s), calc(var(--i) * -.5s); /* one speed, evenly spaced */
}
#ashirwad .as-diya svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(255,194,51,.85)); }
@keyframes as-drift { from { translate: -60px 0; } to { translate: min(100vw, 480px) 0; } }
@keyframes as-bob { from { rotate: -3deg; } to { rotate: 4deg; } }
#ashirwad .as-diya svg { animation: as-float 2.6s ease-in-out infinite alternate; }
@keyframes as-float { to { transform: translateY(5px); } }
#ashirwad .as-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: as-flicker .5s ease-in-out infinite alternate; }
@keyframes as-flicker { from { transform: scale(.9, 1.06) rotate(-3deg); } to { transform: scale(1.06, .94) rotate(3deg); } }

/* ---- hold button, sitting in a big Sanskar Bharati rangoli ---- */
#ashirwad .as-holdwrap { position: relative; display: grid; place-items: center; width: 300px; height: 280px; margin-top: 4px; }
#ashirwad .as-rangoli { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; /* not translate: Chrome < 104 */ filter: drop-shadow(0 8px 14px rgba(142,15,67,.2)); }
#ashirwad .rangoli .rg-spin { animation: as-rg-spin 40s linear infinite; transform-origin: 0 0; }
#ashirwad .rangoli .rg-spin.rev { animation-direction: reverse; animation-duration: 55s; }
@keyframes as-rg-spin { to { transform: rotate(360deg); } }
#ashirwad .as-hold {
  --k: 0; position: relative; width: 200px; height: 200px; padding: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#ashirwad .as-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 calc(var(--k) * 10px) rgba(243,213,138,.9)); }
#ashirwad .as-hold:not(.holding) .as-prog { transition: stroke-dashoffset .5s var(--ease-out); }
#ashirwad .as-core {
  position: absolute; inset: 27px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 35%, #D8264A, var(--kumkum) 55%, #6E0A20);
  box-shadow: inset 0 0 0 3px var(--zari-light), inset 0 -10px 20px rgba(0,0,0,.25), 0 12px 26px -8px rgba(165,16,42,.6);
  transform: scale(calc(1 - var(--k) * .06)); transition: transform .3s var(--ease-spring);
  animation: as-beckon 2.4s ease-in-out infinite;
}
#ashirwad .as-hold.holding .as-core { transition: none; animation: none; }
@keyframes as-beckon { 50% { box-shadow: inset 0 0 0 3px var(--zari-light), inset 0 -10px 20px rgba(0,0,0,.25), 0 12px 26px -8px rgba(165,16,42,.6), 0 0 0 10px rgba(194,24,91,.12); } }
#ashirwad .as-hands {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #FFFFFF, var(--ivory) 55%, #F6DFB0);
  box-shadow: 0 0 0 2px var(--zari-light); transform: translateY(calc(var(--k) * -4px));
}
#ashirwad .as-onjal { display: block; width: 66px; height: auto; margin-top: 4px; overflow: visible; }
#ashirwad .as-label { font: 600 19px/1.1 var(--ui); color: var(--ivory); }
#ashirwad .as-hold.blessed .as-core { animation: as-pop .7s var(--ease-spring); }
@keyframes as-pop { 40% { transform: scale(1.1); } }
#ashirwad .as-hold:focus-visible { outline-offset: 6px; }
/* blessed: the zari ring stays full and softly lit */
#ashirwad .as-hold.blessed .as-ring { filter: drop-shadow(0 0 8px rgba(243,213,138,.9)); }
#ashirwad .as-hold.blessed .as-label { font-size: 16px; line-height: 1.15; text-align: center; max-width: 104px; text-wrap: balance; }
#ashirwad .as-hold.blessed .as-hands { width: 72px; height: 72px; }
#ashirwad .as-hold.blessed .as-onjal { width: 58px; }

#ashirwad.as-blessed .as-hint { display: none; }
#ashirwad .as-hint { margin-top: 2px; }
#ashirwad .as-share { margin-top: 18px; }
#ashirwad .as-thanks {
  min-height: 0; font: 400 24px/1.35 var(--display); color: var(--peacock-deep);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .6s, transform .6s var(--ease-spring);
}
#ashirwad.as-blessed .as-thanks, #ashirwad .as-thanks.as-nudge {
  opacity: 1; transform: none; margin-top: 16px; padding: 10px 20px; border-radius: var(--r-md);
  background: rgba(255,255,255,.75); box-shadow: var(--hairline);
}

/* ---- contact block (always visible) ---- */
#ashirwad .as-contact {
  width: min(100%, 380px); margin-top: 30px; padding: 20px 16px 16px; border-radius: var(--r-lg); position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,249,236,.94));
  box-shadow: var(--hairline), var(--sh-1);
}
#ashirwad .as-addr { font: 18px/1.6 var(--body); color: var(--ink); text-wrap: balance; }
#ashirwad .as-mo { font: 600 var(--fs-ui)/1 var(--ui); color: var(--rani-deep); margin: 16px 0 10px; }
#ashirwad .as-phones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#ashirwad .as-phones li { display: flex; gap: 10px; }
/* call = core kumkum button with the number in clear Marathi digits; WhatsApp = a round green button beside it */
#ashirwad .as-call { flex: 1; gap: 10px; font-size: 20px; font-variant-numeric: tabular-nums; }
#ashirwad .as-call span { padding-top: 2px; } /* Mukta digits sit a little high */
#ashirwad .as-call svg { flex: none; width: 20px; height: 20px; opacity: .92; }
/* named number: who you are calling, the number small underneath */
#ashirwad .as-who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; }
#ashirwad .as-who b { font: 600 18px/1.2 var(--ui); overflow-wrap: anywhere; }
#ashirwad .as-who small { font: 600 15px/1 var(--ui); opacity: .85; letter-spacing: .02em; }
#ashirwad .as-call:has(.as-who) { justify-content: flex-start; padding-block: 10px; line-height: 1.2; }
#ashirwad .as-wa {
  width: 48px; flex: none; padding: 0;
  background: linear-gradient(180deg, #25B062 0%, #1E9E54 55%, #157A40 100%);
  box-shadow: inset 0 0 0 1px var(--zari-light), inset 0 1px 0 1px rgba(255,255,255,.22), 0 1px 1px rgba(10,60,30,.2), 0 10px 20px -10px rgba(21,122,64,.7);
}
#ashirwad .as-wa svg { width: 24px; height: 24px; }
#ashirwad .as-tip { font: 600 15px/1.3 var(--ui); color: var(--peacock-deep); margin-top: 12px; }

/* ---- footer ---- */
#ashirwad .as-foot { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; align-self: stretch; }
#ashirwad .as-foot .foil-rule { margin: 0 auto 4px; }
#ashirwad .as-parivar { font: 400 var(--fs-h3)/1.3 var(--display); color: var(--rani-deep); text-wrap: balance; }
/* quiet secondary action: same size as the core buttons, ivory with one gold hairline */
#ashirwad .as-dl {
  min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: var(--r-pill);
  font: 600 var(--fs-ui)/1 var(--ui); color: var(--peacock-deep); text-decoration: none;
  background: rgba(255,255,255,.7); box-shadow: var(--hairline), var(--sh-1);
  touch-action: manipulation; transition: transform .16s var(--ease-out);
}
#ashirwad .as-dl:active { transform: scale(.97); }

#ashirwad .nb { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  #ashirwad .as-swastik, #ashirwad .as-core, #ashirwad .as-waves, #ashirwad .as-flame, #ashirwad .rangoli .rg-spin { animation: none; }
  #ashirwad .as-diya { animation: none; left: calc(40px + var(--i) * 64px); }
}

/* ---- long-press save view (Invite.showImg; used by ashirwad, ukhana, photobooth): appended to <body>, so not under #ashirwad ---- */
.keep-ov {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: max(56px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(255,249,236,.97);
  animation: keep-in .3s var(--ease-out);
}
.keep-ov img {
  display: block; max-width: 100%; max-height: calc(100% - 96px); min-height: 0; object-fit: contain; border-radius: var(--r-sm);
  border: 3px solid var(--zari); box-shadow: var(--sh-2); -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto;
  animation: keep-pop .4s var(--ease-spring);
}
.keep-tip { display: flex; flex-direction: column; gap: 2px; text-align: center; font: 600 var(--fs-ui)/1.4 var(--ui); color: var(--rani-deep); }
.keep-tip small { font: 500 var(--fs-meta)/1.3 var(--ui); color: var(--peacock-deep); }
.keep-x {
  position: absolute; top: max(8px, env(safe-area-inset-top)); right: 10px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  font: 600 20px/1 var(--ui); color: var(--rani-deep); background: #fff; box-shadow: var(--hairline), var(--sh-1); touch-action: manipulation;
}
@keyframes keep-in { from { opacity: 0; } }
@keyframes keep-pop { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .keep-ov, .keep-ov img { animation: none; } }

/* चेतनाची गोष्ट – the 🗣️ कथा half of the sound pod (the pod itself is styled in core.css) */
/* a soft ring breathes out while the story is being told (transform + opacity only) */
#storyBtn::after {
  content: ""; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(194,24,91,.5); opacity: 0;
}
#storyBtn.st-speak::after { animation: st-ring 1.6s var(--ease-out) infinite; }
@keyframes st-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #storyBtn.st-speak::after { animation: none; opacity: .8; transform: none; } }