/* Guest invitation page (/i/{slug}, views/invite.php + assets/js/invite.js). Phone first. --c0..--c2 = the card's colours. */
@font-face{font-family:CWUrdu;src:url(../fonts/nastaliq-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:CWUrdu;font-weight:700;src:url(../fonts/nastaliq-700.woff2) format('woff2');font-display:swap}
@property --r { syntax: '<percentage>'; inherits: false; initial-value: -20%; }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body.iv { background: var(--c2); color: #f3e3b8; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.iv.locked { overflow: hidden; height: 100vh; }
.foil { background: linear-gradient(100deg, #9a7330, #f8e6a8 22%, #c0913f 40%, #fff3c8 58%, #a67c32 80%, #f3d991); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bi { font: 400 22px/1.8 CWUrdu, serif; text-align: center; }
.ur .ur-t, .ur .sm, .ur .sec-h { font-family: CWUrdu, serif; }
.bg { background: radial-gradient(120% 70% at 50% 38%, var(--c0), var(--c1) 48%, var(--c2)); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 70% at 50% 38%, var(--c0), var(--c1) 48%, var(--c2)); padding: 34px 18px 30px; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .08; background: radial-gradient(circle, #e6c97e 1.5px, transparent 2px) 0 0 / 24px 24px; }
.hero::after { content: ""; position: absolute; inset: 10px; border: 1.5px solid #d9b56a88; border-radius: 160px 160px 8px 8px / 120px 120px 8px 8px; pointer-events: none; }
.hero-in { position: relative; z-index: 2; text-align: center; width: 100%; max-width: 440px; }
.sm { font: 600 11.5px "Cormorant Garamond", serif; letter-spacing: .22em; text-transform: uppercase; color: #ead7a8; margin-top: 4px; line-height: 1.7; }
.ur .sm { letter-spacing: 0; font-size: 17px; text-transform: none; }
.nm { font: 400 clamp(48px, 15vw, 70px)/1.05 "Great Vibes", cursive; margin: 6px 0 2px; padding: 0 4px; }
.nm i { display: block; font: italic 500 24px "Cormorant Garamond", serif; color: #e6c97e; -webkit-text-fill-color: #e6c97e; }
.ur .nm { font: 700 clamp(40px, 12vw, 56px)/1.9 CWUrdu, serif; }
.parents { font: italic 500 15px "Cormorant Garamond", serif; color: #e9d6a6; }
.ur .parents { font: 400 16px/2 CWUrdu, serif; font-style: normal; }
.couple { position: relative; height: 46svh; max-height: 420px; margin: 8px auto 4px; display: flex; justify-content: center; align-items: flex-end; }
.couple::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 120%; height: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, #f5d58a44, transparent); }
.couple img { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 16px 20px #0009); animation: float 6s ease-in-out infinite; }
.couple .ph { position: relative; height: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px 10px 10px; overflow: hidden; border: 4px solid #d9b56a; box-shadow: 0 0 0 10px #d9b56a22, 0 20px 40px #0008; }
.couple .ph img { animation: none; width: 100%; height: 100%; object-fit: cover; filter: none; }
@keyframes float { 50% { transform: translateY(-8px); } }
.cd { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.cd div { width: 64px; padding: 8px 0 6px; border: 1px solid #d9b56a77; border-radius: 12px; background: #0003; }
.cd b { display: block; font: 600 24px "Playfair Display", serif; color: #f6e6b8; }
.cd span { font: 700 9px Inter; letter-spacing: .12em; color: #cdb98d; }
.cd p { font: italic 500 18px "Cormorant Garamond", serif; color: #f6e6b8; }
.scroll { display: inline-block; margin-top: 10px; color: #d9c08a; font-size: 26px; text-decoration: none; animation: bob 2s infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.pt { position: absolute; top: -30px; width: 13px; height: 9px; border-radius: 70% 0 70% 0; background: radial-gradient(circle at 30% 30%, #ff9aa8, #b3122f 70%); opacity: .85; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110svh) translateX(60px) rotate(600deg); } }
.du { position: absolute; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 8px #ffd56a; animation: tw 3.4s ease-in-out infinite alternate; }
@keyframes tw { to { opacity: .15; transform: translateY(-18px); } }
.shine { position: absolute; inset: -30%; background: conic-gradient(from 0deg at 50% 40%, transparent 0 20deg, #ffe3a014 30deg, transparent 40deg 90deg, #ffe3a010 100deg, transparent 110deg 200deg, #ffe3a014 210deg, transparent 220deg); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- ivory sections ---------- */
.ivory { background: #f6efe2; color: #3a2a1a; padding: 40px 18px 34px; }
.ivory > * { max-width: 520px; margin-left: auto; margin-right: auto; }
.sec-h { font: 400 46px/1.1 "Great Vibes", cursive; text-align: center; color: #7a1424; margin-bottom: 18px; }
.ur .sec-h { font: 700 34px/2 CWUrdu, serif; }
.ev { display: flex; gap: 14px; background: #fff; border: 1px solid #ecdfc6; border-radius: 18px; padding: 14px; margin-bottom: 12px; box-shadow: 0 8px 20px -10px #6b4b1f55; }
.ev .day { flex: none; width: 64px; border-radius: 14px; display: grid; place-content: center; text-align: center; color: #f6e6b8; background: linear-gradient(var(--c0), var(--c2)); padding: 8px 0; }
.ev .day b { font: 700 26px/1 "Playfair Display", serif; } .ev .day small { font: 700 10px Inter; letter-spacing: .1em; margin-top: 4px; }
.ev h3 { font: 600 19px "Playfair Display", serif; } .ur .ev h3 { font: 700 22px/1.8 CWUrdu, serif; }
.ev p { font-size: 14px; color: #6d5a40; line-height: 1.5; margin-top: 2px; }
.ev .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ev .btns a { font: 700 12.5px Inter; padding: 8px 12px; border-radius: 20px; text-decoration: none; background: #f4ead6; color: #7a1424; }
.ev .btns a.go { background: var(--c1); color: #f6e6b8; }
.save-card { display: block; width: 100%; margin-top: 16px; padding: 14px; border-radius: 16px; border: 1.5px solid #d9c49a; background: #fff; font: 700 15px Inter; color: #3a2a1a; cursor: pointer; }
.rs label.l { display: block; font: 700 11.5px Inter; letter-spacing: .1em; color: #9b7b45; text-transform: uppercase; margin: 16px 0 7px; }
.rs input[type=text], .rs textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1.5px solid #e2d2b0; border-radius: 14px; background: #fff; color: #3a2a1a; }
.rs textarea { min-height: 80px; resize: vertical; }
.rs .ch { display: flex; gap: 8px; }
.rs .ch button { flex: 1; padding: 14px 6px; border-radius: 14px; font: 700 15px Inter; border: 1.5px solid #e2d2b0; background: #fff; color: #5a4630; cursor: pointer; }
.rs .ch button.on { background: var(--c1); color: #f6e6b8; border-color: var(--c1); }
.rs .step { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid #e2d2b0; border-radius: 14px; padding: 8px 10px; font: 700 18px Inter; }
.rs .step button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f4ead6; color: #7a1424; font-size: 20px; cursor: pointer; }
.rs .send { width: 100%; margin-top: 18px; padding: 16px; border-radius: 16px; border: 0; font: 800 16px Inter; color: #2a1b06; background: linear-gradient(100deg, #b98a3a, #f6df9c 45%, #c7983f); box-shadow: 0 10px 20px -8px #8a652688; cursor: pointer; }
.rs .err { color: #b91c1c; font-size: 14px; margin-top: 10px; font-weight: 600; }
.rs-done { text-align: center; font: italic 500 22px/1.4 "Cormorant Garamond", serif; color: #6d5a40; padding: 10px 0; }
.rs-done b { display: block; font: 400 40px "Great Vibes", cursive; color: #7a1424; font-style: normal; }
.wl { padding-top: 6px; }
.wish { background: #fff; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #efe3cc; }
.wish p { font: italic 500 18px/1.4 "Cormorant Garamond", serif; color: #4a3a26; }
.wish b { display: block; font: 700 12.5px Inter; color: #9b7b45; margin-top: 4px; }
.iv-foot { background: #f6efe2; text-align: center; padding: 10px 18px calc(30px + env(safe-area-inset-bottom)); }
.iv-foot a, .iv-made { font: 600 13px Inter; color: #a48c62; text-decoration: none; }
.mu { position: fixed; z-index: 40; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d9b56a88; background: #0006; color: #f0dca6; font-size: 18px; backdrop-filter: blur(6px); cursor: pointer; }
.mu.off { opacity: .55; text-decoration: line-through; }
.iv-ended { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: 12px; padding: 24px; background: radial-gradient(120% 70% at 50% 38%, var(--c0), var(--c1) 48%, var(--c2)); }
.iv-ended h1 { font: 400 56px "Great Vibes", cursive; }
.iv-ended p { font: italic 500 20px "Cormorant Garamond", serif; color: #ead7a8; }

/* ---------- the opening (gate): closed, then .open plays the scene once, then .gone fades it away ---------- */
.gate { position: fixed; inset: 0; z-index: 30; overflow: hidden; cursor: pointer; perspective: 1000px; transition: opacity .7s; -webkit-tap-highlight-color: transparent; }
.gate.gone { opacity: 0; pointer-events: none; }
.gate .tap { position: absolute; left: 0; right: 0; text-align: center; font: 700 11.5px Inter; letter-spacing: .2em; color: #f0dca6; z-index: 8; text-transform: uppercase; transition: opacity .3s; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .75; } }
.gate .gn { position: absolute; left: 0; right: 0; text-align: center; z-index: 8; transition: opacity .4s; }
.gate .gn .nm { font-size: clamp(40px, 12vw, 54px); }
.gate .gn .d { font: italic 500 17px "Cormorant Garamond", serif; color: #e9d6a6; }
.gate.open .tap, .gate.open .gn { opacity: 0; animation: none; }
/* envelope */
.g-env { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 4svh, 40px); padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(120% 70% at 50% 40%, var(--c0), var(--c1) 45%, var(--c2)); }
.g-env .gn, .g-env .tap { position: static; } /* names, envelope and "Tap to open" in one column: they never overlap */
.g-env .gn .nm { font-size: clamp(36px, min(12vw, 6.5svh), 54px); }
.g-env .e { position: relative; flex: none; width: min(78vw, 330px, 48svh); aspect-ratio: 3 / 2; border-radius: 6px; background: linear-gradient(160deg, #f7efe0, #e4d4b6); box-shadow: 0 30px 40px -10px #000c; perspective: 700px; }
.g-env .e::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 49.6%, #d6c29c 50%, transparent 50.4%), linear-gradient(to top left, transparent 49.6%, #d6c29c 50%, transparent 50.4%); }
.g-env .fl { position: absolute; left: 0; top: 0; width: 100%; height: 63%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(#efe3c9, #dccaa5); transform-origin: top; z-index: 3; transition: transform .7s .35s, z-index 0s .7s; }
.g-env .cd2 { position: absolute; left: 6%; right: 6%; top: 6%; height: 88%; border: 1px solid #d9b56a; background: radial-gradient(var(--c0), var(--c2)); z-index: 1; display: grid; place-content: center; text-align: center; transition: transform .8s .95s cubic-bezier(.3, 0, .2, 1); }
.g-env .cd2 .nm { font-size: clamp(28px, 8vw, 38px); }
.g-env .fr { position: absolute; inset: 0; z-index: 2; border-radius: 6px; background: linear-gradient(160deg, #f7efe0, #e4d4b6); clip-path: polygon(0 0, 50% 64%, 100% 0, 100% 100%, 0 100%); }
.g-env .sl { position: absolute; left: 50%; top: 63%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; z-index: 4; display: grid; place-items: center; font: 400 26px "Great Vibes", cursive; color: #f1c9a0;
  background: radial-gradient(circle at 35% 30%, #c23a4a, #7a0f1e 55%, #4a0610); box-shadow: 0 4px 8px #0008, inset 0 0 0 5px #8e1626, 0 0 0 14px #f0d48a14, 0 0 0 28px #f0d48a0a; transition: transform .35s, opacity .35s; animation: seal 2.2s ease-in-out infinite; }
@keyframes seal { 50% { box-shadow: 0 4px 8px #0008, inset 0 0 0 5px #8e1626, 0 0 0 20px #f0d48a22, 0 0 0 40px #f0d48a0c; } }
.gate.open .g-env .sl { transform: scale(.4) rotate(-25deg); opacity: 0; animation: none; }
.gate.open .g-env .fl { transform: rotateX(180deg); z-index: 0; }
.gate.open .g-env .cd2 { transform: translateY(-80%); }
/* curtains */
.g-cur { position: absolute; inset: 0; } /* see-through: the invitation is behind the curtains */
.g-cur .l, .g-cur .r { position: absolute; top: 0; bottom: 0; width: 53%; z-index: 5; background: linear-gradient(180deg, #0003, transparent 20%, transparent 80%, #0006), repeating-linear-gradient(90deg, #4a0712 0, #8c1a2c 9px, #b02a3f 13px, #7a1324 18px, #4a0712 26px); transition: transform 1.7s cubic-bezier(.6, 0, .3, 1); }
.g-cur .l { left: 0; transform-origin: left; } .g-cur .r { right: 0; transform-origin: right; }
.g-cur .l::after, .g-cur .r::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, #e8c56a 0 2px, transparent 2px 5px), linear-gradient(#f2d68e, #a77d32); }
.g-cur .va { position: absolute; left: -4%; right: -4%; top: 0; height: 74px; z-index: 6; background: repeating-linear-gradient(90deg, #5a0a17 0, #9b1f33 12px, #5a0a17 24px); border-bottom: 3px solid #d9b56a; border-radius: 0 0 50% 50% / 0 0 30% 30%; box-shadow: 0 6px 12px #0007; transition: transform 1s 1.4s; }
.g-cur .va::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 8px 0, #f2d68e 4px, transparent 5px) 0 0 / 16px 12px; }
.gate.open .g-cur .l, .gate.open .g-cur .r { transform: scaleX(.12); }
.gate.open .g-cur .va { transform: translateY(-120%); }
/* doors */
.g-dr { position: absolute; inset: 0; perspective: 1200px; }
.g-dr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 45%, #ffe7a6aa, transparent 70%); opacity: 0; transition: opacity .8s .3s; }
.gate.open .g-dr::before { opacity: 1; }
.g-dr .l, .g-dr .r { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; border: 2px solid #b8893b; background: linear-gradient(90deg, #00000055, transparent 30%, transparent 70%, #00000055), repeating-linear-gradient(0deg, #2a160c 0, #3b2112 3px, #2e190e 7px); transition: transform 1.7s cubic-bezier(.5, 0, .3, 1); }
.g-dr .l { left: 0; transform-origin: left; } .g-dr .r { right: 0; transform-origin: right; }
.g-dr .pn { position: absolute; left: 16%; right: 16%; border: 2px solid #d9b56a; background: radial-gradient(circle, #d9b56a 1.6px, transparent 2px) 0 0 / 16px 16px, #1f0f07; }
.g-dr .pn.a { top: 10%; height: 42%; border-radius: 90px 90px 4px 4px; } .g-dr .pn.b { top: 56%; height: 34%; border-radius: 4px; }
.g-dr .rg { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #e2bc66; box-shadow: 0 2px 4px #000; }
.g-dr .l .rg { right: 8px; } .g-dr .r .rg { left: 8px; }
.gate.open .g-dr .l { transform: rotateY(-108deg); } .gate.open .g-dr .r { transform: rotateY(108deg); }
/* dupatta */
.g-dp { position: absolute; inset: -10px -10px 0; z-index: 5; background: radial-gradient(circle, #f2d68e 1.3px, transparent 1.8px) 0 0 / 14px 14px, radial-gradient(circle, #f2d68e88 1px, transparent 1.5px) 7px 7px / 14px 14px, linear-gradient(#b3122fa8, #7a0f1ec4);
  border-bottom: 24px solid transparent; border-image: repeating-linear-gradient(90deg, #f2d68e 0 6px, #a77d32 6px 10px, #f8e6a8 10px 14px) 24; transition: transform 1.8s cubic-bezier(.55, 0, .35, 1), border-radius 1.8s, opacity 1.8s; transform-origin: top center; }
.g-dpb { display: none; } /* the couple shows faintly through the sheer dupatta */
.gate.open .g-dp { transform: translateY(-112%) skewX(6deg); border-radius: 0 0 40% 50% / 0 0 26% 18%; opacity: .7; }
/* diyas */
.g-dy { position: absolute; inset: 0; z-index: 5; background: #060302; -webkit-mask: radial-gradient(circle at 50% 90%, transparent var(--r), #000 calc(var(--r) + 14%)); mask: radial-gradient(circle at 50% 90%, transparent var(--r), #000 calc(var(--r) + 14%)); transition: --r 1.6s 1.2s ease-in; }
.gate.open .g-dy { --r: 140%; }
.g-dyb { display: none; }
.dys { position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 18px; z-index: 7; }
.dyi { position: relative; width: 40px; height: 18px; border-radius: 0 0 22px 22px / 0 0 18px 18px; background: linear-gradient(#c0662a, #6b2a0c); box-shadow: inset 0 2px 0 #e8a050; }
.dyi i { position: absolute; left: 14px; top: -24px; width: 12px; height: 24px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 75%, #fff7c0, #ffc23a 45%, #ff7a1a 80%); box-shadow: 0 0 16px 7px #ffb53a88; opacity: 0; transform: scale(.2); transition: opacity .3s, transform .3s; }
.gate.open .dyi i { opacity: 1; transform: none; animation: flick .5s ease-in-out infinite alternate; }
@keyframes flick { to { transform: scale(1.05, .95) translateY(1px); } }
/* scroll */
.g-sr { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 40%, var(--c0), var(--c1) 50%, var(--c2)); }
.g-sr .pa { position: absolute; left: 9%; right: 9%; top: 50%; height: 0; transform: translateY(-50%); overflow: hidden; color: #6e1322; text-align: center; transition: height 1.5s cubic-bezier(.5, 0, .3, 1);
  background: linear-gradient(90deg, #d9c39a, #f6ead0 15%, #f6ead0 85%, #d9c39a); }
.g-sr .pa > div { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 12px; }
.g-sr .pa .b { font: 400 20px/1.7 CWUrdu, serif; color: #8a5a1c; }
.g-sr .pa .s { font: 600 11px "Cormorant Garamond", serif; letter-spacing: .2em; text-transform: uppercase; margin: 8px 0; }
.g-sr .pa .n { font: 400 44px/1.1 "Great Vibes", cursive; color: #7a1424; }
.g-sr .rod { position: absolute; left: 6%; right: 6%; top: calc(50% - 10px); height: 20px; border-radius: 10px; z-index: 2; background: linear-gradient(#6b3a1c, #a8642e 40%, #4a240e); box-shadow: 0 4px 8px #0008; transition: transform 1.5s cubic-bezier(.5, 0, .3, 1); }
.g-sr .rod::before, .g-sr .rod::after { content: ""; position: absolute; top: -3px; width: 18px; height: 26px; border-radius: 6px; background: linear-gradient(#f2d68e, #a77d32); }
.g-sr .rod::before { left: -11px; } .g-sr .rod::after { right: -11px; }
.gate.open .g-sr .pa { height: 66svh; }
.gate.open .g-sr .t1 { transform: translateY(-33svh); } .gate.open .g-sr .t2 { transform: translateY(33svh); }
@media (prefers-reduced-motion: reduce) { .pt, .du, .shine, .couple img, .scroll { animation: none; } }
@media (min-width: 700px) { .hero::after { inset: 18px calc(50% - 300px); } }
/* before the opening plays only the couple shows through (curtains, doors, dupatta); the words fade in after */
/* names, date, parents and countdown come in one after another once the opening has played (never before) */
.hero-in > * { transition: opacity .8s ease-out, transform .8s ease-out; }
body.locked .hero-in > :not(.couple) { opacity: 0; transform: translateY(14px); transition: none; }
.hero-in > .bi { transition-delay: .15s; } .hero-in > .sm { transition-delay: .4s; } .hero-in > .nm { transition-delay: .7s; } .hero-in > .dt { transition-delay: 1.05s; }
.hero-in > .parents { transition-delay: 1.3s; } .hero-in > .cd { transition-delay: 1.55s; } .hero-in > .scroll { transition-delay: 1.8s; }

/* "Tap to open": readable on any background */
.gate .tap span { display: inline-block; padding: 10px 18px; border-radius: 99px; background: #000a; border: 1px solid #d9b56a88; font-size: 12.5px; letter-spacing: .18em; box-shadow: 0 6px 18px #0006; }
.ur .gate .tap span { font: 600 17px/1.6 CWUrdu, serif; letter-spacing: 0; padding: 4px 18px 8px; }
.ur .nm i { font-family: serif; font-style: normal; font-size: 22px; }
/* doors: names on a dark nameplate so the gold handles don't run through them */
.op-doors .gate .gn { left: 50%; right: auto; width: max-content; max-width: 86vw; transform: translateX(-50%); padding: 12px 26px 14px; border-radius: 18px; background: #160904ee; border: 1px solid #d9b56a88; box-shadow: 0 10px 30px #000a; }
/* diyas: the names stay while the lamps light, then fade as the light spreads */
.op-diyas .gate.open .gn { transition: opacity .6s 1.1s; }
/* short phones (≤700px tall): the whole hero, countdown included, fits the first screen */
.sm { padding: 0 16px; }
@media (max-height: 700px) { .hero { padding-top: 24px; padding-bottom: 16px; } .couple { height: 36svh; } .nm { font-size: clamp(40px, min(14vw, 8svh), 62px); } .cd { margin-top: 8px; } .cd div { padding: 6px 0 4px; } .scroll { margin-top: 4px; } }
/* scroll: parchment width on wide screens, not a banner */
.g-sr .pa { left: max(9%, calc(50% - 260px)); right: max(9%, calc(50% - 260px)); }
.g-sr .rod { left: max(6%, calc(50% - 290px)); right: max(6%, calc(50% - 290px)); }
.iv-demo { position: fixed; z-index: 35; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); white-space: nowrap; padding: 10px 16px; border-radius: 99px; background: #111c; border: 1px solid #d9b56a88; color: #f0dca6; font: 600 13px Inter, sans-serif; backdrop-filter: blur(6px); box-shadow: 0 8px 20px #0006; }
.iv-demo a { color: #fff; font-weight: 800; }
body.locked .iv-demo { display: none; }
/* hero date; the envelope card and the scroll invite without names */
.dt { font: italic 600 19px "Cormorant Garamond", serif; color: #f3dfa8; letter-spacing: .02em; margin: 2px 0 4px; }
.ur .dt { font: 400 19px/2 CWUrdu, serif; font-style: normal; }
.dt:empty { display: none; }
.g-env .cd2 .cw, .g-sr .pa .orn { font: 600 11px "Cormorant Garamond", serif; letter-spacing: .2em; text-transform: uppercase; color: #ead7a8; }
.g-sr .pa .orn { font-size: 22px; color: #a8792e; letter-spacing: 0; }
.ur .g-sr .pa .n { font: 700 40px/1.9 CWUrdu, serif; }
/* envelope: the names sit high on the card so they're out of the envelope; then the card grows into the whole page */
.g-env .cd2 { place-content: start center; padding-top: 9%; background: radial-gradient(120% 70% at 50% 38%, var(--c0), var(--c1) 48%, var(--c2)); }
.g-env .cd2.grow { z-index: 6; margin: 0; border-radius: 4px; transition: left .9s cubic-bezier(.6, 0, .2, 1), top .9s cubic-bezier(.6, 0, .2, 1), width .9s cubic-bezier(.6, 0, .2, 1), height .9s cubic-bezier(.6, 0, .2, 1), padding .9s, border-color .9s, border-radius .9s; }
.g-env .cd2.grow.full { border-color: transparent; border-radius: 0; }
.g-env .cd2.grow .nm { transition: font-size .9s cubic-bezier(.6, 0, .2, 1); }
.gate.grown .g-env .e { opacity: 0; transform: translateY(60px); transition: opacity .45s, transform .6s ease-in; }
.op-envelope .hero-in > .nm { transition-delay: 0s; } /* the grown card's names hand over in place */
.g-env .cd2.grow .nm { margin: 6px 0 2px; }