/* DW Invitation Studio — Save the Date runtime. One 9:16 painted plate, everything sized in cqw so it scales as one piece. */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-var-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-var.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
:root { --ease: cubic-bezier(.22,.61,.36,1); --serif: "Cormorant", "Bodoni 72", Didot, Georgia, "Noto Serif Devanagari", serif; --sans: "Jost", "Avenir Next", system-ui, "Noto Sans Devanagari", sans-serif; --caps: "Cinzel", var(--serif); }
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { background: var(--tone2); overflow: hidden; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; display: grid; place-items: center; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.backdrop { position: fixed; inset: -8%; background: var(--plate) center/100% 100%; filter: blur(22px) saturate(1.05); transform: scale(1.12); }

.card { position: relative; height: 100svh; aspect-ratio: 9/16; max-width: 100vw; container-type: size; overflow: hidden; background: var(--plate) center/100% 100% no-repeat; box-shadow: 0 0 80px rgba(0,0,0,.35); animation: cardin 1.2s var(--ease) both; }
/* tall phones: let the painted plate stretch up to 9% taller rather than letterbox — imperceptible on illustration, and every position is % / cqw so nothing drifts */
@media (max-aspect-ratio: 9/16) { .card { width: 100vw; aspect-ratio: auto; height: min(100svh, calc(100vw * 1.94)); } }
@keyframes cardin { from { opacity: 0; transform: scale(1.04); } }

/* ambient layers painted over the flat plate */
.shimmer { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--sh) * 1%); overflow: hidden; mix-blend-mode: soft-light; pointer-events: none; }
.shimmer::before, .shimmer::after { content: ""; position: absolute; inset: 0 -60%; background: repeating-linear-gradient(100deg, transparent 0 5cqw, rgba(255,255,255,.75) 6cqw 6.6cqw, transparent 7.4cqw 13cqw); animation: drift 9s linear infinite; }
.shimmer::after { animation-duration: 14s; animation-direction: reverse; opacity: .6; background-size: 140% 100%; }
@keyframes drift { to { transform: translateX(26cqw); } }
.flame { position: absolute; width: 16cqw; height: 16cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,150,.95), rgba(255,170,60,.5) 32%, transparent 68%); mix-blend-mode: screen; pointer-events: none; animation: flick 1.7s ease-in-out infinite alternate; }
@keyframes flick { 0% { opacity: .55; scale: .92; } 45% { opacity: .9; scale: 1.04; } 100% { opacity: .7; scale: .97 1.06; } }
.sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,250,235,.55) 50%, transparent 60%); transform: translateX(-120%); }
.revealed .sweep { animation: sweep 1.8s var(--ease) .1s; } @keyframes sweep { to { transform: translateX(120%); } }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

