/* =========================================================
   Swadha & Salil · wedding invite
   Layout: a full-screen walk. Each stop = painting on top, paper sheet below.
   ========================================================= */
:root {
  color-scheme: light;
  --teak: #24130B;
  --teak-2: #3A2214;
  --paper: #FBF5EA;
  --paper-2: #F3E8D4;
  --ink: #33201A;
  --ink-soft: #6E5446;
  --maroon: #7A1F2B;
  --maroon-d: #4E0F1A;
  --gold: #C9A45C;
  --gold-l: #E8CF92;
  --rani: #C2457A;
  --peacock: #1F6F6B;
  --accent: var(--maroon);
  --accent-2: var(--gold);
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --indic: "Tiro Devanagari Hindi", "Noto Sans Tamil", serif;
  --top: calc(70px + env(safe-area-inset-top, 0px));
  --bot: calc(66px + env(safe-area-inset-bottom, 0px));
  --shadow: 0 18px 40px -18px rgba(40, 14, 8, .45), 0 2px 6px rgba(40, 14, 8, .1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 16.5px; line-height: 1.6; color: var(--ink); background: var(--teak); }
img { max-width: 100%; display: block; }
a { color: var(--maroon); }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0 0 .35em; color: var(--maroon); text-wrap: balance; font-weight: 600; }
h2 { font-size: clamp(32px, 8.4vw, 46px); }
p { margin: 0 0 .8em; }
[lang="hi"] { font-family: var(--indic); }
[lang="ta"] { font-family: "Noto Sans Tamil", var(--body); }
.hidden { display: none !important; }
.center { text-align: center; }
.small-print { font-size: 15px; color: var(--ink-soft); }
.eyebrow { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: .3em; }
.scribble { display: block; font-family: var(--hand); font-size: 1.35em; color: var(--rani); line-height: 1.2; }
.scribble.big { font-size: 38px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 0; font: 700 16px/1.2 var(--body); text-decoration: none; cursor: pointer;
  background: var(--maroon); color: #fff; box-shadow: 0 5px 0 var(--maroon-d); transition: transform .15s, box-shadow .15s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--maroon-d); }
.btn-ghost { background: transparent; color: var(--maroon); box-shadow: inset 0 0 0 2px var(--maroon); }
.btn-gold { background: linear-gradient(180deg, #F3D88E, #C49A44); color: var(--maroon-d); box-shadow: 0 5px 0 #7E5B1E; }
.btn-big { width: 100%; font-size: 18px; min-height: 56px; }
:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 3px; }

/* =========================================================
   GATES
   ========================================================= */
html.gated, html.gated body { overflow: hidden; }
.doors { position: fixed; inset: 0; z-index: 100; perspective: 1800px; background: #170805; display: grid; place-items: center; cursor: pointer; transition: background .8s .7s; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    radial-gradient(circle, #E8CF92 0 2.3px, rgba(0,0,0,.4) 2.7px 3.3px, transparent 3.5px) 17px 17px / 34px 34px,
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, #4A1219, #6E1C27 45%, #561620);
  transition: transform 1.5s cubic-bezier(.7, 0, .25, 1); backface-visibility: hidden;
}
.door.left { left: 0; transform-origin: left center; box-shadow: inset -4px 0 0 #E8CF92, inset -12px 0 22px rgba(0,0,0,.5); }
.door.right { right: 0; transform-origin: right center; box-shadow: inset 4px 0 0 #E8CF92, inset 12px 0 22px rgba(0,0,0,.5); }
.door-panel {
  position: absolute; left: 14%; right: 14%; top: 7%; height: 46%; border: 3px solid var(--gold-l);
  border-radius: 50% 50% 8px 8px / 26% 26% 8px 8px; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.05));
  box-shadow: inset 0 0 0 6px rgba(110, 28, 39, .9), inset 0 0 0 8px rgba(232, 207, 146, .5);
}
.door-panel.low { top: 58%; height: 34%; border-radius: 8px; }
.door-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, #FFE7B0, rgba(255, 200, 120, .55) 30%, transparent 70%); transition: opacity 1s .2s; }
.seal { position: relative; z-index: 2; text-align: center; color: #FCEBD0; padding: 16px 20px 22px; max-width: 360px; margin: 0 16px; background: radial-gradient(ellipse at center, rgba(30,6,8,.85) 40%, rgba(30,6,8,0) 72%); transition: opacity .5s, transform .6s; }
.seal-ring { width: min(62vw, 240px); aspect-ratio: 1; margin: 0 auto 18px; border-radius: 50%; background: #F7F0E2; display: grid; place-items: center; padding: 13%; box-shadow: 0 0 0 5px var(--gold-l), 0 0 0 11px var(--maroon), 0 0 0 13px var(--gold-l), 0 20px 50px rgba(0,0,0,.6); animation: breathe 3.5s ease-in-out infinite; }
.seal-hello { font-size: 15px; color: var(--gold-l); margin-bottom: 2px; }
.seal-line { font-family: var(--display); font-size: 27px; font-style: italic; margin-bottom: 18px; }
.seal-skip { display: block; margin-top: 18px; color: #F6D9A8; font-size: 14px; }
.doors.opening { background: transparent; pointer-events: none; }
.doors.opening .door.left { transform: rotateY(-108deg); }
.doors.opening .door.right { transform: rotateY(108deg); }
.doors.opening .seal { opacity: 0; transform: scale(.85); }
.doors.opening .door-glow { opacity: 1; transition: opacity .5s; }
@keyframes breathe { 50% { transform: scale(1.03); } }

/* =========================================================
   APP FRAME
   ========================================================= */
.journey { overflow: hidden; height: 100%; }
.app { position: fixed; inset: 0; background: var(--teak); }
.topbar { position: absolute; top: 0; left: 0; right: 0; height: var(--top); padding: env(safe-area-inset-top, 0px) 18px 0; z-index: 20; background: linear-gradient(180deg, #1B0D07, rgba(27, 13, 7, .92)); border-bottom: 1px solid rgba(201, 164, 92, .35); }
.track { position: relative; height: 44px; margin: 4px 14px 0; }
.track-line { position: absolute; left: 0; right: 0; top: 32px; height: 2px; background: rgba(201, 164, 92, .25); border-radius: 2px; }
.track-dots { position: absolute; inset: 0; }
.dot { position: absolute; top: 26px; width: 14px; height: 14px; margin-left: -7px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #5A4228; border: 1.5px solid var(--gold); transition: .3s; }
.dot.small::after { inset: 4.5px; border-width: 1px; }
.dot.done::after { background: #8A4A1E; border-color: #F59E0B; border-radius: 0 0 50% 50%; }
.dot.on::after { background: var(--gold-l); box-shadow: 0 0 0 3px rgba(232, 207, 146, .3); }
.dot:last-child { opacity: 0; } /* Swadha stands on the last stop */
/* the path he has walked becomes a marigold garland */
.track-fill { position: absolute; left: 0; top: -2px; height: 6px; width: 0; border-radius: 3px; transition: width .95s cubic-bezier(.45, .05, .3, 1);
  background: radial-gradient(circle, #F59E0B 0 2.5px, transparent 2.8px) 0 0 / 10px 6px repeat-x, radial-gradient(circle, #FCD34D 0 2.5px, transparent 2.8px) 5px 0 / 10px 6px repeat-x; }
.track.wed .track-fill { animation: shimmer 1.2s ease-in-out 3; }
@keyframes shimmer { 50% { filter: brightness(1.45) drop-shadow(0 0 3px #FCD34D); } }
/* every stop he passes lights a diya */
.dot.done::before { content: ""; position: absolute; left: 50%; top: -2px; width: 4px; height: 6px; margin-left: -2px; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: radial-gradient(circle at 50% 70%, #FFF6C8, #FBBF24 45%, #F97316 80%); box-shadow: 0 0 5px 2px rgba(251, 191, 36, .45); animation: flick .5s ease-in-out infinite alternate; z-index: 1; }
@keyframes flick { to { transform: scaleY(.82) translateY(1px); opacity: .85; } }

/* the baraat (drawn by js/baraat.js) */
.pr-stage { position: absolute; left: 0; right: 0; top: 0; height: 32px; pointer-events: none; z-index: 2; }
.pr-fx { position: absolute; inset: -10px -20px 0; pointer-events: none; z-index: 3; }
.actor { position: absolute; bottom: -1.2px; transition: left .95s cubic-bezier(.45, .05, .3, 1), opacity .5s ease, transform .5s ease; }
.actor svg { display: block; overflow: visible; }
.track svg .lg, .track svg .tail, .track svg .bod, .track svg .arm, .track svg .bb, .track svg .whole, .track svg .gl { transform-box: fill-box; }
.track svg .lg { transform-origin: 50% 0; }
.track svg .tail { transform-origin: 100% 0; animation: swish 2.6s ease-in-out infinite; }
.track.walking .la { animation: leg .3s ease-in-out infinite alternate; }
.track.walking .lb { animation: leg .3s ease-in-out infinite alternate-reverse; }
.track.walking .rider .whole { animation: bob .15s ease-in-out infinite alternate; }
@keyframes leg { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes bob { to { transform: translateY(-1.4px); } }
@keyframes swish { 50% { transform: rotate(-12deg); } }
.track svg .bod { transform-origin: 50% 100%; animation: hop .62s ease-in-out infinite alternate; }
.track .b2 svg .bod { animation-delay: -.3s; }
.track.walking svg .bod { animation-duration: .3s; }
.track svg .arm { animation: hit .26s ease-in-out infinite alternate; }
.track svg .arm.r { transform-origin: 0 0; }
.track svg .arm.l { transform-origin: 100% 0; animation-delay: -.13s; }
.track svg .arm.up { transform-origin: 50% 100%; animation: wave .4s ease-in-out infinite alternate; }
.track svg .arm.up.r2 { animation-delay: -.2s; }
@keyframes hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-2.2px) rotate(3deg); } }
@keyframes hit { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes wave { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.track.cheer svg .bod { animation: jump .32s ease-in-out infinite alternate; }
@keyframes jump { to { transform: translateY(-5px); } }
.track svg .bb { transform-origin: 50% 100%; }
.track .bride.near svg .bb { animation: sway 1.3s ease-in-out infinite alternate; }
.track .bride.close svg .bb { animation: bounce .45s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes bounce { to { transform: translateY(-2.4px); } }
.track .couple { opacity: 0; transform: translateY(4px) scale(.85); transform-origin: 50% 100%; }
.track.wed .couple { opacity: 1; transform: none; transition-delay: .25s; }
.track.wed .rider, .track.wed .bride, .track.wed .arch-front { opacity: 0; }
.track.wed .couple .gl { animation: drop .7s .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes drop { from { transform: translateY(-9px); opacity: 0; } to { transform: none; opacity: 1; } }
.fx { position: absolute; left: 0; top: 0; font-style: normal; pointer-events: none; will-change: transform, opacity; }
.fx.heart { font-size: 8px; line-height: 1; animation: rise 1.3s ease-out both; }
@keyframes rise { from { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } to { transform: translate(var(--dx), -16px) scale(1.1); opacity: 0; } }
.fx.petal { width: 4px; height: 3px; border-radius: 3px 0 3px 0; animation: fall 1.8s ease-in both; }
@keyframes fall { from { transform: translate(0, -6px) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--dx), 40px) rotate(var(--r)); opacity: 0; } }
.fx.glow { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 160, .55), rgba(255, 230, 160, 0) 65%); animation: glow 1.6s ease-out both; }
@keyframes glow { from { transform: scale(.3); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .track *, .track *::before, .track *::after { animation: none !important; transition: none !important; } }
.where { margin: 0; text-align: center; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); font-weight: 700; line-height: 18px; }

.navbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--bot); z-index: 20; padding: 0 12px env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(0deg, #1B0D07, rgba(27, 13, 7, .94)); border-top: 1px solid rgba(201, 164, 92, .35);
}
.nav-btn { min-height: 46px; min-width: 92px; padding: 0 16px; white-space: nowrap; border-radius: 999px; font: 700 16px var(--body); cursor: pointer; border: 0; }
.nav-btn.back { background: transparent; color: var(--gold-l); box-shadow: inset 0 0 0 1.5px rgba(232, 207, 146, .5); }
.nav-btn.back:disabled { opacity: .3; cursor: default; }
.invisible { visibility: hidden; }
.nav-btn.next { background: linear-gradient(180deg, #F3D88E, #C49A44); color: var(--maroon-d); box-shadow: 0 4px 0 #7E5B1E; animation: nudge 2.6s ease-in-out 3s infinite; }
@keyframes nudge { 0%, 85%, 100% { transform: none; } 90% { transform: translateX(4px); } 95% { transform: translateX(-2px); } }
.nav-quick { color: #F1DDB4; font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 10px 6px; white-space: nowrap; }

/* =========================================================
   STAGES
   ========================================================= */
.stages { position: absolute; top: var(--top); bottom: var(--bot); left: 0; right: 0; overflow: hidden; }
.stage { position: absolute; inset: 0; visibility: hidden; }
.stage.active, .stage.leave-f, .stage.leave-b { visibility: visible; }
.stage.active { z-index: 2; }
.art { position: absolute; left: 0; right: 0; top: 0; height: 56%; overflow: hidden; background: #1B0D07; transition: height .45s ease; }
.layer { position: absolute; inset: 0; }
.layer > img, .layer > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.focus-bottom .layer > img { object-position: center bottom; }
.grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(20, 8, 4, .38) 100%); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(56% - 18px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(20, 8, 4, .35);
  transition: top .45s ease; -webkit-overflow-scrolling: touch;
}
.stage.expanded .sheet { top: 9%; }
.handle { position: sticky; top: 0; z-index: 3; display: block; width: 100%; height: 22px; border: 0; background: linear-gradient(var(--paper) 60%, transparent); cursor: pointer; padding: 0; }
.handle i { display: block; width: 44px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: #D8C6A6; }
.sheet-in { padding: 4px 20px 34px; max-width: 620px; margin: 0 auto; }

/* stage transitions: walking forward = the painting grows as you step in */
.enter-f .art > .layer { animation: inF 1s cubic-bezier(.2, .7, .2, 1) both; }
.enter-b .art > .layer { animation: inB .9s cubic-bezier(.2, .7, .2, 1) both; }
.enter-f .sheet, .enter-b .sheet { animation: sheetIn .7s .15s cubic-bezier(.2, .7, .2, 1) both; }
.leave-f { animation: fadeOut .6s ease forwards; }
.leave-f .art > .layer { animation: outF .6s ease-in forwards; }
.leave-b { animation: fadeOut .6s ease forwards; }
.leave-b .art > .layer { animation: outB .6s ease-in forwards; }
@keyframes inF { from { transform: scale(.86); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes inB { from { transform: scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes outF { to { transform: scale(1.3); opacity: 0; } }
@keyframes outB { to { transform: scale(.86); opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
.stage:not(.active) * { animation-play-state: paused; }
.stage.leave-f *, .stage.leave-b * { animation-play-state: running; }

/* night version of the palace for the RSVP stop */
.night img, .night svg { filter: brightness(.6) saturate(1.3) hue-rotate(-14deg); }
.lanterns { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lanterns i { position: absolute; bottom: -30px; width: 12px; height: 16px; border-radius: 40% 40% 30% 30%; background: radial-gradient(circle at 50% 70%, #FFF1C2, #FFB547 55%, #D9711E); box-shadow: 0 0 14px 4px rgba(255, 176, 70, .55); animation: lantern 10s linear infinite; }
@keyframes lantern { from { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: 1; } to { transform: translate(30px, -560px) scale(.4); opacity: 0; } }

/* story slideshow */
.slides { position: absolute; inset: 0; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 5s ease-out; }
.slides img.on { opacity: 1; transform: scale(1); }

/* =========================================================
   SHEET CONTENT
   ========================================================= */
.hello { text-align: center; font-size: 14px; letter-spacing: .06em; color: var(--ink-soft); margin: 4px 0 0; }
.names { text-align: center; font-size: clamp(50px, 14vw, 84px); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.names em { font-style: italic; font-weight: 500; color: var(--gold); }
.names.one { font-size: clamp(40px, 11.5vw, 70px); white-space: nowrap; margin-top: 6px; }
.names.small { font-size: clamp(44px, 12vw, 70px); }
.big-line { text-align: center; font-family: var(--display); font-size: 27px; font-style: italic; margin-bottom: 18px; }
.big-line .scribble { font-style: normal; font-size: 23px; margin-top: 2px; }
.save-date { background: #fff; border: 1.5px solid rgba(201, 164, 92, .55); border-radius: 18px; padding: 16px 14px 12px; margin-bottom: 16px; text-align: center; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.date-tile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 14px 8px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #8E2A3E, #5A1424); }
.date-tile.d2 { background: linear-gradient(160deg, #C27A2E, #8A4614); }
.date-day { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.date-tile strong { font-family: var(--display); font-size: 27px; line-height: 1.1; font-weight: 600; }
.date-tile span:last-child { font-size: 13.5px; opacity: .95; }
.venue-line { margin: 10px 0 0; font-weight: 500; font-size: 15px; }
.countdown { margin: 8px 0 0; font-family: var(--hand); font-size: 23px; color: var(--peacock); }
.countdown b { font-family: var(--display); font-size: 32px; }
.stage.expanded .nudge { cursor: pointer; }
.nav-tip { cursor: pointer; }
.nudge { text-align: center; color: var(--ink-soft); font-size: 15px; margin: 10px 0 0; }

.chapter { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; margin: 18px 0; }
.chapter img { width: 92px; height: 116px; object-fit: cover; border-radius: 46px 46px 10px 10px; border: 4px solid #fff; box-shadow: 0 0 0 1.5px var(--gold), var(--shadow); }
.chapter-no { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.chapter h3 { font-size: 26px; margin: 2px 0 6px; }
.chapter p { font-size: 15.5px; margin-bottom: 4px; }
.sst-box { background: #FCEFF4; border: 1.5px dashed var(--rani); border-radius: 16px; padding: 16px; margin-top: 10px; }
.sst-box h3 { font-size: 23px; color: var(--rani); }
.sst-box p { font-size: 15.5px; }
.legend-card { position: relative; margin: 22px 0 6px; background: #FFF8E8; border: 1.5px solid var(--gold); border-radius: 16px; padding: 24px 18px 12px; }
.legend-tag { position: absolute; top: -13px; left: 16px; background: var(--maroon); color: #FCEBD0; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }

/* walk / outfit change */
.walk .sheet-in h2 { font-size: clamp(34px, 9vw, 46px); }
.kicker { display: block; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.walk-text { font-family: var(--display); font-size: 22px; font-style: italic; color: var(--ink); }
.dress-card { background: #fff; border-radius: 16px; padding: 16px 16px 8px; border: 1.5px solid rgba(201, 164, 92, .55); box-shadow: var(--shadow); }
.dress-label { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.dress-name { display: block; font-family: var(--display); font-size: 30px; color: var(--maroon); line-height: 1.1; margin: 2px 0; }
.dress-card p { font-size: 15.5px; margin: 6px 0 10px; }
.wear { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.wear li { font-size: 15px; padding: 8px 12px; background: var(--paper); border-radius: 10px; }
.wear b { display: inline-block; min-width: 40px; color: var(--maroon); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.soon { font-weight: 700; color: var(--accent); }
.soon.small { font-size: 13px; }

/* event */
.theme-mehendi { --accent: #2F6B4F; --accent-2: #C2457A; --tint: #EEF4E2; }
.theme-sangeet { --accent: #23305E; --accent-2: #B8954E; --tint: #EEF0F7; }
.theme-haldi   { --accent: #B4486A; --accent-2: #E3A23A; --tint: #FCEEF1; }
.theme-shaadi  { --accent: #8E1A2E; --accent-2: #C9962E; --tint: #FBEEE2; }
.ev-head { text-align: center; margin-bottom: 10px; }
.ev-title { font-size: clamp(48px, 13vw, 66px); margin: 0; color: var(--accent); }
.ev-title small { display: block; font-family: var(--hand); font-size: 24px; color: var(--accent-2); font-weight: 700; margin-top: -2px; }
.script { display: block; font-family: var(--indic); font-size: 17px; color: var(--accent-2); }
.tagline { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.25; margin: 8px 0 0; }
.facts { margin: 0 0 12px; border-top: 1px solid rgba(110, 84, 70, .2); }
.facts > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(110, 84, 70, .2); }
.facts dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-top: 2px; }
.facts dd { margin: 0; font-size: 15.5px; min-width: 0; }
.hint { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.sst { display: block; font-family: var(--hand); font-size: 19px; color: var(--rani); line-height: 1.2; }
.link-btn { margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--accent); font: 700 14px var(--body); text-decoration: underline; cursor: pointer; }
.about summary { cursor: pointer; font-weight: 700; color: var(--accent); list-style: none; padding: 6px 0; }
.about summary::-webkit-details-marker { display: none; }
.about summary::before { content: "+ "; }
.about[open] summary::before { content: "– "; }
.about p { font-size: 15.5px; }
.tips { background: var(--tint, var(--paper-2)); border-radius: 14px; padding: 12px 16px 4px; }
.tips-title { font-family: var(--hand); font-size: 23px; color: var(--accent-2); }
.tips ul { margin: 2px 0 8px; padding: 0; list-style: none; }
.tips li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 15px; }
.tips li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); }

/* =========================================================
   RSVP + FAQ
   ========================================================= */
.deadline { font-weight: 700; color: var(--rani); text-align: center; }
.rsvp-form { margin-top: 14px; }
.field { margin: 0 0 15px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; padding: 0; }
.field small, legend small { font-weight: 400; color: var(--ink-soft); }
input, select, textarea { width: 100%; font: 16px/1.4 var(--body); color: var(--ink); padding: 12px 14px; border-radius: 12px; border: 1.5px solid #DCC9A8; background: #fff; min-height: 48px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--maroon) 50%), linear-gradient(135deg, var(--maroon) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(201, 164, 92, .3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.day-q { border: 0; margin: 0 0 14px; padding: 14px; border-radius: 14px; }
.day-q.d1 { background: #F7E9EE; }
.day-q.d2 { background: #FBEEDD; }
.day-q legend { float: left; width: 100%; font-size: 16px; margin-bottom: 10px; padding: 0; }
.day-q legend small { display: block; font-size: 13.5px; }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; clear: both; }
.yn label { position: relative; cursor: pointer; }
.yn input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.yn span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 8px; border-radius: 12px; border: 1.5px solid #DCC9A8; background: #fff; font-weight: 700; font-size: 15px; transition: .15s; }
.yn input:checked + span { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.d2 .yn input:checked + span { background: #A8571E; border-color: #A8571E; }
.yn input:focus-visible + span { outline: 3px solid var(--gold-l); outline-offset: 2px; }
.travel { border-top: 1px dashed #DCC9A8; padding-top: 12px; }
.travel-title { font-family: var(--hand); font-size: 23px; color: var(--peacock); margin-bottom: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 12px 0 0; font-weight: 700; text-align: center; }
.form-status.err { color: #A3122A; }
.rsvp-done { position: relative; text-align: center; padding: 10px 0; }
.done-logo { width: 120px; margin: 0 auto 10px; }
.done-title { font-size: 32px; }
.done-note { font-size: 14px; color: var(--ink-soft); }
.burst { position: absolute; left: 50%; top: 30%; pointer-events: none; }
.burst i { position: absolute; width: 10px; height: 7px; border-radius: 60% 0 60% 0; animation: burst 1.9s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes burst { 0% { transform: none; } 55% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 240px)) rotate(calc(var(--r) * 2)); opacity: 0; } }
.faq-title { margin-top: 30px; }
.faq-list { margin-top: 10px; }
.faq-item { background: #fff; border-radius: 12px; margin-bottom: 8px; border: 1px solid rgba(201, 164, 92, .45); }
.faq-item summary { cursor: pointer; list-style: none; padding: 14px 42px 14px 14px; font-weight: 700; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--gold); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 14px 14px; margin: 0; font-size: 15.5px; }
.contact { text-align: center; margin-top: 14px; }
.sheet-foot { text-align: center; padding-top: 24px; }
.foot-logo { width: 170px; margin: 0 auto 6px; }

/* =========================================================
   SCENE ANIMATIONS (inside the paintings)
   ========================================================= */
.twinkle { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
.sway { animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { to { transform: translateY(1.5px); } }
.flame { transform-box: view-box; animation: flicker .7s ease-in-out infinite alternate; }
.flame.d1 { animation-duration: .9s; } .flame.d2 { animation-duration: .6s; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.86, 1.16); } }
.spark { animation: spark 2s ease-out infinite; }
@keyframes spark { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }
.bird { animation: fly 10s ease-in-out infinite alternate; }
@keyframes fly { to { transform: translate(36px, -8px); } }
.shimmer { animation: shimmer 3s ease-in-out infinite alternate; }
@keyframes shimmer { to { transform: translateX(8px); opacity: .55; } }
.float { animation: floaty 3s ease-in-out infinite alternate; }
@keyframes floaty { to { transform: translateY(-3px); } }
.beams { animation: beams 6s ease-in-out infinite alternate; }
@keyframes beams { to { opacity: .6; } }
.dance { transform-box: fill-box; transform-origin: 50% 100%; animation: dance 1.8s ease-in-out infinite alternate; }
.dance.d2 { animation-duration: 2.2s; animation-delay: -.6s; }
@keyframes dance { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg) translateX(2px); } }
.twirl { transform-box: fill-box; transform-origin: 50% 100%; animation: twirl 2.4s ease-in-out infinite; }
@keyframes twirl { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.petal { transform-box: fill-box; transform-origin: center; animation: petal 5s linear infinite; }
@keyframes petal { from { transform: translateY(-60px) rotate(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(150px) rotate(540deg); opacity: 0; } }
/* corridor: walking forward forever (each arch grows into the one in front) */
.corridor { animation: corridor 2.6s linear infinite; }
@keyframes corridor { to { transform: scale(1.3889); } }
.mote { animation: mote 6s ease-in-out infinite alternate; }
@keyframes mote { to { transform: translate(12px, -30px); opacity: .2; } }
.walkers .person { animation: bob .55s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2.5px); } }
.look-old, .look-new { transition: opacity .7s ease, filter .7s ease; }
.look-new { opacity: 0; }
.look-new.solo { opacity: 1; }
.walkers.changed .look-old { opacity: 0; filter: blur(3px); }
.walkers.changed .look-new { opacity: 1; }
.sparkles { opacity: 0; }
.walk.active .walkers.changed ~ .sparkles { opacity: 1; }
.walkers.changed ~ .sparkles .spark-out { animation: sparkOut 1.2s ease-out both; }
@keyframes sparkOut { from { transform: translate(0, 0) scale(.3); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }

/* =========================================================
   QUICK DETAILS PAGE
   ========================================================= */
.info-page { background: var(--paper); }
.info-hero { position: relative; overflow: hidden; text-align: center; padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 28px; background: linear-gradient(170deg, #2A170E, #5A2A1C 55%, #8E3E2A); color: #FCEBD0; }
.info-hero .names { color: #FCEBD0; }
.info-hero .names em { color: var(--gold-l); }
.info-hero .big-line { color: #F6E2C2; margin-bottom: 0; }
.info-hero .scribble { color: #F6B8CB; }
.back-link { position: relative; z-index: 2; display: inline-block; font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--gold-l); }
.info-logo { position: relative; z-index: 1; width: 170px; height: 170px; object-fit: contain; margin: 0 auto 8px; background: #F7F0E2; border-radius: 50%; padding: 20px; box-shadow: 0 0 0 4px var(--gold-l), var(--shadow); }
.wc-card { position: relative; z-index: 2; width: min(64vw, 250px); margin: 0 auto 10px; padding: 8px 8px 22px; background: #FBF7EF; transform: rotate(-2deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.wc-card img { width: 100%; aspect-ratio: 540 / 688; object-fit: cover; }
.wc-card::after { content: "S & S · Feb 2027"; position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-family: var(--hand); font-size: 17px; color: #8E5A4A; }
.info-hero h1, .info-hero p { position: relative; z-index: 2; }
.chips { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; background: rgba(36, 19, 11, .96); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--gold-l); border: 1px solid rgba(232, 207, 146, .4); }
.chips a.on { background: var(--gold-l); color: var(--teak); }
.info-main { padding: 0; }
.block { max-width: 680px; margin: 0 auto; padding: 46px 16px; scroll-margin-top: 56px; }
.block h2 { text-align: center; }
.block .eyebrow { text-align: center; }
.info-event { background: var(--tint); padding: 0 16px 36px; scroll-margin-top: 54px; }
.info-art { position: relative; height: 240px; margin: 0 -16px; overflow: hidden; }

.card { position: relative; max-width: 640px; margin: -30px auto 0; background: var(--paper); border-radius: 20px; box-shadow: var(--shadow); padding: 22px 18px 18px; }
.tour-link { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14.5px; color: var(--accent); }
.guestbook { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 24px 18px; border: 1px solid rgba(201, 164, 92, .45); }
.footer { text-align: center; padding: 30px 16px 60px; background: var(--paper-2); }
.footer .btn { margin-top: 8px; }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.petals i { position: absolute; top: -20px; width: 9px; height: 12px; border-radius: 70% 0 70% 0; opacity: .85; animation: fall linear infinite; }
@keyframes fall { to { transform: translate3d(var(--drift), 520px, 0) rotate(560deg); } }
.noscript { padding: 80px 16px; text-align: center; color: #fff; }

/* =========================================================
   WIDE SCREENS: painting on the left, paper on the right
   ========================================================= */
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 600px) {
  .art { right: 42%; height: 100%; }
  .sheet { left: 58%; top: 0; border-radius: 0; box-shadow: -10px 0 30px rgba(20, 8, 4, .35); }
  .stage.expanded .sheet { top: 0; }
  .handle { display: none; }
  .sheet-in { padding: 30px 34px 40px; }
  .track { max-width: 760px; margin: 4px auto 0; }
  .info-art { height: 340px; }
}
@media (max-width: 389px) { .nav-btn { min-width: 0; padding: 0 13px; font-size: 15px; } .nav-quick { font-size: 12.5px; } }
@media (max-height: 640px) and (max-width: 899px) and (orientation: portrait) {
  .art { height: 48%; }
  .sheet { top: calc(48% - 18px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .look-new { opacity: 1; } .look-old { display: none; }
}

/* =========================================================
   IN-PICTURE NAVIGATION (tap the gate, the boat, the arch...)
   ========================================================= */
.nav-tip { flex: 1; text-align: center; color: #F1DDB4; font-size: 13px; font-weight: 700; line-height: 1.25; padding: 0 4px; min-width: 0; }
.nav-quick { flex: 0 0 auto; }
.art-logo { position: absolute; top: 10px; left: 10px; z-index: 4; width: 66px; height: 66px; object-fit: contain; padding: 4px; border-radius: 50%; background: rgba(251, 245, 234, .92); box-shadow: 0 0 0 1.5px var(--gold), 0 6px 16px rgba(0, 0, 0, .35); }
.hotspot { position: absolute; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-dot { position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, #FFF8E0 0 30%, #F3D88E 60%, rgba(243, 216, 142, 0) 72%); box-shadow: 0 0 18px 6px rgba(255, 220, 140, .65); }
.hs-ring { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(255, 236, 180, .95); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.hs-label { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: rgba(27, 13, 7, .82); color: #FCEBD0; font: 700 13.5px var(--body); box-shadow: 0 0 0 1px rgba(232, 207, 146, .6); animation: hsIn .6s .5s both; }
.label-up .hs-label { top: auto; bottom: 58px; }
@keyframes hsIn { from { opacity: 0; transform: translate(-50%, -6px); } }
.hotspot:focus-visible .hs-dot { outline: 3px solid #fff; outline-offset: 4px; }
.stage.diving .art > .layer { animation: dive .75s cubic-bezier(.55, 0, .8, .2) forwards; }
.stage.diving .hotspot, .stage.diving .art-logo { opacity: 0; transition: opacity .2s; }
.stage.diving .sheet { transform: translateY(40%); opacity: 0; transition: transform .7s ease-in, opacity .5s; }
@keyframes dive { to { transform: scale(3.4); opacity: .15; filter: blur(2px); } }
@media (max-width: 360px) { .hs-label { font-size: 12px; } .nav-tip { font-size: 12px; } }

/* photo wall on the story page */
.wall-title { margin-top: 26px; font-size: 26px; text-align: center; }
.photo-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 8px; }
.polaroid { margin: 0; background: #fff; padding: 6px 6px 8px; box-shadow: var(--shadow); border-radius: 3px; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.polaroid figcaption { font-family: var(--hand); font-size: 17px; line-height: 1.15; color: var(--ink-soft); text-align: center; margin-top: 5px; }
.polaroid.t0 { transform: rotate(-2deg); } .polaroid.t1 { transform: rotate(1.6deg); } .polaroid.t2 { transform: rotate(1deg); } .polaroid.t3 { transform: rotate(-1.4deg); }
.chapter img { object-position: center 30%; }
@media (max-width: 899px) { .stage.expanded .hotspot, .stage.expanded .art-logo { opacity: 0; pointer-events: none; } }
.sheet { z-index: 6; }
/* sangeet drama */
.cold-spark { animation: coldSpark 1.4s ease-out infinite; }
@keyframes coldSpark { 0% { transform: translate(0, 0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--h)); opacity: 0; } }
.glitter { transform-box: fill-box; transform-origin: center; animation: glitter 7s linear infinite; }
@keyframes glitter { from { transform: translateY(-80px) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(220px) rotate(720deg); opacity: 0; } }
.fog { animation: fog 9s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translateX(26px); } }

/* =========================================================
   LANDING: the invitation envelope (North + South + Western)
   ========================================================= */
.landing { background: radial-gradient(ellipse at 50% 42%, #9A2334 0%, #64101F 52%, #2C050E 100%); display: block; perspective: none; cursor: default; overflow: hidden; }
.ld-silk { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(120deg, transparent 30%, rgba(255,220,180,.12) 48%, transparent 62%); }
.ld-border { position: absolute; left: 0; width: 100%; height: 62px; z-index: 2; }
.ld-border.t { top: 0; } .ld-border.b { bottom: 0; transform: scaleY(-1); }
.ld-toran { position: absolute; top: 44px; left: 0; width: 100%; height: 70px; z-index: 3; overflow: visible; }
.ld-sway { animation: ldSway 3.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes ldSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.ld-fit { position: absolute; left: 50%; top: 50%; width: 390px; height: 844px; margin: -422px 0 0 -195px; transform: scale(var(--s, 1)); z-index: 1; color: #F6E7C8; }
.ld-top { position: absolute; top: 108px; left: 0; right: 0; text-align: center; }
.hi-line { font-family: var(--indic); font-size: 26px; line-height: 1.6; padding: 4px 6px 0; display: inline-block; background: linear-gradient(180deg, #FFF0C2 0%, #E8C46A 45%, #B8862E 70%, #F3D88E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-top small { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #E8CF92; }
.ld-top small [lang="ta"] { letter-spacing: 0; }
.ld-env { position: absolute; left: 32px; top: 196px; width: 326px; height: 218px; perspective: 900px; }
.ld-env > svg, .ld-card, .ld-ribbon { position: absolute; }
.ld-back, .ld-front, .ld-deco { inset: 0; width: 100%; height: 100%; }
.ld-back { z-index: 1; }
.ld-env::before { content: ""; position: absolute; left: 6px; right: 6px; top: 14px; bottom: -10px; border-radius: 10px; background: rgba(0,0,0,.45); filter: blur(14px); }
.ld-card { z-index: 2; left: 16px; right: 16px; top: 10px; height: 198px; border-radius: 6px; overflow: hidden; text-align: center; padding: 28px 14px 0; color: #FCEBD0;
  background: radial-gradient(ellipse at 50% 35%, #1E7A5E, #0E4A38 70%, #08301F); box-shadow: 0 10px 30px rgba(0,0,0,.45); transform-origin: 50% 50%; }
.ld-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px), linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); pointer-events: none; }
.ld-card p { position: relative; z-index: 1; margin: 0; }
.ld-zari { position: absolute; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, rgba(120,80,20,.3) 0 2px, transparent 2px 5px), linear-gradient(180deg, #B8862E, #F3D88E 50%, #B8862E); }
.ld-zari.t { top: 0; } .ld-zari.b { bottom: 0; }
.ld-tri { position: absolute; left: 0; width: 100%; height: 14px; }
.ld-tri.t { top: 17px; } .ld-tri.b { bottom: 17px; transform: scaleY(-1); }
.ld-card-logo-ring { position: relative; z-index: 1; width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; background: #FBF5EA; padding: 6px; box-shadow: 0 0 0 2px #E8C46A, 0 0 0 5px #0E4A38, 0 0 0 6px #E8C46A, 0 0 18px 4px rgba(255,210,120,.35); }
.ld-card-logo { width: 100%; height: 100%; object-fit: contain; }
.ld-card-names { font: italic 600 31px/1.1 var(--display); margin-top: 6px !important; background: linear-gradient(180deg, #FFF0C2 0%, #E8C46A 45%, #B8862E 70%, #F3D88E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 4px; }
.ld-card-meta { font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F3D88E; margin-top: 4px !important; }
.ld-card-go { display: inline-block; margin-top: 8px !important; padding: 4px 14px; border-radius: 999px; font: 700 11px var(--body); color: #4E0F1A; background: linear-gradient(180deg, #F7DE94, #C49A44); }
.ld-shine { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255,245,210,.55), transparent); transform: skewX(-18deg); opacity: 0; }
.ld-rays { position: absolute; left: 50%; top: 170px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.28) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); }
.ld-burst { position: absolute; left: 195px; top: 140px; width: 0; height: 0; z-index: 9; pointer-events: none; }
.ld-burst i { position: absolute; opacity: 0; animation: ldBurst 1.6s cubic-bezier(.15,.7,.3,1) forwards; }
.ld-burst .pt { width: 10px; height: 7px; border-radius: 70% 0 70% 0; }
.ld-burst .sp { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 8px 2px rgba(255,220,140,.8); }
@keyframes ldBurst { 0% { opacity: 1; transform: translate(0,0) scale(.4); } 60% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 120px)) rotate(calc(var(--r) * 1.5)); } }
.ld-front { z-index: 3; pointer-events: none; }
.ld-flap { z-index: 4; left: 0; top: 0; width: 100%; height: 132px; transform-origin: 50% 0; }
.ld-ribbon { z-index: 5; left: 150px; width: 26px; top: 0; bottom: 0; background: linear-gradient(90deg, #E9D8B4, #FFF6E2, #D9C49A); box-shadow: 0 0 0 .6px #C9B48A; }
.ld-deco { z-index: 6; overflow: visible; pointer-events: none; }
.ld-seal { position: absolute; z-index: 7; left: 65px; top: 13px; width: 196px; height: 196px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ld-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-logo { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px; object-fit: contain; }
.ld-ping { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(255,230,170,.9); animation: ping 1.8s ease-out infinite; }
.ld-seal:focus-visible { outline: 3px solid #FFF0C2; outline-offset: 4px; border-radius: 50%; }
.ld-kolam { position: absolute; left: 45px; top: 432px; width: 300px; height: 30px; }
.ld-text { position: absolute; top: 458px; left: 0; right: 0; text-align: center; padding: 0 24px; }
.ld-text p { margin: 0; }
.ld-tog { font: italic 500 18px var(--display); color: #F6DDB8; }
.ld-names { font: italic 600 52px/1.05 var(--display); margin-top: 4px !important; background: linear-gradient(180deg, #FFF0C2 0%, #E8C46A 45%, #B8862E 70%, #F3D88E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-line { font: 600 21px/1.2 var(--display); color: #FCEBD0; margin-top: 4px !important; }
.ld-meta { margin-top: 10px !important; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #E8CF92; }
.ld-hint { display: inline-block; margin-top: 18px !important; padding: 10px 18px; border-radius: 999px; background: rgba(20,4,8,.6); color: #FCEBD0; font-weight: 700; font-size: 14px; box-shadow: 0 0 0 1px rgba(232,207,146,.6); }
.ld-skip { display: block; margin-top: 12px; color: #F6D9A8; font-size: 13.5px; }
.ld-lamp { position: absolute; top: 640px; width: 54px; height: 130px; overflow: visible; }
.ld-lamp.l { left: 14px; } .ld-lamp.r { right: 14px; }
.ld-flick { animation: flicker .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }

/* opening sequence */
.landing.opening { pointer-events: none; }
.landing.opening .ld-ping, .landing.opening .ld-hint { opacity: 0; }
.landing.opening .ld-seal { animation: ldSeal .6s ease-in forwards; }
.landing.opening .ld-ribbon, .landing.opening .ld-deco { animation: ldFade .4s .2s ease forwards; }
.landing.opening .ld-flap { animation: ldFlap .75s .45s ease-in-out forwards; }
.landing.opening .ld-card { animation: ldCard 1.6s 1.15s cubic-bezier(.3,.6,.25,1) forwards; }
.landing.opening .ld-shine { animation: ldShine 1s 2.6s ease-in-out forwards; }
@keyframes ldShine { 0% { opacity: 1; left: -60%; } 100% { opacity: 1; left: 130%; } }
.landing.opening .ld-rays { animation: ldRays 3s 1.2s ease-out forwards; }
@keyframes ldRays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: .85; transform: rotate(40deg) scale(1.1); } }
.landing.opening .ld-fit { z-index: 5; }
.landing.leaving .ld-fit { animation: ldOut .8s ease-in forwards; }
.landing.opening .ld-card { pointer-events: auto; cursor: pointer; }
.ld-card-go { position: relative; }
.ld-card-go::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; box-shadow: 0 0 14px 4px rgba(255,220,140,.5); opacity: 0; pointer-events: none; }
.landing.ready .ld-card-go::after { display: none; }
.landing.ready .ld-card-go { box-shadow: 0 0 10px 2px rgba(255,214,130,.55); }
.landing.ready .ld-tapcard span { animation: tapPulse 1.8s ease-in-out infinite; }
@keyframes tapPulse { 50% { box-shadow: 0 0 0 1px rgba(232,207,146,.9), 0 0 18px 4px rgba(255,210,120,.45); } }
@keyframes goPulse { 50% { opacity: 1; } }
.ld-tapcard { position: absolute; left: 0; right: 0; top: 452px; text-align: center; opacity: 0; transition: opacity .6s; z-index: 9; }
.ld-tapcard span { display: inline-block; padding: 10px 18px; border-radius: 999px; background: rgba(20,4,8,.6); color: #FCEBD0; font-weight: 700; font-size: 14px; box-shadow: 0 0 0 1px rgba(232,207,146,.6); }
.landing.ready .ld-tapcard { opacity: 1; }
.landing.ready .ld-text { opacity: 0; transition: opacity .5s; }
.doors.landing.opening { background: radial-gradient(ellipse at 50% 42%, #9A2334 0%, #64101F 52%, #2C050E 100%); }
.doors.landing.leaving { animation: ldFade .65s .3s ease-in forwards; }
@keyframes ldSeal { 30% { transform: scale(1.12) rotate(-6deg); } 100% { transform: scale(.3) rotate(25deg) translateY(60px); opacity: 0; } }
@keyframes ldFade { to { opacity: 0; } }
@keyframes ldFlap { 0% { transform: rotateX(0); z-index: 4; } 49% { z-index: 4; } 50% { z-index: 1; } 100% { transform: rotateX(180deg); z-index: 1; } }
@keyframes ldCard { 0% { transform: translateY(0); z-index: 2; } 50% { transform: translateY(-205px) rotate(-1.5deg); z-index: 2; } 51% { z-index: 8; } 80% { transform: translateY(-112px) rotate(1deg) scale(1.2); z-index: 8; } 100% { transform: translateY(-116px) rotate(0) scale(1.16); z-index: 8; } }
@keyframes ldOut { to { transform: scale(calc(var(--s, 1) * 1.12)); opacity: 0; } }
@keyframes ldBg { to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .landing.opening { opacity: 0; } }

/* postcard on the quick page */
.postcard { position: relative; z-index: 2; width: min(92vw, 440px); aspect-ratio: 3 / 2; margin: 4px auto 14px; padding: 8px; background: #FBF5EA; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 18px 34px rgba(0,0,0,.45); overflow: hidden; }
.pc-photo { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; object-position: center 42%; border-radius: 2px; }
.pc-shade { position: absolute; inset: 8px; background: linear-gradient(180deg, rgba(20,8,20,.15) 0%, rgba(20,8,20,0) 35%, rgba(20,8,20,.55) 100%); }
.postcard p { position: absolute; left: 0; right: 0; margin: 0; text-align: center; }
.pc-greet { top: 30%; font-family: var(--hand); font-size: clamp(22px, 6.5vw, 30px); color: #FFF3D6; text-shadow: 0 2px 6px rgba(0,0,0,.6); transform: rotate(-4deg); }
.pc-big { top: 42%; font-family: var(--display); font-weight: 700; font-size: clamp(54px, 17vw, 84px); line-height: 1; letter-spacing: .04em; background: linear-gradient(180deg, #FFF0C2 0%, #F3C04A 50%, #D9741A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #4E0F1A; filter: drop-shadow(3px 4px 0 rgba(40,8,12,.8)); }
.pc-sub { bottom: 10%; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #FCEBD0; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.pc-stamp { position: absolute; top: 14px; right: 14px; width: 18%; aspect-ratio: 4 / 5; padding: 6px; transform: rotate(5deg); background: radial-gradient(circle at 4px 4px, transparent 2.6px, #FBF5EA 3px) -4px -4px / 8px 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.pc-stamp img { display: block; width: 100%; height: 100%; object-fit: contain; background: #F7EEDB; border: 1px solid #C9A45C; padding: 2px; }
.pc-mark { position: absolute; top: 14px; right: 17%; width: 26%; opacity: .5; transform: rotate(-10deg); }

/* postcard back on the quick page */
.pcb { position: relative; z-index: 2; width: min(92vw, 460px); aspect-ratio: 3 / 2; margin: 4px auto 16px; padding: 3.4%; display: grid; grid-template-columns: 1fr 1fr; gap: 3.4%; background: #FBF4E4; background-image: repeating-linear-gradient(0deg, rgba(150,110,60,.05) 0 1px, transparent 1px 4px); border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 18px 34px rgba(0,0,0,.45); text-align: left; }
.pcb-photo { border: 5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transform: rotate(-2deg); overflow: hidden; min-height: 0; }
.pcb-photo img { width: 100%; height: 100%; object-fit: cover; }
.pcb-right { position: relative; border-left: 1px solid #C9B48A; padding-left: 9%; color: #3A1E10; min-width: 0; }
.pcb-hdr { position: absolute; top: 0; left: 9%; font: 700 9px var(--body); letter-spacing: .2em; color: #8A6A3A; }
.pcb-stamp { position: absolute; top: 0; right: 0; width: 30%; aspect-ratio: 5 / 6; padding: 5px; background: radial-gradient(circle at 4px 4px, transparent 2.6px, #fff 3px) -4px -4px / 8px 8px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); transform: rotate(4deg); }
.pcb-stamp img { display: block; width: 100%; height: 100%; object-fit: contain; background: #F3E3C4; border: 1px solid #C9A45C; }
.pcb-mark { position: absolute; top: 4%; right: 24%; width: 44%; opacity: .55; transform: rotate(-12deg); }
.pcb .pcb-msg { position: static; margin: 38% 0 0; font: 600 clamp(14px, 4.4vw, 19px)/1.15 var(--hand); color: #5A2410; text-align: left; transform: none; }
.pcb-addr { position: absolute; left: 9%; right: 0; bottom: 2%; }
.pcb-addr div { border-bottom: 1px solid #B9A07A; padding-top: 4px; font: 600 clamp(12px, 3.6vw, 16px)/1.2 var(--hand); color: #2A3A6A; }

/* once the card has settled, stop animating it so the browser redraws it sharp at full size */
.landing.ready .ld-card { animation: none; transform: translateY(-116px) scale(1.16); z-index: 8; will-change: auto; }
.landing.ready .ld-flap { animation: none; transform: rotateX(180deg); z-index: 1; }
.landing.ready .ld-seal, .landing.ready .ld-ribbon, .landing.ready .ld-deco { animation: none; opacity: 0; }
.landing.ready .ld-burst { display: none; }
.ld-card, .ld-card * { -webkit-font-smoothing: antialiased; }
.sync { transform-box: fill-box; transform-origin: 50% 100%; animation: sync 1s ease-in-out infinite alternate; }
@keyframes sync { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }
/* haldi: tap spot stands out against the bright flowers */
.theme-haldi .hs-dot { background: radial-gradient(circle, #FFF8E0 0 28%, #8E1A2E 34% 58%, rgba(142,26,46,0) 70%); box-shadow: 0 0 0 2px #FFF3D6, 0 0 14px 4px rgba(142,26,46,.55); }
.theme-haldi .hs-ring { border-color: #8E1A2E; }
/* sangeet: the couple's showstopper on stage */
.bride-spin { transform-box: fill-box; transform-origin: 50% 100%; animation: brideSpin 2.2s ease-in-out infinite; }
@keyframes brideSpin { 0%, 30% { transform: scaleX(1) translateY(0); } 45% { transform: scaleX(-1) translateY(-4px); } 60%, 100% { transform: scaleX(1) translateY(0); } }
.groom-move { transform-box: fill-box; transform-origin: 50% 100%; animation: groomMove 1.1s ease-in-out infinite alternate; }
@keyframes groomMove { from { transform: rotate(-6deg) translateX(-2px); } to { transform: rotate(6deg) translateX(2px) translateY(-3px); } }
/* shaadi flower showers (options) */
.toss { transform-box: fill-box; transform-origin: 50% 100%; }
.toss.arc { animation: toss 2s ease-in-out infinite; }
.toss.burst { animation: tossBurst 4s ease-in-out infinite; }
.toss.rain { animation: toss 2.4s ease-in-out infinite; }
@keyframes toss { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-4deg) translateY(-3px); } 90% { transform: rotate(3deg); } }
@keyframes tossBurst { 0%, 100% { transform: rotate(0); } 5% { transform: translateY(-5px) rotate(-5deg); } 12% { transform: rotate(3deg); } 20% { transform: rotate(0); } }
.pa-x.arc, .pa-y.arc { animation-duration: 2s; animation-iteration-count: infinite; }
.pa-x.burst, .pa-y.burst { animation-duration: 4s; animation-iteration-count: infinite; }
.pa-x { animation-name: paX; animation-timing-function: linear; }
.pa-y { animation-name: paY; animation-timing-function: ease-in; }
@keyframes paX { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(var(--dx)); } }
@keyframes paY { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: 1; } 20% { transform: translateY(var(--h)); animation-timing-function: ease-in; } 45% { transform: translateY(var(--dy)); opacity: 1; } 60%, 100% { transform: translateY(calc(var(--dy) + 12px)); opacity: 0; } }
.petal.rain { animation-name: petalRain; }
@keyframes petalRain { from { transform: translateY(-20px) rotate(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(170px) rotate(540deg); opacity: 0; } }

/* the tilted polaroids must not make the text panel scroll sideways */
.sheet { overflow-x: hidden; }
.photo-wall { padding: 4px 6px; }
@media (orientation: landscape) and (max-height: 600px) { .sheet-in { padding: 14px 20px 30px; } .walk .sheet-in h2, .ev-title { font-size: 36px; } }
@media (orientation: landscape) and (max-height: 600px) { .names.one { font-size: clamp(30px, 6vw, 44px); white-space: normal; } }