/* ===== Chapters 5–7, numbers, finale, dialogs ===== */

/* ---------- ch5 · tattoo ---------- */
.arm{ display:block; width:100%; max-width:560px; margin:0 auto 30px; overflow:visible; filter:drop-shadow(0 20px 30px rgba(90,50,30,.22)) }
.ink{ font-family:var(--script); fill:rgba(43,31,28,0); stroke:#2B1F1C; stroke-width:1.1; stroke-dasharray:1400; stroke-dashoffset:1400 }
.written .ink{ animation:ink 4.2s .3s forwards }
@keyframes ink{ 72%{ stroke-dashoffset:0; fill:rgba(43,31,28,0) } 100%{ stroke-dashoffset:0; fill:rgba(43,31,28,.88) } }
.tattoo-row{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center }
.tattoo-row .polaroid img{ aspect-ratio:3/4; object-position:50% 70% }
.tilt-l{ --r:-4deg } .tilt-l.reveal{ transform:translateY(28px) rotate(-4deg) } .tilt-l.reveal.in{ transform:rotate(-4deg) }
.np-card{ padding:16px 16px 12px; background:#FFFEFA; border-radius:3px; font-family:var(--hand); color:#1F1A18; box-shadow:0 18px 40px rgba(60,30,20,.2) }
.np-card.reveal{ transform:translateY(28px) rotate(3deg) } .np-card.reveal.in{ transform:rotate(3deg) }
.np-art{ aspect-ratio:1; border:2px solid #1F1A18; background:#FFF; display:grid; place-items:center }
.np-art svg{ width:88%; height:88% }
.np-meta{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:8px }
.np-title{ display:block; font-size:25px; line-height:.9 } .np-sub{ display:block; font-size:19px; line-height:1 }
.np-bar{ position:relative; height:2px; margin:12px 0 8px; background:#1F1A18 }
.np-bar i{ position:absolute; left:0; top:-3px; width:8px; height:8px; border-radius:50%; background:#1F1A18 }
body.playing .np-bar i{ animation:np 30s linear infinite }
@keyframes np{ to{ left:calc(100% - 8px) } }
.np-ctrl{ display:flex; justify-content:space-between; align-items:center }
.np-ctrl > svg{ width:20px; height:20px }
.np-play{ width:36px; height:36px; padding:0; border:0; background:none; cursor:pointer }
.np-play svg{ width:100%; height:100% }
.np-play .i-pause, body.playing .np-play .i-play{ display:none } body.playing .np-play .i-pause{ display:block }
.np-cap{ margin:6px 0 0; text-align:center; font-size:17px; color:var(--rose) }
@media (max-width:520px){ .tattoo-row{ grid-template-columns:1fr; max-width:280px; margin:0 auto } }

/* ---------- interlude · garba ---------- */
.garba{ background:linear-gradient(160deg,#7A1426,#4A0D18) }
.garba-dots{ position:absolute; inset:0; opacity:.22;
  background:radial-gradient(circle,#F3D9A6 1.4px,transparent 2px) 0 0/18px 18px, radial-gradient(circle,#F3D9A6 1.4px,transparent 2px) 9px 9px/18px 18px }
.garba-lights{ position:absolute; top:0; left:0; width:100%; height:120px }
.garba-photos{ position:relative; height:540px }
.mirror-frame{ position:absolute; margin:0; padding:14px; border-radius:6px;
  background:radial-gradient(circle,#FFF 0 3px,#C0C6CC 3.5px 5px,#C9A14A 5.5px 6.5px,transparent 7px) 0 0/22px 22px, #8A1A2E;
  box-shadow:0 26px 50px rgba(0,0,0,.35) }
.mirror-frame img{ width:100%; object-fit:cover; border-radius:2px }
.f1{ left:0; top:0; width:56%; transform:rotate(-4deg) } .f1 img{ aspect-ratio:3/4; object-position:50% 45% }
.f2{ right:0; bottom:0; width:58%; transform:rotate(5deg) } .f2 img{ aspect-ratio:1 }
@media (max-width:820px){ .garba-photos{ height:420px } }

/* ---------- ch6 · families ---------- */
.swap{ display:block; opacity:0; transform:translateY(10px); filter:blur(4px); transition:opacity 1s, transform 1s, filter 1s }
.swap b{ font-weight:600 }
.swap.swapped{ opacity:1; transform:none; filter:none }
.unite{ position:relative; width:min(430px,100%); margin:30px auto 0; aspect-ratio:4/5 }
.u-side{ position:absolute; top:0; bottom:0; width:50%; overflow:hidden; opacity:0; transition:transform 1.5s cubic-bezier(.2,.8,.2,1), opacity 1s }
.u-k{ left:0; border-radius:215px 0 0 18px; transform:translateX(-70%) rotate(-8deg);
  background:linear-gradient(90deg,transparent 0 12px,var(--gold) 12px 15px,transparent 15px 19px,var(--gold) 19px 28px,transparent 28px), #F6EEDC }
.u-g{ right:0; border-radius:0 215px 18px 0; transform:translateX(70%) rotate(8deg);
  background:radial-gradient(circle,#F4E3C3 1.4px,transparent 2px) 0 0/14px 14px, radial-gradient(circle,#F4E3C3 1.4px,transparent 2px) 7px 7px/14px 14px, #7A1426 }
.u-mirrors{ position:absolute; top:0; bottom:0; right:8px; width:20px; background:radial-gradient(circle,#FFF 0 3px,#C0C6CC 3.5px 5px,var(--gold) 5.5px 6.5px,transparent 7px) 0 0/20px 22px }
.u-leaf{ position:absolute; left:-40px; bottom:-30px; width:180px; height:300px; opacity:.9; transform:rotate(12deg) }
.u-photo{ position:absolute; inset:36px; margin:0; overflow:hidden; border-radius:180px 180px 10px 10px; opacity:0; transform:scale(.85);
  box-shadow:0 0 0 3px var(--gold), 0 0 0 7px #FFF9EC, 0 20px 40px rgba(0,0,0,.25); transition:opacity 1.2s 1s, transform 1.2s 1s }
.u-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.u-toran{ position:absolute; left:-6%; width:112%; top:-26px; opacity:0; transform:translateY(-30px); transition:opacity 1s 1.9s, transform 1s 1.9s }
.u-cap{ position:absolute; left:0; right:0; bottom:-54px; margin:0; text-align:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-d) }
.u-cap em{ display:block; font-family:var(--script); font-size:26px; letter-spacing:0; text-transform:none; font-style:normal; color:var(--maroon) }
.unite.in .u-k, .unite.in .u-g{ opacity:1; transform:none }
.unite.in .u-photo{ opacity:1; transform:none }
.unite.in .u-toran{ opacity:1; transform:none }

/* ---------- ch7 · udaipur ---------- */
.udaipur{ min-height:115vh; display:flex; align-items:center }
.udaipur .inner{ width:min(1180px, calc(100% - 48px)) }
.udaipur .bg svg{ position:absolute; inset:0; width:100%; height:100% }
.u-card{ padding:34px 34px 30px; border-radius:18px; background:rgba(251,246,236,.94); box-shadow:0 0 0 1px rgba(201,161,74,.7), 0 30px 60px rgba(40,10,20,.3) }
.u-card h2{ font-size:clamp(36px,4vw,54px) }
.board{ position:relative; height:580px }
.board .polaroid{ position:absolute; width:clamp(150px,15vw,200px); padding:10px 10px 40px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:box-shadow .2s }
.board .polaroid.lifted{ cursor:grabbing; box-shadow:0 34px 60px rgba(0,0,0,.4) }
.board .polaroid figcaption{ font-size:20px }
.drag-hint{ position:absolute; left:0; right:0; bottom:-34px; margin:0; text-align:center; font-family:var(--hand); font-size:22px; color:#FFF1D6; text-shadow:0 2px 10px rgba(40,10,20,.6) }
@media (max-width:820px){ .board{ height:520px } .board .polaroid{ width:138px } }

/* ---------- numbers ---------- */
.numbers{ position:relative; padding:40px 0 20px }
.nums{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter) }
.num-group{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:center }
.num{ margin:0 }
.num b{ display:block; font-family:var(--serif); font-size:clamp(42px,4.6vw,62px); font-weight:500; line-height:1; color:var(--maroon) }
.num small{ display:block; margin-top:8px; font-size:11.5px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }
@media (max-width:820px){ .nums{ grid-template-columns:1fr; row-gap:34px } }

/* ---------- finale ---------- */
.final{ background:linear-gradient(180deg,rgba(247,235,213,0) 0%,#F7EBD5 30%,#F2DFBD 100%) }
.final-head{ align-items:end }
.final-head > div{ text-align:right }
.final-head .title-script{ padding-bottom:14px }
.recap{ display:grid; row-gap:20px; margin:50px 0 30px }
.recap-row{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter); align-items:baseline; margin:0; font-family:var(--serif); font-size:clamp(20px,2vw,26px); line-height:1.35 }
.recap-row .from{ text-align:right; color:var(--ink-2) }
.recap-row .to{ font-style:italic; color:var(--maroon) }
.waypoint{ display:none }
.mandap-wrap{ position:relative; width:min(760px,100%); margin:10px auto 0 }
.mandap{ display:block; width:100%; height:auto; overflow:visible }
.m-label{ font-family:var(--serif); font-size:22px; letter-spacing:.3em; text-transform:uppercase; fill:var(--gold-d) }
.m-glow{ opacity:0; transition:opacity 2s }
.tie{ opacity:0; transform-box:fill-box; transform-origin:center }
.final.tied .m-glow{ opacity:1 }
.final.tied .tie{ animation:tie 1.4s cubic-bezier(.3,1.6,.5,1) forwards, beat 1.6s 1.6s ease-in-out infinite }
@keyframes tie{ from{ opacity:0; scale:.2 } to{ opacity:1; scale:1 } }
@keyframes beat{ 0%,100%{ scale:1 } 15%{ scale:1.18 } 30%{ scale:1 } 45%{ scale:1.12 } }
#threadEnd{ position:absolute; left:50%; top:55%; width:1px; height:1px }
.flame{ transform-box:fill-box; transform-origin:50% 100%; animation:flicker 1.3s ease-in-out infinite alternate }
@keyframes flicker{ 50%{ transform:scaleY(1.12) scaleX(.92) } 100%{ transform:scaleY(.94) skewX(3deg) } }
.bulb{ fill:#FFE3A3; filter:drop-shadow(0 0 4px #FFD27A); animation:bulb 2.2s ease-in-out infinite alternate }
@keyframes bulb{ to{ opacity:.35 } }
.closing{ max-width:720px; margin:20px auto 0; text-align:center }
.closing .micro{ margin:10px 0 28px }
.invite{ position:relative; max-width:860px; margin:90px auto 0; padding:56px clamp(20px,5vw,64px); text-align:center; border-radius:26px; background:#FFFCF4;
  box-shadow:0 0 0 1.5px var(--gold), 0 0 0 10px #FFFCF4, 0 0 0 11.5px rgba(201,161,74,.6), 0 40px 90px rgba(90,40,20,.18) }
.inv-names{ margin:10px 0 0; font-family:var(--script); font-size:clamp(54px,8vw,96px); line-height:1.05; color:var(--maroon) }
.inv-names i{ font-style:normal; color:var(--gold-d) }
.inv-req{ font-family:var(--serif); font-style:italic; font-size:21px; color:var(--ink-2); margin:6px 0 16px }
.inv-date{ margin:0; font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); font-weight:600; letter-spacing:.04em; color:var(--ink) }
.inv-venue{ margin:4px 0 0; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d) }
.countdown{ display:flex; justify-content:center; gap:clamp(8px,3vw,26px); margin:30px 0 8px }
.countdown div{ min-width:70px; padding:12px 6px; border-radius:14px; background:#FBF1DE; border:1px solid rgba(201,161,74,.4) }
.countdown b{ display:block; font-family:var(--serif); font-size:clamp(32px,4vw,44px); font-weight:500; line-height:1; color:var(--maroon); font-variant-numeric:tabular-nums }
.countdown small{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2) }
.events{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:34px 0 }
@media (max-width:560px){ .events{ grid-template-columns:1fr } }
.event{ position:relative; overflow:hidden; padding:22px 16px 26px; border-radius:16px; border:1px solid rgba(201,161,74,.55); background:#FFF8EA; text-align:center }
.event::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:10px }
.event.kerala::after{ background:linear-gradient(var(--gold) 0 2px,#F6EEDC 2px 4px,var(--gold) 4px 10px) }
.event.gujarat::after{ background:radial-gradient(circle,#F4E3C3 1.2px,transparent 1.8px) 0 0/8px 8px, var(--maroon) }
.event h4{ margin:.15em 0; font-family:var(--serif); font-size:24px; line-height:1.1; font-weight:600; color:var(--maroon) }
.event p{ margin:0; font-size:14px; line-height:1.5 }
.event .ev-date{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d) }
.event a{ color:var(--maroon); font-size:13px }
.cta-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
@media (max-width:820px){
  .final-head > div, .recap-row .from{ text-align:left }
  .recap-row{ grid-template-columns:1fr }
  .waypoint{ display:block; position:relative; left:-26px; width:1px; height:1px }
  .invite{ margin-left:-30px }
}

/* ---------- footer ---------- */
.foot{ position:relative; padding:70px 24px 90px; text-align:center; color:#F6E7C8; background:radial-gradient(circle,rgba(243,217,166,.2) 1.3px,transparent 2px) 0 0/18px 18px, linear-gradient(160deg,#7A1426,#420B15) }
.foot p{ margin:4px 0 } .foot-script{ font-family:var(--script); font-size:48px; color:var(--gold-l) } .foot-small{ font-size:13px; opacity:.7 }

/* ---------- lightbox + dialog ---------- */
#lightbox{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:24px; background:rgba(20,8,12,.88) }
#lightbox figure{ margin:0; padding:14px 14px 56px; background:#FFF; position:relative; max-width:min(92vw,720px) }
#lightbox img{ max-height:76vh; width:auto; margin:0 auto }
#lightbox figcaption{ position:absolute; left:0; right:0; bottom:12px; text-align:center; font-family:var(--hand); font-size:28px }
#lightbox button{ position:absolute; top:16px; right:20px; border:0; background:none; color:#FFF; font-size:40px; cursor:pointer }
#rsvp{ width:min(460px,92vw); padding:0; border:0; border-radius:22px; background:#FFFCF4; color:var(--ink); box-shadow:0 0 0 1.5px var(--gold), 0 40px 90px rgba(0,0,0,.4) }
#rsvp::backdrop{ background:rgba(30,8,14,.6); backdrop-filter:blur(3px) }
#rsvpForm{ position:relative; display:grid; gap:14px; padding:34px 30px 28px }
#rsvpForm h3{ margin:0; font-family:var(--serif); font-size:32px; font-weight:500; line-height:1.1; color:var(--maroon) }
#rsvpForm label{ display:grid; gap:4px; font-size:13px; letter-spacing:.06em; color:var(--ink-2) }
#rsvpForm input:not([type=radio]), #rsvpForm select, #rsvpForm textarea{ font:inherit; font-size:16px; padding:10px 12px; border-radius:10px; border:1px solid rgba(201,161,74,.6); background:#FFF; color:var(--ink) }
#rsvpForm .choice{ display:grid; gap:6px } #rsvpForm .choice label{ display:flex; gap:8px; align-items:center; font-size:15px; letter-spacing:0 }
#rsvpForm .btn{ justify-content:center }
.d-close{ position:absolute; top:10px; right:14px; border:0; background:none; font-size:30px; cursor:pointer; color:var(--ink-2) }
.d-note{ margin:0; text-align:center; font-family:var(--hand); font-size:20px; color:var(--rose) }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  *, *::before, *::after{ animation-duration:.01s !important; animation-iteration-count:1 !important; transition-duration:.01s !important }
}