/* the clear paper area */
.box { position: absolute; left: calc(var(--bl) * 1%); top: calc(var(--bt) * 1%); right: calc((100 - var(--br)) * 1%); bottom: calc((100 - var(--bb)) * 1%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; text-align: center; z-index: 5; }
.rise { opacity: 0; transform: translateY(2.4cqw); animation: rise 1.1s var(--ease) both; animation-delay: calc(.5s + var(--i, 0) * .18s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.t-title { font: italic 500 10.5cqw/1 var(--serif); letter-spacing: -.01em; }
.t-names { font: 500 4.5cqw/1.2 var(--caps); letter-spacing: .2em; text-transform: uppercase; }
.t-names i { font: italic 400 1.15em var(--serif); letter-spacing: 0; text-transform: none; margin: 0 .35em; color: var(--ink2); }
:lang(hi) .t-names { font: 600 6.2cqw/1.3 var(--serif); letter-spacing: .02em; }
.t-sub, .t-follow { font: 400 3.5cqw/1.35 var(--serif); letter-spacing: .06em; }
.t-follow { font-style: italic; }
.late { opacity: 0; transform: translateY(2cqw); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(.3s + var(--i, 0) * .2s); }
.revealed .late { opacity: 1; transform: none; }
.hint { font: 500 2.5cqw var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--ink2); animation: hint 2.4s ease-in-out infinite; transition: opacity .5s; min-height: 1.4em; }
@keyframes hint { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.revealed .hint { opacity: 0 !important; animation: none; height: 0; min-height: 0; margin-top: -2.4cqw; }
.mech { position: relative; display: grid; place-items: center; width: 100%; }
.date { font: 500 9cqw/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.date s { text-decoration: none; opacity: .45; margin: 0 .28em; font-weight: 400; }
.month { font: 500 3.6cqw var(--caps); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; }

.actions { display: flex; gap: 2cqw; margin-top: 1cqw; }
.actions button { padding: 2.1cqw 3.6cqw; border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 10cqw; font: 500 2.3cqw var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: background .4s, color .4s; }
.actions button:hover { background: var(--ink); color: #fffaf0; }
.ctl { position: absolute; z-index: 30; top: 3cqw; right: 3cqw; display: flex; gap: 1.6cqw; }
.ctl button { width: 9cqw; height: 9cqw; min-width: 30px; min-height: 30px; border-radius: 50%; background: rgba(255,252,244,.82); border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(6px); font: 500 2.6cqw var(--sans); display: grid; place-items: center; color: var(--ink); }
.bars { display: flex; gap: .5cqw; align-items: flex-end; height: 3.2cqw; } .bars i { width: .55cqw; min-width: 2px; height: 30%; background: currentColor; }
.on .bars i { animation: bar 1s ease-in-out infinite; animation-delay: calc(var(--i) * -.23s); } @keyframes bar { 0%,100% { height: 25%; } 50% { height: 100%; } }
.by { position: absolute; z-index: 6; left: 0; right: 0; bottom: 1.6cqw; text-align: center; font: 500 1.9cqw var(--caps); letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); opacity: .85; pointer-events: none; }
.embed .by, .embed .actions { display: none; }

/* ---------- calendar (tap the day, heart draws) ---------- */
.cal { display: grid; gap: 2.6cqw; justify-items: center; }
.cal-row { display: grid; grid-template-columns: repeat(3, 13cqw); justify-items: center; align-items: center; }
.cal-wd { font: italic 400 3.3cqw var(--serif); }
.cal-d { position: relative; font: 500 6.4cqw/1 var(--serif); font-variant-numeric: lining-nums; width: 13cqw; height: 13cqw; display: grid; place-items: center; border-radius: 50%; transition: transform .5s var(--ease), opacity .8s; }
.cal-d:hover { transform: scale(1.08); }
.cal-d.nope { animation: nope .45s; } @keyframes nope { 20%,60% { transform: translateX(-1.2cqw); } 40%,80% { transform: translateX(1.2cqw); } }
.cal-d svg { position: absolute; inset: -22%; width: 144%; height: 144%; overflow: visible; pointer-events: none; }
.cal-d .hp { fill: color-mix(in srgb, var(--ink2) 0%, transparent); stroke: var(--ink2); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease), fill 1.2s ease 1.2s; }
.found .cal-d.is .hp { stroke-dashoffset: 0; fill: color-mix(in srgb, var(--ink2) 14%, transparent); }
.found .cal-d.is { animation: beat 1.1s ease-in-out 1.7s 2; } @keyframes beat { 50% { transform: scale(1.12); } }
.found .cal-d:not(.is), .found .cal-wd:not(.is) { opacity: .35; }
.cal-hintpulse .cal-d.is { animation: beat 1.2s ease-in-out infinite; }
.thread { width: 1px; height: 0; border-left: 1px dashed var(--ink2); transition: height 1.2s var(--ease) 1.3s; } .found .thread { height: 7cqw; }

/* ---------- scratch ---------- */
.scr { position: relative; width: 58cqw; height: 22cqw; display: grid; place-items: center; border-radius: 2cqw; }
.scr .date { font-size: 9.6cqw; }
.scr canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2cqw; touch-action: none; cursor: grab; transition: opacity 1s var(--ease); box-shadow: 0 1cqw 2.6cqw rgba(60,40,10,.28); }
.scr.clear canvas { opacity: 0; pointer-events: none; }

/* ---------- lanterns ---------- */
.lan { position: absolute; z-index: 8; width: 15cqw; height: 17cqw; translate: -50% -50%; border-radius: 50%; }
.lan::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.9); animation: hint 2s ease-in-out infinite; }
.lan.lit::before { display: none; }
.lan .g { position: absolute; left: 50%; top: 50%; width: 34cqw; height: 34cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,160,1), rgba(255,176,70,.6) 26%, rgba(255,150,40,.18) 50%, transparent 70%); mix-blend-mode: screen; opacity: 0; scale: .3; transition: opacity .9s var(--ease), scale 1.1s var(--ease); pointer-events: none; }
.lan.lit .g { opacity: 1; scale: 1; animation: flick 2.1s ease-in-out .9s infinite alternate; }
.dusk { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #16224d, #3a2c5c 55%, #16224d); mix-blend-mode: multiply; opacity: calc(var(--lit, 0) * .1); transition: opacity 1.4s var(--ease); z-index: 3; }
.parts { display: flex; align-items: baseline; justify-content: center; }
.part { filter: blur(1.6cqw); opacity: .12; transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); } .part.on { filter: none; opacity: 1; }

