/* Rangeen Rickshaw — digital wedding card styles
   Layout: phone-width sections scroll above a street fixed along the bottom; the rickshaw drives as you scroll. 1 --u = 1px of a 1080px column. */
:root{
  --col:min(100vw,460px); --u:calc(var(--col)/1080); --rideH:min(32svh,280px);
  --cream:#FFF7E8; --paper:#FFFBF2; --ink:#2D1B3D; --ink-soft:#5E4A6B;
  --pink:#E8247B; --pink-d:#B5145C; --teal:#0FA3A3; --yellow:#FFC520; --green:#1E9E4A; --orange:#F57C1F; --sky:#9BDCF6;
  --f-sign:"Lilita One","Arial Rounded MT Bold",sans-serif; --f-body:"Baloo Bhaijaan 2","Trebuchet MS",sans-serif; --f-ar:"Amiri",serif; --f-ur:"Noto Nastaliq Urdu",serif;
  --bunting:linear-gradient(135deg,var(--pink) 25%,transparent 25%) 0 0/calc(80*var(--u)) calc(40*var(--u)),
            linear-gradient(225deg,var(--pink) 25%,transparent 25%) 0 0/calc(80*var(--u)) calc(40*var(--u));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#1C1230;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--f-body);background:#1C1230}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.mv{position:absolute;pointer-events:none}

/* ================= OPENING ================= */
#opening{position:fixed;inset:0;z-index:40;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#5FC3EE 0%,#9BDCF6 45%,#CDEFFB 100%)}
.sky{position:absolute;inset:0;pointer-events:none}
.kite{width:min(16vw,70px);animation:kite 7s ease-in-out infinite;transform-origin:50% 0}
.kite.k1{top:8%;left:8%}.kite.k2{top:30%;right:6%;width:min(11vw,50px);animation-delay:-3s}
@keyframes kite{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(10px,-14px) rotate(8deg)}}
.o-top{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(56px + env(safe-area-inset-top,0px)) 20px 8px;text-align:center}
.o-to{margin:0;font-family:var(--f-sign);font-size:20px;color:var(--pink-d)}
.o-pre{font-family:var(--f-sign);font-size:clamp(20px,6vw,28px);color:#fff;letter-spacing:.02em;text-shadow:0 2px 0 var(--pink-d),0 4px 10px rgba(0,0,0,.2)}
.horn{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;cursor:pointer;padding:0}
.horn img{width:min(56vw,250px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:wiggle 2.4s ease-in-out infinite;transform-origin:20% 60%}
.horn span{font-family:var(--f-sign);font-size:16px;letter-spacing:.06em;color:#fff;background:var(--pink);padding:8px 18px;border-radius:99px;box-shadow:0 4px 0 var(--pink-d)}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-6deg) scale(1.04)}90%{transform:rotate(5deg)}95%{transform:rotate(-3deg)}}
.horn.honk img{animation:squeeze .25s ease-in-out 4}
@keyframes squeeze{50%{transform:scale(.9,1.06)}}
.horn:focus-visible span{outline:2px solid #fff;outline-offset:3px}
.o-street{position:relative;height:min(42svh,360px);flex:none;overflow:hidden}
.o-road{position:absolute;left:0;bottom:0;height:100%;display:flex;direction:ltr;transition:transform 2.2s cubic-bezier(.55,0,.3,1)}
.o-road img{height:100%;width:auto;max-width:none}
.o-road img + img{margin-left:calc(var(--sw) * -.06);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%);mask-image:linear-gradient(90deg,transparent,#000 6%)}
.o-street .rick{left:50%;margin-left:calc(min(42svh,360px) * -.31);transition:transform 2.2s cubic-bezier(.6,0,.4,1)}
.going .o-street .rick{transform:translateX(70vw)}
.going .o-road{transform:translateX(calc(var(--sw) * -.5))}
.going .horn{pointer-events:none}

/* the rickshaw (shared) */
.rick{position:absolute;bottom:2.4%;height:46%;aspect-ratio:900/611;z-index:3}
.rick .body{position:absolute;inset:0;width:100%;height:100%}
.rick .wh{position:absolute;width:17.2%;aspect-ratio:1;margin:-8.6% 0 0 -8.6%;top:85.7%;will-change:transform}
.rick .w1{left:23.6%}.rick .w2{left:90.2%}
.rick.moving .body{animation:bump .22s ease-in-out infinite alternate}
@keyframes bump{to{transform:translateY(-2.5%) rotate(-.4deg)}}
.rick.back{transform:scaleX(-1)}
.tassels{position:absolute;left:10%;right:30%;top:4%;display:flex;justify-content:space-between;pointer-events:none;z-index:2}
.tassels img{width:12%;transform-origin:50% 0;animation:tsw 1.4s ease-in-out infinite alternate}
.tassels img + img{animation-delay:-.7s}
@keyframes tsw{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.going .rick .body{animation:bump .18s ease-in-out infinite alternate}

#flash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(circle,#fff,#FFF2C9 60%,#FFC520)}
#flash.on{opacity:1}
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}

/* ================= CONTROLS ================= */
.langbtn,.replay,.musicbtn{position:fixed;z-index:70;cursor:pointer;color:#fff;background:var(--pink);border:2px solid #fff;box-shadow:0 3px 0 var(--pink-d),0 6px 14px rgba(0,0,0,.18)}
.langbtn{top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,calc(env(safe-area-inset-left,0px) + 12px));padding:4px 14px;border-radius:99px;font-family:var(--f-ur);font-size:14px;line-height:1.9}
html.ur .langbtn{font-family:var(--f-sign);font-size:13px;line-height:1.6;padding:6px 14px}
.replay{top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,calc(env(safe-area-inset-right,0px) + 12px));width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.replay svg{width:18px;height:18px}
.musicbtn{top:calc(60px + env(safe-area-inset-top,0px));right:max(12px,calc(env(safe-area-inset-right,0px) + 12px));width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal);box-shadow:0 3px 0 #0A7272,0 6px 14px rgba(0,0,0,.18)}
.musicbtn svg{width:19px;height:19px}
.musicbtn .slash{display:none}.musicbtn.off{background:#8A8A99;box-shadow:0 3px 0 #5E5E6E}.musicbtn.off .slash{display:inline}
@media (min-width:461px){ .langbtn{left:calc(50% - 230px + 12px)} .replay,.musicbtn{right:calc(50% - 230px + 12px)} }

/* ================= THE RIDE ================= */
#card{position:relative;width:var(--col);margin:0 auto;background:var(--cream);overflow:hidden;padding-bottom:var(--rideH)}
.stop{position:relative;min-height:calc(100svh - var(--rideH));padding:calc(230*var(--u)) calc(60*var(--u)) calc(110*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(42*var(--u));text-align:center;
  background:radial-gradient(circle at 15% 20%,rgba(255,197,32,.14),transparent 40%),radial-gradient(circle at 90% 80%,rgba(15,163,163,.10),transparent 40%)}
.stop::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(40*var(--u));
  background:linear-gradient(90deg,var(--pink) 0 20%,var(--yellow) 20% 40%,var(--teal) 40% 60%,var(--green) 60% 80%,var(--orange) 80% 100%) 0 0/calc(400*var(--u)) 100% repeat-x;
  -webkit-mask:conic-gradient(from 135deg at 50% 100%,#000 90deg,transparent 0) 0 0/calc(80*var(--u)) 100% repeat-x;mask:conic-gradient(from 135deg at 50% 100%,#000 90deg,transparent 0) 0 0/calc(80*var(--u)) 100% repeat-x}
.stop:first-of-type::before{display:none}

/* text */
.bism{font-family:var(--f-ar);font-size:calc(70*var(--u));line-height:1.55;color:var(--pink-d)}
.bism-en{margin:calc(-24*var(--u)) 0 0;font-size:max(14px,calc(36*var(--u)));line-height:1.4;color:var(--ink-soft)}
.eyebrow{font-family:var(--f-sign);font-size:max(14px,calc(40*var(--u)));letter-spacing:.06em;color:var(--teal)}
.sub{margin:calc(-16*var(--u)) 0 0;font-size:max(15px,calc(42*var(--u)));color:var(--ink-soft);font-weight:500}
.scrollhint{margin:0;font-family:var(--f-sign);font-size:max(13px,calc(32*var(--u)));color:var(--pink);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

/* yellow number plate with the couple's names */
.plate{position:relative;width:calc(900*var(--u));max-width:100%}
.plate img{width:100%}
.plate span{position:absolute;left:18%;right:18%;top:22%;bottom:22%;display:flex;align-items:center;justify-content:center;gap:.25em;flex-wrap:wrap;
  font-family:var(--f-sign);font-size:calc(70*var(--u));line-height:1;color:var(--ink);white-space:nowrap;text-shadow:0 2px 0 rgba(255,255,255,.6)}
.plate span i{font-style:normal;color:var(--pink);font-size:.75em}
#opening .plate{width:min(86vw,380px)}
#opening .plate span{font-size:min(7.6vw,34px)}

/* hanging signboard as the section title */
.sign{position:relative;width:calc(820*var(--u));animation:hang 4.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes hang{0%,100%{transform:rotate(1.2deg)}50%{transform:rotate(-1.2deg)}}
.sign img{width:100%}
.sign h2{position:absolute;left:12%;right:12%;top:34%;bottom:17%;margin:0;display:grid;place-items:center;font-family:var(--f-sign);font-weight:400;font-size:calc(80*var(--u));line-height:1;color:var(--pink-d);letter-spacing:.02em}

.card{position:relative;width:100%;background:var(--paper);border-radius:calc(28*var(--u));padding:calc(40*var(--u)) calc(44*var(--u));
  box-shadow:0 0 0 calc(6*var(--u)) var(--yellow),0 0 0 calc(12*var(--u)) var(--pink),0 calc(16*var(--u)) calc(30*var(--u)) rgba(45,27,61,.18)}
.dua .ar{font-family:var(--f-ar);font-size:calc(54*var(--u));line-height:1.75;color:var(--green)}
.dua p{margin:calc(4*var(--u)) 0 0;font-size:max(15px,calc(38*var(--u)));line-height:1.45;color:var(--ink-soft)}
.signoff{margin-top:calc(18*var(--u));padding-top:calc(14*var(--u));border-top:2px dashed rgba(232,36,123,.35);font-family:var(--f-sign);font-size:max(14px,calc(36*var(--u)));color:var(--pink-d)}

/* dawat */
.invite{display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--u))}
.dear{font-family:var(--f-sign);font-size:max(17px,calc(48*var(--u)));color:var(--teal)}
.sal{font-family:var(--f-sign);font-size:max(14px,calc(36*var(--u)));color:var(--green)}
.hosts{font-weight:700;font-size:max(16px,calc(44*var(--u)))}
.invite p{margin:0;font-size:max(15px,calc(40*var(--u)));line-height:1.5;color:var(--ink-soft)}
.invite .nm{font-family:var(--f-sign);font-size:calc(80*var(--u));line-height:1.1;color:var(--pink-d)}
.joiner{font-weight:600;font-size:max(14px,calc(36*var(--u)));color:var(--teal);margin:calc(-8*var(--u)) 0}
.invite small{font-size:max(13px,calc(32*var(--u)));color:var(--ink-soft)}

/* date: the fare ticket */
.fare{position:relative;width:calc(600*var(--u));transform:rotate(-2deg);filter:drop-shadow(0 calc(14*var(--u)) calc(18*var(--u)) rgba(45,27,61,.25))}
.fare > img{width:100%}
.f-main{position:absolute;left:12%;right:12%;top:26%;bottom:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--u))}
.fl{font-weight:600;font-size:max(12px,calc(28*var(--u)));color:var(--ink-soft)}
.fev{font-family:var(--f-sign);font-size:calc(66*var(--u));color:var(--teal);line-height:1}
.fwk{font-family:var(--f-sign);font-size:max(14px,calc(36*var(--u)));color:var(--pink-d);margin-top:calc(10*var(--u))}
.fday{font-family:var(--f-sign);font-size:calc(200*var(--u));line-height:.95;color:var(--ink)}
.fmon{font-family:var(--f-sign);font-size:max(14px,calc(38*var(--u)));color:var(--ink)}
.f-stub{position:absolute;left:14%;right:14%;top:83%;bottom:6%;display:flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:max(12px,calc(28*var(--u)));color:var(--ink-soft)}
.f-stub b{font-family:var(--f-sign);font-weight:400;font-size:max(15px,calc(40*var(--u)));color:var(--pink-d)}
.venue{display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u))}
.venue .lab{font-family:var(--f-sign);font-size:max(13px,calc(30*var(--u)));color:var(--teal);letter-spacing:.06em}
.venue b{font-family:var(--f-sign);font-weight:400;font-size:max(18px,calc(52*var(--u)));color:var(--ink)}
.venue .addr{font-size:max(14px,calc(36*var(--u)));color:var(--ink-soft)}
.prog{list-style:none;margin:calc(18*var(--u)) 0 0;padding:0;width:calc(800*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.prog li{display:flex;align-items:baseline;gap:calc(14*var(--u));font-size:max(15px,calc(40*var(--u)))}
.prog li b{font-family:var(--f-sign);font-weight:400;color:var(--pink-d);white-space:nowrap}
.prog li i{flex:1;border-bottom:2px dotted var(--teal);transform:translateY(-.3em)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 22px;margin-top:calc(24*var(--u));cursor:pointer;text-decoration:none;border-radius:99px;
  font-family:var(--f-sign);font-size:15px;letter-spacing:.03em;color:var(--pink-d);background:#fff;border:2px solid var(--pink);box-shadow:0 3px 0 var(--pink)}
.btn svg{width:16px;height:16px}
.btn.solid{background:var(--pink);color:#fff;border-color:var(--pink-d);box-shadow:0 4px 0 var(--pink-d)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pink)}
.btn:focus-visible,.inp:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* countdown: the fare meter */
.meterwrap{display:flex;align-items:flex-end;justify-content:center;gap:calc(10*var(--u));width:100%}
.meter{position:relative;width:calc(720*var(--u))}
.meter > img{width:100%}
.m-win{position:absolute;left:15%;right:20%;top:36%;bottom:37%;display:flex;align-items:center;justify-content:center;gap:calc(4*var(--u));
  background:#1C2B22;border-radius:calc(12*var(--u));box-shadow:inset 0 calc(4*var(--u)) calc(10*var(--u)) rgba(0,0,0,.6)}
.m-win b{font-family:var(--f-sign);font-weight:400;font-size:calc(66*var(--u));color:#7CFF9B;text-shadow:0 0 calc(10*var(--u)) rgba(124,255,155,.7);font-variant-numeric:tabular-nums;min-width:1.1em}
.m-win i{font-style:normal;font-family:var(--f-sign);font-size:calc(50*var(--u));color:#7CFF9B;opacity:.7;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.pump{width:calc(200*var(--u))}
.m-win,.m-lab,.meterwrap{direction:ltr}
.m-lab{display:grid;grid-template-columns:repeat(4,1fr);width:calc(520*var(--u));margin:calc(-30*var(--u)) calc(200*var(--u)) 0 0;font-family:var(--f-sign);font-size:max(11px,calc(26*var(--u)));color:var(--teal)}
.until{margin:0;font-size:max(15px,calc(42*var(--u)));color:var(--ink-soft);font-weight:500}
.until b{font-family:var(--f-sign);font-weight:400;color:var(--pink-d)}
.cdnote{margin:0;font-family:var(--f-sign);font-size:max(18px,calc(50*var(--u)));color:var(--green)}

/* families */
.fam{display:grid;grid-template-columns:1fr 1fr;gap:calc(40*var(--u));width:100%}
.fam .card{display:flex;flex-direction:column;gap:calc(6*var(--u));padding:calc(36*var(--u)) calc(20*var(--u))}
.fam h3{margin:0 0 calc(8*var(--u));font-family:var(--f-sign);font-weight:400;font-size:max(14px,calc(36*var(--u)));color:var(--teal)}
.fam span{font-weight:600;font-size:max(14px,calc(36*var(--u)));line-height:1.35}
.chai{width:calc(560*var(--u))}

/* story: the rickshaw's painted back panel */
.panel{position:relative;width:calc(860*var(--u))}
.panel > img{width:100%}
.p-in{position:absolute;left:12%;right:12%;top:23%;bottom:35%;display:grid}
.p-in .st{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6*var(--u));opacity:0;transform:scale(.96);transition:opacity .6s,transform .6s}
.p-in .st.on{opacity:1;transform:none}
.st .when{font-family:var(--f-sign);font-size:max(12px,calc(30*var(--u)));color:var(--teal)}
.st h4{margin:0;font-family:var(--f-sign);font-weight:400;font-size:calc(62*var(--u));color:var(--pink-d);line-height:1.05}
.st p{margin:0;font-size:max(13px,calc(34*var(--u)));line-height:1.35;color:var(--ink-soft)}
.dots{display:flex;gap:10px;margin-top:calc(-20*var(--u))}
.dots button{width:13px;height:13px;border-radius:50%;border:2px solid var(--pink);background:#fff;padding:0;cursor:pointer}
.dots button.on{background:var(--pink)}

/* events: green road signs */
.events{display:flex;flex-direction:column;align-items:center;gap:calc(60*var(--u));width:100%}
.ev{display:flex;flex-direction:column;align-items:center;gap:calc(12*var(--u));width:100%}
.rsign{position:relative;width:calc(900*var(--u))}
.rsign > img{width:100%}
.rs-in{position:absolute;left:5%;right:15%;top:6%;height:40%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:4%;color:#fff;text-align:start}
.rs-in h3{margin:0;font-family:var(--f-sign);font-weight:400;font-size:calc(74*var(--u));line-height:1}
.rs-in span{font-weight:600;font-size:max(12px,calc(30*var(--u)));opacity:.95}
.ev .vn{font-family:var(--f-sign);font-size:max(17px,calc(46*var(--u)));color:var(--ink)}
.ev .ad{font-size:max(14px,calc(34*var(--u)));color:var(--ink-soft)}
.ev .note{font-weight:600;font-size:max(14px,calc(36*var(--u)));color:var(--pink-d)}
.ev .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ev .btns .btn{margin-top:0;min-height:42px;padding:8px 16px;font-size:13.5px}
html.ur .rs-in{align-items:flex-end;left:15%;right:5%;padding:0 4% 0 0;text-align:end}

/* rsvp: the booking kiosk */
.kiosk{position:relative;width:calc(560*var(--u))}
.kiosk > img{width:100%}
.kiosk span{position:absolute;left:18%;right:18%;top:6%;height:17%;display:grid;place-items:center;font-family:var(--f-sign);font-size:calc(52*var(--u));color:var(--pink-d);line-height:1}
.rs{text-align:start}
.f{display:flex;flex-direction:column;gap:4px;margin-top:calc(28*var(--u))}
.f:first-child{margin-top:0}
.f > span,legend{font-family:var(--f-sign);font-size:max(13px,calc(32*var(--u)));color:var(--teal);letter-spacing:.02em}
.inp{width:100%;font-family:var(--f-body);font-weight:500;font-size:17px;color:var(--ink);background:#fff;border:2px solid #F3D9E5;border-radius:12px;padding:9px 12px;outline:none;resize:none}
.inp:focus{border-color:var(--pink)}
fieldset{border:0;margin:calc(28*var(--u)) 0 0;padding:0}
legend{padding:0;margin-bottom:8px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{display:grid;place-items:center;text-align:center;min-height:46px;padding:8px 6px;cursor:pointer;font-weight:700;font-size:15px;border:2px solid #F3D9E5;border-radius:12px;background:#fff;transition:.2s}
.choice input:checked + label{background:var(--green);border-color:var(--green);color:#fff}
.choice input:focus-visible + label{outline:2px solid var(--teal);outline-offset:2px}
.err{color:#B3261E;font-size:15px;margin:12px 0 0;font-weight:600}
#rsvp .btn{width:100%;margin-top:calc(36*var(--u))}
.done{display:flex;flex-direction:column;gap:12px;text-align:center;font-weight:600;font-size:16px}
.done .btn{margin-top:0}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:calc(34*var(--u));padding-top:calc(24*var(--u));border-top:2px dashed #F3D9E5;font-size:15px;color:var(--ink-soft);text-align:center}
.wa{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-weight:700}
.wa svg{width:20px;height:20px}

/* thanks */
.birds{width:calc(300*var(--u));top:calc(160*var(--u));animation:fly 14s linear infinite}
@keyframes fly{from{left:calc(1150*var(--u))}to{left:calc(-350*var(--u))}}
.k3{top:calc(150*var(--u));right:calc(60*var(--u));width:calc(110*var(--u))}

/* the street at the bottom */
.ride{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:var(--col);height:calc(var(--rideH) + env(safe-area-inset-bottom,0px));overflow:hidden;
  background:linear-gradient(#9BDCF6,#CDEFFB);box-shadow:0 -6px 20px rgba(45,27,61,.18)}
.ride::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:4;background:linear-gradient(90deg,var(--pink) 0 20%,var(--yellow) 20% 40%,var(--teal) 40% 60%,var(--green) 60% 80%,var(--orange) 80%)}
.road{position:absolute;left:0;top:0;height:var(--rideH);display:flex;direction:ltr;will-change:transform}
.ride,.o-street{direction:ltr}
.road img{height:100%;width:auto;max-width:none;flex:none}
.road img + img{margin-left:calc(var(--rideH) * 1.776 * -.06);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%);mask-image:linear-gradient(90deg,transparent,#000 6%)}
.ride .rick{left:16%;bottom:calc(env(safe-area-inset-bottom,0px) + var(--rideH) * .024);height:calc(var(--rideH) * .46);transition:transform .25s}
.smoke{position:absolute;inset:0;pointer-events:none;z-index:2}
.smoke img{position:absolute;width:calc(var(--rideH) * .14);animation:puff 1.4s ease-out forwards}
@keyframes puff{from{opacity:.85;transform:translate(0,0) scale(.4)}to{opacity:0;transform:translate(calc(var(--d,-1) * 40px),-30px) scale(1.4)}}

/* reveal */
.js .stop > :not(.mv){opacity:0;transform:translateY(calc(26*var(--u)));transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .stop.in > :not(.mv){opacity:1;transform:none}
.js .stop > .sign{transform:none}
.js .stop > .fare{transform:rotate(-2deg)}

/* ================= URDU ================= */
html.ur body{font-family:var(--f-ur)}
html.ur .sign h2,html.ur .plate span,html.ur .eyebrow,html.ur .o-pre,html.ur .horn span,html.ur .fev,html.ur .fwk,html.ur .fmon,html.ur .venue b,html.ur .venue .lab,html.ur .rs-in h3,html.ur .ev .vn,html.ur .st h4,html.ur .st .when,
html.ur .invite .nm,html.ur .dear,html.ur .sal,html.ur .fam h3,html.ur .f > span,html.ur legend,html.ur .btn,html.ur .kiosk span,html.ur .m-lab,html.ur .scrollhint,html.ur .signoff,html.ur .until b,html.ur .cdnote,html.ur .f-stub b,html.ur .prog li b{font-family:var(--f-ur);font-weight:600;letter-spacing:0}
html.ur .sign h2{font-size:calc(58*var(--u));line-height:2}
html.ur .plate span{font-size:calc(60*var(--u));line-height:1.9}
html.ur #opening .plate span{font-size:min(5.6vw,25px)}
html.ur .invite .nm{font-size:calc(58*var(--u));line-height:1.9}
html.ur .rs-in h3{font-size:calc(54*var(--u));line-height:1.8}
html.ur .st h4{font-size:calc(46*var(--u));line-height:1.8}
html.ur .fev{font-size:calc(48*var(--u));line-height:1.8}
html.ur .kiosk span{font-size:calc(38*var(--u))}
html.ur .invite p,html.ur .dua p,html.ur .sub,html.ur .st p,html.ur .until,html.ur .bism-en,html.ur .ev .note,html.ur .done,html.ur .choice label,html.ur .prog li span,html.ur .venue .addr{line-height:2;font-weight:400}
html.ur .inp{font-family:var(--f-ur);font-size:15px;line-height:1.9}
html.ur .fday,html.ur .m-win b{font-family:var(--f-sign)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .birds{display:none}
}