/* ---------- roll ---------- */
.odo { display: flex; align-items: center; justify-content: center; font: 500 11cqw/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.odo .col { height: 1.15em; overflow: hidden; width: .56em; border-block: 1px solid color-mix(in srgb, var(--ink2) 50%, transparent); background: linear-gradient(180deg, rgba(0,0,0,.07), transparent 28%, transparent 72%, rgba(0,0,0,.07)); }
.odo .strip { display: flex; flex-direction: column; transition: transform var(--dur, 2s) cubic-bezier(.12,.68,.08,1); will-change: transform; }
.odo .strip span { height: 1.15em; display: grid; place-items: center; }
.odo .spin .strip { filter: blur(.035em); }
.odo s { text-decoration: none; opacity: .4; margin: 0 .16em; font-weight: 400; }
.plate-btn { margin-top: 1cqw; padding: 2.4cqw 6cqw; border-radius: 10cqw; background: var(--ink); color: #fffaf0; font: 500 2.6cqw var(--sans); letter-spacing: .3em; text-transform: uppercase; position: relative; overflow: hidden; transition: opacity .6s, transform .4s var(--ease); }
.plate-btn:active { transform: scale(.96); } .plate-btn.gone { opacity: 0; pointer-events: none; }

/* ---------- tear-off calendar ---------- */
.pad { position: relative; width: 28cqw; height: 35cqw; margin-top: 3cqw; filter: drop-shadow(0 1.6cqw 2.2cqw rgba(40,30,10,.3)); }
.pad::before { content: ""; position: absolute; z-index: 9; left: -1.5cqw; right: -1.5cqw; top: -3cqw; height: 5cqw; border-radius: 1cqw; background: linear-gradient(180deg, #d9b56a, #9c7a34 55%, #c9a452); box-shadow: inset 0 .3cqw .4cqw rgba(255,255,255,.5); }
.pad::after { content: ""; position: absolute; inset: 1.2cqw -.9cqw -1cqw; background: #e9dfc8; border-radius: 0 0 1cqw 1cqw; z-index: -1; box-shadow: 0 .5cqw 0 #d8cbab; }
.leaf { position: absolute; inset: 0; background: linear-gradient(180deg, #fffdf6, #f6efdf); border-radius: 0 0 1cqw 1cqw; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; transform-origin: 50% 0; cursor: pointer; }
.leaf .wd { background: var(--ink); color: #fffaf0; font: 500 2.2cqw var(--caps); letter-spacing: .26em; text-transform: uppercase; padding: 1.4cqw 0 1.1cqw; }
.leaf .n { font: 500 17.5cqw/1 var(--serif); font-variant-numeric: lining-nums; display: grid; place-items: center; }
.leaf .my { font: 500 2.1cqw var(--caps); letter-spacing: .24em; text-transform: uppercase; padding-bottom: 1.8cqw; }
.leaf.the .wd { background: var(--ink2); } .leaf.the .n { color: var(--ink2); }
.leaf.torn { animation: tear 1.05s cubic-bezier(.5,0,.9,.6) forwards; pointer-events: none; }
@keyframes tear { 0% { transform: none; } 22% { transform: rotateX(38deg) rotate(calc(var(--r) * .2)); } 100% { transform: translate(var(--x), 130cqw) rotate(var(--r)); opacity: 0; } }
.stamp { position: absolute; z-index: 10; right: -7cqw; bottom: 5cqw; padding: 1cqw 2cqw; border: .5cqw double var(--ink2); color: var(--ink2); font: 600 2.4cqw var(--caps); letter-spacing: .22em; text-transform: uppercase; rotate: -14deg; opacity: 0; scale: 2.4; border-radius: .8cqw; background: rgba(255,253,246,.6); }
.revealed .stamp { animation: stamp .5s cubic-bezier(.2,1.4,.4,1) .2s forwards; } @keyframes stamp { to { opacity: .92; scale: 1; } }

/* ---------- flip ---------- */
.cards3 { display: flex; gap: 2.2cqw; perspective: 120cqw; }
.fc { width: 18.4cqw; height: 27cqw; position: relative; transform-style: preserve-3d; transition: transform 1s var(--ease), rotate .8s var(--ease), translate .8s var(--ease); rotate: calc((var(--k) - 1) * 5deg); translate: 0 calc((var(--k) - 1) * (var(--k) - 1) * 1.4cqw); }
.fc:hover { translate: 0 -1.2cqw; }
.fc.up { transform: rotateY(180deg); } .all .fc { rotate: 0deg; translate: 0 0; }
.fc > div { position: absolute; inset: 0; border-radius: 1.6cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1.2cqw 2.4cqw rgba(30,20,40,.3); }
.fc .bk { background: var(--ink2); border: .5cqw solid #fffaf0; outline: 1px solid var(--ink2); overflow: hidden; }
.fc .bk::before { content: ""; position: absolute; inset: 1.4cqw; border: 1px solid rgba(255,250,240,.7); border-radius: 1cqw; background: radial-gradient(circle, rgba(255,250,240,.9) 12%, transparent 13%) 0 0/3.4cqw 3.4cqw, radial-gradient(circle, rgba(255,250,240,.5) 8%, transparent 9%) 1.7cqw 1.7cqw/3.4cqw 3.4cqw; }
.fc .bk::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 6cqw; color: #fffaf0; }
.fc .ft { transform: rotateY(180deg); background: linear-gradient(180deg, #fffdf6, #f5ecd9); display: grid; align-content: center; gap: 1.2cqw; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.fc .ft small { font: 500 2cqw var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--ink2); }
.fc .ft b { font: 500 11cqw/1 var(--serif); font-variant-numeric: lining-nums; }
.fc .ft em { font: italic 400 2.7cqw var(--serif); }

/* ---------- seal ---------- */
.note { position: relative; width: 52cqw; height: 25cqw; perspective: 110cqw; filter: drop-shadow(0 1.4cqw 2.2cqw rgba(30,30,60,.28)); margin: 5cqw 0; }
.note .in { position: absolute; inset: 0; background: linear-gradient(180deg, #fffdf6, #f5ecd9); display: grid; place-content: center; gap: 1.4cqw; border: 1px solid rgba(120,100,60,.3); }
.flap { position: absolute; left: 0; right: 0; height: 52%; background: linear-gradient(180deg, #fbf5e6, #efe3c8); border: 1px solid rgba(120,100,60,.35); transition: transform 1.2s var(--ease); backface-visibility: hidden; z-index: 2; }
.flap.t { top: 0; transform-origin: 50% 0; } .flap.b { bottom: 0; transform-origin: 50% 100%; background: linear-gradient(0deg, #fbf5e6, #efe3c8); }
.broken .flap.t { transform: rotateX(-178deg); transition-delay: .75s; } .broken .flap.b { transform: rotateX(178deg); transition-delay: 1.1s; }
.ribbon { position: absolute; z-index: 3; left: 50%; top: -6%; bottom: -6%; width: 4.4cqw; translate: -50% 0; background: linear-gradient(90deg, #7d2a40, #a3405a 45%, #6e2438); transition: transform 1s var(--ease) .45s, opacity .6s ease 1s; }
.broken .ribbon { transform: translateY(120%); opacity: 0; }
.wax { position: absolute; z-index: 4; left: 50%; top: 50%; width: 17cqw; height: 17cqw; translate: -50% -50%; touch-action: none; filter: drop-shadow(0 1cqw 1.4cqw rgba(21,10,14,.45)); }
.wax svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wax .crack { fill: none; stroke: #1d070d; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.wax .half { transition: transform 1s cubic-bezier(.5,0,.9,.6), opacity .5s ease .6s; transform-box: fill-box; transform-origin: center; }
.wax.pressing { animation: shake .16s linear infinite; } @keyframes shake { 25% { translate: calc(-50% - .25cqw) -50%; } 75% { translate: calc(-50% + .25cqw) -50%; } }
.broken .wax { pointer-events: none; } .broken .wax .half.l { transform: translate(-9cqw, 26cqw) rotate(-50deg); opacity: 0; } .broken .wax .half.r { transform: translate(9cqw, 30cqw) rotate(60deg); opacity: 0; }
.wax text { font: italic 500 46px var(--serif); fill: #e9c9a0; text-anchor: middle; }

/* ---------- baithak (musicians) ---------- */
.spot { position: absolute; z-index: 8; border-radius: 50%; }
.spot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11cqw; height: 11cqw; translate: -50% -50%; border-radius: 50%; border: 1px solid #fff; background: rgba(255,255,255,.22); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { scale: .5; opacity: 1; } 100% { scale: 1.5; opacity: 0; } }
.playing .spot::before, .revealed .spot::before { display: none; }
.ink { display: inline-block; clip-path: inset(-10% 100% -10% -2%); transition: clip-path 1.5s cubic-bezier(.45,.05,.3,1); transition-delay: calc(var(--i, 0) * .85s); }
.playing .ink { clip-path: inset(-10% -2% -10% -2%); }
.note-fx { position: absolute; z-index: 9; width: 4.4cqw; height: 6cqw; pointer-events: none; opacity: 0; animation: noteup 3.6s ease-out forwards; }
@keyframes noteup { 0% { opacity: 0; transform: translate(0,0) rotate(-8deg) scale(.6); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--dx), -46cqw) rotate(14deg) scale(1.15); } }

/* ---------- bloom (tie the knot) ---------- */
.pop { opacity: 0; transform: scale(.82) translateY(2cqw); transition: opacity .9s var(--ease), transform 1.1s cubic-bezier(.2,1.2,.3,1); transition-delay: calc(var(--i, 0) * .22s); }
.bloomed .pop { opacity: 1; transform: none; }
.bfly { position: absolute; z-index: 9; width: 5cqw; height: 4cqw; left: 50%; top: 80%; opacity: 0; pointer-events: none; }
.bloomed .bfly { animation: fly var(--d) ease-in-out var(--dl) infinite alternate, flyin 1.2s ease var(--dl) forwards; }
@keyframes flyin { to { opacity: 1; } }
@keyframes fly { 0% { translate: 0 0; } 33% { translate: calc(var(--x) * .5) calc(var(--y) * .7); rotate: 12deg; } 66% { translate: var(--x) calc(var(--y) * .85); rotate: -10deg; } 100% { translate: calc(var(--x) * .8) var(--y); rotate: 8deg; } }
.bfly i { position: absolute; top: 0; width: 50%; height: 100%; background: radial-gradient(ellipse at 70% 40%, #f6b04a, #d9641c 70%); border-radius: 80% 20% 60% 40%; transform-origin: 100% 50%; animation: flap .28s ease-in-out infinite alternate; }
.bfly i + i { left: 50%; transform-origin: 0 50%; border-radius: 20% 80% 40% 60%; animation-name: flap2; }
@keyframes flap { to { transform: rotateY(68deg); } } @keyframes flap2 { to { transform: rotateY(-68deg); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; } .rise { opacity: 1; transform: none; } }

.m-tearoff .t-title { font-size: 8.6cqw; } .m-tearoff .box { gap: 2cqw; }