/* Shaadi Express — digital wedding card styles
   Layout: one phone-width column. 1 unit (--u) = 1px of the 1080 x 2340 art canvas. */
:root{
  --col:min(100vw,460px); --u:calc(var(--col)/1080);
  --H:clamp(calc(1800*var(--u)),100svh,calc(2340*var(--u)));
  --paper:#FBCB80; --paper-l:#FCD9A0; --cream:#FBF0D6; --cream-d:#F3E1B8;
  --green:#1E4A33; --green-d:#123324; --green-l:#2F6B4A;
  --maroon:#7C1E22; --maroon-d:#5A1216; --mustard:#E6A92A; --mustard-l:#F5C95A; --brass:#B8862F;
  --ink:#2E2015; --ink-soft:#5E4630;
  --f-disp:"Abril Fatface",Georgia,serif; --f-caps:"Oswald","Arial Narrow",sans-serif;
  --f-body:"Lora",Georgia,serif; --f-ar:"Amiri",serif; --f-ur:"Noto Nastaliq Urdu",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#132A1E;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--f-body);
  background:#132A1E repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 46px)}
img{display:block;max-width:100%}
button{font:inherit}
.caps{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.14em}

/* ================= OPENING ================= */
#doorIntro{position:relative;height:340vh;background:#2B1A10}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.scene{position:absolute;left:50%;top:50%;container-type:inline-size;
  transform:translate(-50%,-50%) translateY(var(--ty,0%)) scale(var(--z,1));will-change:transform}
.scene > img[data-img]{width:100%;height:100%;object-fit:cover}
.scene.through{transition:transform .9s cubic-bezier(.6,0,.4,1),opacity .9s;opacity:.0}
.door{position:absolute;overflow:hidden}
.door-light{position:absolute;inset:0;opacity:0;transition:opacity .8s .2s;
  background:radial-gradient(ellipse 80% 60% at 50% 45%,#FFF9E8 0%,#FFE6A8 38%,#F2B85A 75%,#B8742A 100%)}
.door-light i{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.35) 0 6deg,transparent 6deg 18deg);
  mix-blend-mode:soft-light;animation:spin 18s linear infinite}
.leaf{position:absolute;top:0;width:50%;height:100%;overflow:hidden;transition:transform 1.7s cubic-bezier(.55,.05,.25,1)}
.leaf.l{left:0}.leaf.r{right:0}
.leaf img{position:absolute;max-width:none;height:auto}
.leaf::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1.2s;background:rgba(30,15,5,.35)}
.opening .door-light{opacity:1}
.opening .leaf.l{transform:translateX(-101%)}
.opening .leaf.r{transform:translateX(101%)}
.opening .leaf::after{opacity:1}
.garland-front{position:absolute;left:32.23%;top:30.6%;width:37.11%;height:auto;pointer-events:none;z-index:2}
.steam-o{position:absolute;width:30%;pointer-events:none;z-index:2;opacity:0;animation:steamUp 7s ease-out infinite}
.steam-o.s1{left:-2%;top:62%}.steam-o.s2{left:6%;top:66%;animation-delay:3.4s;width:24%}
@keyframes steamUp{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.75}100%{opacity:0;transform:translate(14cqi,-26cqi) scale(1.5)}}
.nameplate{position:absolute;left:50%;transform:translateX(-50%);width:min(84%,92vw);top:77.5%;padding:1.4cqi 0 2cqi;border-radius:50%;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(252,232,192,.92),rgba(252,232,192,.6) 60%,transparent 75%);display:flex;flex-direction:column;align-items:center;gap:1cqi;text-align:center;pointer-events:none}
.nameplate .ep{font-family:var(--f-caps);font-size:min(2.9cqi,3.4vw);letter-spacing:.32em;text-transform:uppercase;color:var(--maroon)}
.nameplate .nm{font-family:var(--f-disp);font-size:min(8.4cqi,10.5vw);line-height:1.05;color:var(--maroon);text-shadow:.5cqi .5cqi 0 var(--mustard-l)}
.nameplate .nm em{font-family:var(--f-body);font-style:italic;font-size:.62em;color:var(--green);text-shadow:none;margin:0 .1em}
.nameplate .dt{font-family:var(--f-caps);font-size:min(2.8cqi,3.3vw);letter-spacing:.26em;text-transform:uppercase;color:var(--green);
  border-top:.25cqi solid currentColor;border-bottom:.25cqi solid currentColor;padding:.6cqi 2cqi}
.seal{position:absolute;width:25cqi;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;padding:0;cursor:pointer;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3cqi;
  background:radial-gradient(circle at 40% 35%,#FCD86E,var(--mustard) 60%,#C98A1A);color:var(--green-d);
  border:1cqi solid var(--green);box-shadow:0 0 0 .6cqi var(--mustard-l),0 1.6cqi 4cqi rgba(0,0,0,.45),inset 0 0 0 .5cqi rgba(255,255,255,.35);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.seal small{font-family:var(--f-caps);font-size:2.1cqi;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.seal strong{font-family:var(--f-disp);font-weight:400;font-size:6cqi;line-height:1}
.seal small:last-child{font-size:1.6cqi;letter-spacing:.16em;border-top:.2cqi solid currentColor;padding-top:.4cqi}
.seal:not(.near){opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.seal.ready{animation:sealPulse 2s ease-in-out infinite}
@keyframes sealPulse{50%{box-shadow:0 0 0 .6cqi var(--mustard-l),0 0 0 3.4cqi rgba(245,201,90,.35),0 1.6cqi 4cqi rgba(0,0,0,.45),inset 0 0 0 .5cqi rgba(255,255,255,.35)}}
.opening .seal{opacity:0;transform:translate(-50%,-50%) scale(.85);pointer-events:none;animation:none}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 16px;border-radius:8px;background:rgba(18,51,36,.82);color:var(--cream);white-space:nowrap;
  font-family:var(--f-caps);font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:opacity .3s;border:1px solid rgba(245,201,90,.5)}
.hint svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
#flash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle at 50% 45%,#FFFBEF 0%,#FFE7B0 50%,#F5C26A 100%)}
#flash.on{opacity:1}
#petals{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}

/* ================= FIXED CONTROLS ================= */
.langbtn,.replay,.musicbtn{position:fixed;z-index:70;cursor:pointer;color:var(--cream);background:rgba(18,51,36,.86);
  border:1px solid rgba(245,201,90,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.langbtn{top:calc(34px + env(safe-area-inset-top,0px));left:max(12px,calc(env(safe-area-inset-left,0px) + 12px));padding:6px 13px;border-radius:7px;
  font-family:var(--f-ur);font-size:14px;line-height:1.9}
#doorIntro:not([hidden]) ~ .langbtn{top:calc(14px + env(safe-area-inset-top,0px))}
html.ur .langbtn{font-family:var(--f-caps);font-size:13px;letter-spacing:.12em;line-height:1.6}
.replay{top:calc(34px + env(safe-area-inset-top,0px));right:max(12px,calc(env(safe-area-inset-right,0px) + 12px));display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:7px;font-family:var(--f-caps);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.replay svg{width:14px;height:14px}
.musicbtn{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(14px,calc(env(safe-area-inset-right,0px) + 14px));width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.musicbtn svg{width:22px;height:22px}
.musicbtn .slash{display:none}.musicbtn.off{color:#B9A98C}.musicbtn.off .slash{display:inline}
.musicbtn:not(.off) svg{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.1)}}
@media (min-width:461px){ .langbtn{left:calc(50% - 230px + 12px)} .replay{right:calc(50% - 230px + 12px)} .musicbtn{right:calc(50% - 230px + 14px)} }

/* journey bar */
.journey{position:fixed;z-index:65;top:0;left:50%;transform:translateX(-50%);width:var(--col);height:calc(26px + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);background:linear-gradient(var(--green-d),var(--green));border-bottom:2px solid var(--mustard);pointer-events:none}
.journey .rail{position:absolute;left:12px;right:12px;bottom:6px;height:5px;
  border-top:1.5px solid #C9A060;border-bottom:1.5px solid #C9A060;
  background:repeating-linear-gradient(90deg,rgba(201,160,96,.8) 0 2px,transparent 2px 7px)}
.journey .stops{position:absolute;left:12px;right:12px;bottom:4.5px;height:8px}
.journey .stops i{position:absolute;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--green-d);border:1.5px solid #C9A060;transition:background .3s}
.journey .stops i.on{background:var(--mustard-l);border-color:var(--mustard-l)}
.journey .mini{position:absolute;left:12px;bottom:6px;width:58px;height:auto;transform:translateX(calc(var(--jp,0) * (var(--col) - 24px) - 52px));transition:transform .25s linear}
html.ur .journey .mini{transform:translateX(calc(var(--jp,0) * (var(--col) - 24px) - 52px)) }

/* ================= CARD BASE ================= */
#card{position:relative;width:var(--col);margin:0 auto;background:var(--paper);overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.45)}
.sec{position:relative;min-height:var(--H);overflow:hidden;--off:calc((2340*var(--u) - var(--H)) / 2)}
.bgw,.bgl{position:absolute;left:0;width:100%;height:calc(2340*var(--u));top:50%;transform:translateY(-50%);pointer-events:none}
.bgw img{width:100%;height:100%}
.bgw.at-top,.bgl.top{top:0;transform:none}
.bgl > [style*="--x"]{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.el{position:absolute;pointer-events:none;height:auto}
.mv{position:absolute;pointer-events:none}
.mv img{width:100%;height:auto}
.content{position:relative;z-index:3;padding:calc(250*var(--u)) calc(70*var(--u)) 0;text-align:center}

/* reveal on scroll */
.js .rise{opacity:0;transform:translateY(calc(40*var(--u)));transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .sec.in .rise{opacity:1;transform:none}
.sec.in .rise:nth-child(2){transition-delay:.12s}.sec.in .rise:nth-child(3){transition-delay:.24s}.sec.in .rise:nth-child(4){transition-delay:.36s}.sec.in .rise:nth-child(5){transition-delay:.48s}

/* section heads: stop number + enamel station sign */
.head{display:flex;flex-direction:column;align-items:center;gap:calc(22*var(--u));margin-bottom:calc(56*var(--u))}
.stop{display:flex;align-items:center;gap:calc(18*var(--u));font-size:max(10px,calc(26*var(--u)));letter-spacing:.34em;color:var(--maroon);font-weight:500}
.stop::before,.stop::after{content:"";width:calc(70*var(--u));height:calc(10*var(--u));
  border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.7;
  background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px calc(14*var(--u)));background-clip:content-box}
.sign{margin:0;display:inline-block;position:relative;font-family:var(--f-caps);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:calc(62*var(--u));line-height:1.15;color:var(--cream);background:var(--green);
  padding:calc(16*var(--u)) calc(56*var(--u));border-radius:calc(14*var(--u));
  box-shadow:inset 0 0 0 calc(7*var(--u)) var(--green),inset 0 0 0 calc(11*var(--u)) var(--cream),calc(10*var(--u)) calc(10*var(--u)) 0 var(--maroon)}
.sign::before,.sign::after{content:"";position:absolute;top:50%;width:calc(12*var(--u));height:calc(12*var(--u));margin-top:calc(-6*var(--u));border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFE9A8,var(--brass))}
.sign::before{left:calc(22*var(--u))}.sign::after{right:calc(22*var(--u))}
.sub{margin:0;font-style:italic;font-size:max(13px,calc(38*var(--u)));color:var(--ink-soft)}
.medal{width:calc(170*var(--u))}
.plate{background:var(--cream);border-radius:calc(18*var(--u));padding:calc(34*var(--u)) calc(44*var(--u));
  box-shadow:inset 0 0 0 calc(5*var(--u)) var(--cream),inset 0 0 0 calc(8*var(--u)) var(--green),0 calc(10*var(--u)) calc(30*var(--u)) rgba(70,40,10,.25)}
.plate .ar{font-family:var(--f-ar);font-size:calc(52*var(--u));line-height:1.7;color:var(--green)}
.plate p{margin:calc(8*var(--u)) 0 0;font-style:italic;font-size:max(13px,calc(34*var(--u)));line-height:1.5;color:var(--ink-soft)}

/* buttons */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border:0;border-radius:8px;cursor:pointer;text-decoration:none;
  font-family:var(--f-caps);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);background:linear-gradient(#F7CF63,var(--mustard));box-shadow:0 4px 0 #A8731A,0 8px 16px rgba(80,45,0,.25);transition:transform .15s,box-shadow .15s}
.pbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #A8731A}
.pbtn svg{width:16px;height:16px}
.pbtn.o{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}

/* ================= 1 · COVER ================= */
.s-cover{min-height:max(var(--H),calc(1900*var(--u)))}
.cover-top{position:relative;z-index:3;padding:calc(200*var(--u)) calc(50*var(--u)) 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.bism{font-family:var(--f-ar);font-size:calc(66*var(--u));color:var(--green);line-height:1.6}
.bism-en{margin:calc(4*var(--u)) 0 0;font-style:italic;font-size:max(12px,calc(30*var(--u)));line-height:1.45;color:var(--ink-soft)}
.banner{margin:calc(40*var(--u)) 0 calc(30*var(--u));position:relative;background:var(--maroon);color:var(--cream);
  font-family:var(--f-caps);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:max(10px,calc(28*var(--u)));
  padding:calc(12*var(--u)) calc(70*var(--u));clip-path:polygon(0 0,100% 0,calc(100% - 26*var(--u)) 50%,100% 100%,0 100%,calc(26*var(--u)) 50%)}
.wed-of{font-size:max(11px,calc(32*var(--u)));letter-spacing:.36em;color:var(--green);font-weight:500}
.nm{font-family:var(--f-disp);font-weight:400;color:var(--maroon)}
.nm.cn{margin-top:calc(14*var(--u));font-size:calc(122*var(--u));line-height:1.1;text-shadow:calc(6*var(--u)) calc(6*var(--u)) 0 var(--mustard-l);white-space:nowrap}
.nm em{font-family:var(--f-body);font-style:italic;font-weight:400;color:var(--green);font-size:.6em;margin:0 .22em;text-shadow:none}
.s-cover .couple{width:calc(540*var(--u));right:calc(26*var(--u));bottom:calc(320*var(--u));z-index:2;filter:drop-shadow(0 calc(14*var(--u)) calc(18*var(--u)) rgba(60,30,5,.35))}
.s-cover .luggage{width:calc(300*var(--u));left:calc(40*var(--u));bottom:calc(360*var(--u));z-index:2;transform:translateY(var(--py,0px));filter:drop-shadow(0 calc(10*var(--u)) calc(12*var(--u)) rgba(60,30,5,.35))}
.duabox{position:absolute;z-index:3;left:calc(70*var(--u));right:calc(70*var(--u));bottom:calc(80*var(--u));text-align:center}
.puffs img{position:absolute;width:calc(150*var(--u));left:calc(-75*var(--u));top:calc(-60*var(--u));opacity:0;animation:puff 5.4s ease-out infinite}
.puffs img:nth-child(2){animation-delay:1.8s}.puffs img:nth-child(3){animation-delay:3.6s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.35)}15%{opacity:.9}100%{opacity:0;transform:translate(calc(-120*var(--u)),calc(-260*var(--u))) scale(1.4)}}
.bird{width:calc(84*var(--u));animation:fly 22s linear infinite}
.bird img{animation:flap .5s ease-in-out infinite alternate;transform-origin:50% 60%}
.bird.b1{top:calc(940*var(--u));animation-delay:-4s}
.bird.b2{top:calc(1010*var(--u));width:calc(60*var(--u));animation-delay:-13s;animation-duration:26s}
.bird.b3{top:calc(820*var(--u));animation-delay:-8s}
.bird.b4{top:calc(1150*var(--u));animation-delay:-2s}
.bird.b5{top:calc(1220*var(--u));width:calc(58*var(--u));animation-delay:-14s;animation-duration:27s}
@keyframes fly{0%{left:calc(-120*var(--u));transform:translateY(0)}25%{transform:translateY(calc(-40*var(--u)))}50%{transform:translateY(calc(10*var(--u)))}75%{transform:translateY(calc(-30*var(--u)))}100%{left:calc(1180*var(--u));transform:translateY(0)}}
@keyframes flap{from{transform:scaleY(1) rotate(-2deg)}to{transform:scaleY(.72) rotate(3deg)}}

/* ================= 2 · DAWAT ================= */
.s-dawat{background:var(--paper)}
.frame{position:absolute;inset:calc(34*var(--u)) calc(24*var(--u));border-style:solid;border-width:calc(150*var(--u));
  border-image:url("../assets/backgrounds/base-02-dawat.jpg") 160 fill / calc(150*var(--u)) stretch}
.s-dawat .content{position:absolute;inset:calc(190*var(--u)) calc(110*var(--u)) calc(400*var(--u));padding:0;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.s-dawat .head{margin:0}
.invite{display:flex;flex-direction:column;align-items:center;gap:calc(44*var(--u))}
.invite .sal{font-size:max(11px,calc(30*var(--u)));color:var(--green);letter-spacing:.3em;font-weight:500}
.invite .hosts{font-size:max(13px,calc(40*var(--u)));color:var(--maroon);letter-spacing:.16em;font-weight:500}
.invite p{margin:0;font-style:italic;font-size:max(14px,calc(40*var(--u)));line-height:1.6;color:var(--ink-soft);max-width:calc(760*var(--u))}
.couple-names{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--u))}
.couple-names .nm{font-size:calc(92*var(--u));line-height:1.15;text-shadow:calc(5*var(--u)) calc(5*var(--u)) 0 var(--mustard-l)}
.couple-names .joiner{font-style:italic;font-size:calc(40*var(--u));color:var(--green)}
.couple-names .grp{display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--u))}
.couple-names small{font-size:max(12px,calc(30*var(--u)));color:var(--ink-soft);font-style:italic}
.track{position:absolute;left:calc(140*var(--u));right:calc(140*var(--u));bottom:calc(250*var(--u));height:calc(190*var(--u));overflow:hidden}
.track::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(16*var(--u));border-top:2px solid #6B3A1E;border-bottom:2px solid #6B3A1E;
  background:repeating-linear-gradient(90deg,#8A5530 0 calc(6*var(--u)),transparent calc(6*var(--u)) calc(26*var(--u)))}
.chug{bottom:calc(10*var(--u));width:calc(560*var(--u));left:0;animation:chug 15s linear infinite}
.chug > img{animation:rumble .35s ease-in-out infinite alternate}
@keyframes chug{from{transform:translateX(calc(-600*var(--u)))}to{transform:translateX(calc(820*var(--u)))}}
@keyframes rumble{to{transform:translateY(calc(-2*var(--u)))}}
.smoke img{position:absolute;width:calc(90*var(--u));right:calc(40*var(--u));top:calc(-40*var(--u));opacity:0;animation:puff 2.6s ease-out infinite}
.smoke img:nth-child(2){animation-delay:1.3s}

/* ================= 3 · DATE & TIME ================= */
.brk{width:calc(250*var(--u));top:calc(40*var(--u));z-index:2}
.brk.l{left:calc(14*var(--u))}
.brk.r{right:calc(14*var(--u));transform:scaleX(-1)}
.s-date .content{padding-top:calc(260*var(--u))}
.ticket{position:relative;width:calc(1010*var(--u));margin:0 calc(-35*var(--u));aspect-ratio:1200/456;filter:drop-shadow(0 calc(12*var(--u)) calc(18*var(--u)) rgba(70,40,10,.3));transform:rotate(-1.2deg)}
.sec.in .ticket{transform:rotate(-1.2deg)}
.ticket > img{position:absolute;inset:0;width:100%;height:100%}
.t-band{position:absolute;left:2.4%;top:14%;bottom:14%;width:13%;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);font-size:max(10px,calc(28*var(--u)));font-weight:600;color:var(--green-d);letter-spacing:.24em}
.t-main{position:absolute;left:18.5%;right:24.5%;top:13%;bottom:13%;display:flex;align-items:center;gap:3%;text-align:center}
.t-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.t-sep{width:0;align-self:stretch;margin:4% 0;border-left:1.5px dashed rgba(124,30,34,.5)}
.t-day{font-family:var(--f-disp);font-size:calc(124*var(--u));line-height:1;color:var(--maroon)}
.t-wk{font-size:max(11px,calc(26*var(--u)));color:var(--green);font-weight:500;margin-top:calc(6*var(--u))}
.t-time{font-family:var(--f-caps);font-size:max(12.5px,calc(32*var(--u)));color:var(--ink);margin-top:calc(6*var(--u));font-weight:500;letter-spacing:.06em}
.t-lab{font-size:max(9px,calc(22*var(--u)));color:var(--maroon);letter-spacing:.28em}
.t-venue{font-weight:600;font-size:max(12.5px,calc(31*var(--u)));line-height:1.25;color:var(--green-d);margin:calc(6*var(--u)) 0}
.t-addr{font-size:max(10.5px,calc(23*var(--u)));line-height:1.35;color:var(--ink-soft)}
.t-stub{position:absolute;right:3.5%;width:15%;top:14%;bottom:14%;display:flex;align-items:center;justify-content:center;gap:calc(10*var(--u));writing-mode:vertical-rl}
.t-stub span{font-size:max(9px,calc(20*var(--u)));color:var(--ink-soft);letter-spacing:.3em}
.t-stub b{font-size:max(12px,calc(38*var(--u)));color:var(--maroon);font-weight:600;letter-spacing:.16em}
.timetable{margin:calc(60*var(--u)) auto 0;max-width:calc(800*var(--u));background:var(--green-d);border-radius:calc(14*var(--u));
  padding:calc(24*var(--u)) calc(40*var(--u)) calc(14*var(--u));box-shadow:inset 0 0 0 calc(5*var(--u)) var(--green),inset 0 0 0 calc(7*var(--u)) var(--brass),0 calc(12*var(--u)) calc(26*var(--u)) rgba(40,20,0,.3)}
.tt-head{display:flex;justify-content:space-between;font-size:max(10px,calc(24*var(--u)));color:var(--mustard-l);letter-spacing:.28em;padding-bottom:calc(12*var(--u));border-bottom:1px solid rgba(245,201,90,.35)}
#schedule{list-style:none;margin:0;padding:0}
#schedule li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:calc(20*var(--u)) 0;border-bottom:1px dashed rgba(251,240,214,.2);color:var(--cream)}
#schedule li:last-child{border-bottom:0}
#schedule li span{font-size:max(14px,calc(38*var(--u)));text-align:start}
#schedule li b{font-family:var(--f-caps);font-weight:500;font-size:max(14px,calc(36*var(--u)));color:var(--mustard-l);letter-spacing:.06em;white-space:nowrap}
.details{margin-top:calc(60*var(--u))}

/* ================= 4 · COUNTDOWN ================= */
.clock .hand{position:absolute;max-width:none;left:0;top:0;transform-origin:50% 90.5%;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.3))}
.clock .hand.m{height:calc(170*var(--u));width:auto;margin-left:calc(-17*var(--u));margin-top:calc(-154*var(--u))}
.clock .hand.h{height:calc(118*var(--u));width:auto;margin-left:calc(-12*var(--u));margin-top:calc(-107*var(--u))}
.clock .hand.s{width:calc(5*var(--u));height:calc(170*var(--u));margin-left:calc(-2.5*var(--u));margin-top:calc(-140*var(--u));transform-origin:50% 82.4%;background:var(--maroon);border-radius:2px;filter:none}
.clock b{position:absolute;width:calc(18*var(--u));height:calc(18*var(--u));margin:calc(-9*var(--u));border-radius:50%;background:var(--maroon)}
.board{position:absolute;z-index:3;left:calc(70*var(--u));right:calc(70*var(--u));top:calc(1420*var(--u) - var(--off));
  background:#14251B;border-radius:calc(18*var(--u));padding:calc(26*var(--u)) calc(30*var(--u)) calc(30*var(--u));
  box-shadow:inset 0 0 0 calc(6*var(--u)) var(--green),inset 0 0 0 calc(9*var(--u)) var(--brass),0 calc(16*var(--u)) calc(34*var(--u)) rgba(30,15,0,.45)}
.b-head{display:flex;justify-content:center;gap:.8em;align-items:baseline;font-size:max(10px,calc(26*var(--u)));letter-spacing:.3em;color:var(--mustard-l);margin-bottom:calc(20*var(--u))}
.b-head b{color:var(--cream);font-weight:600}
.flaps{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:calc(16*var(--u))}
.fl{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--u))}
.fl b{position:relative;display:block;width:100%;font-family:var(--f-caps);font-weight:500;font-size:calc(92*var(--u));line-height:1.3;color:#FFF4D8;text-align:center;
  background:linear-gradient(#2A2A26 0 49.5%,#1A1A17 50.5% 100%);border-radius:calc(10*var(--u));box-shadow:inset 0 calc(-4*var(--u)) 0 rgba(0,0,0,.4),0 calc(3*var(--u)) 0 #0B0B09;perspective:300px}
.fl b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:#0A0A08}
.fl b.flip{animation:flip .45s cubic-bezier(.3,.6,.3,1)}
@keyframes flip{0%{transform:rotateX(0)}40%{transform:rotateX(-80deg);filter:brightness(.6)}100%{transform:rotateX(0)}}
.fl span{font-family:var(--f-caps);font-size:max(10px,calc(22*var(--u)));letter-spacing:.24em;text-transform:uppercase;color:var(--mustard-l)}
.cdnote{margin:0;color:var(--cream);font-style:italic;font-size:max(14px,calc(40*var(--u)));text-align:center;padding:calc(20*var(--u))}

/* ================= 5 · CELEBRATIONS ================= */
.nameboard{width:calc(470*var(--u));height:calc(140*var(--u));margin-left:calc(-235*var(--u));margin-top:calc(-70*var(--u));display:grid;place-items:center;perspective:400px}
.nameboard span{font-family:var(--f-caps);font-weight:600;font-size:calc(84*var(--u));letter-spacing:.12em;text-transform:uppercase;color:#1C1A14;line-height:1}
.nameboard span.flip{animation:flip .5s ease}
.evwrap{position:absolute;z-index:3;left:calc(60*var(--u));right:calc(60*var(--u));top:calc(1385*var(--u) - var(--off))}
.evnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:calc(18*var(--u))}
.evnav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--green);background:var(--cream);color:var(--green);cursor:pointer;display:grid;place-items:center}
.evnav button svg{width:18px;height:18px}
.dots{display:flex;gap:7px}.dots i{width:8px;height:8px;border-radius:50%;background:rgba(30,74,51,.3);transition:.3s}.dots i.on{background:var(--maroon);width:22px;border-radius:4px}
.evs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:calc(18*var(--u))}
.evs::-webkit-scrollbar{display:none}
.evs article{flex:0 0 100%;scroll-snap-align:center;text-align:center;background:var(--cream);border-radius:calc(18*var(--u));padding:calc(30*var(--u)) calc(40*var(--u)) calc(38*var(--u));
  box-shadow:inset 0 0 0 calc(5*var(--u)) var(--cream),inset 0 0 0 calc(8*var(--u)) var(--green)}
.evs .meta{font-size:max(11px,calc(28*var(--u)));color:var(--maroon);letter-spacing:.2em;font-weight:500}
.evs .venue{font-weight:600;font-size:max(15px,calc(42*var(--u)));color:var(--green-d);margin-top:calc(14*var(--u));line-height:1.3}
.evs .addr{font-size:max(12px,calc(30*var(--u)));color:var(--ink-soft);margin-top:calc(6*var(--u));line-height:1.4}
.evs .note{font-style:italic;font-size:max(12px,calc(30*var(--u)));color:var(--maroon);margin-top:calc(14*var(--u))}
.evs .btns{display:flex;gap:10px;justify-content:center;margin-top:calc(26*var(--u));flex-wrap:wrap}
.evs .btns .pbtn{padding:8px 16px;min-height:40px;font-size:12.5px}

/* ================= 6 · FAMILIES ================= */
.swag{left:calc(-40*var(--u));right:calc(-40*var(--u));top:calc(-50*var(--u));z-index:2;transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(.8deg) translateY(calc(6*var(--u)))}}
.s-family .content{padding-top:calc(330*var(--u))}
.fam{display:flex;flex-direction:column;align-items:center;gap:0}
.car{width:calc(800*var(--u));padding:calc(28*var(--u)) calc(40*var(--u)) calc(32*var(--u));border-radius:calc(20*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u));
  color:var(--cream);box-shadow:inset 0 0 0 calc(6*var(--u)) var(--bg),inset 0 0 0 calc(10*var(--u)) var(--brass),0 calc(12*var(--u)) calc(26*var(--u)) rgba(40,20,0,.3);background:var(--bg)}
.car.bride{--bg:var(--maroon)}.car.groom{--bg:var(--green)}
.car h3{margin:0 0 calc(8*var(--u));font-family:var(--f-caps);font-weight:500;text-transform:uppercase;letter-spacing:.28em;font-size:max(11px,calc(28*var(--u)));color:var(--mustard-l)}
.car span{font-size:max(15px,calc(42*var(--u)));line-height:1.35}
.coupler{display:flex;height:calc(70*var(--u));align-items:center}
.coupler i{width:calc(52*var(--u));height:calc(30*var(--u));border:calc(7*var(--u)) solid var(--brass);border-radius:calc(16*var(--u));margin:0 calc(-9*var(--u))}

/* ================= 7 · OUR JOURNEY (route map) ================= */
.s-story{min-height:max(var(--H),calc(2000*var(--u)))}
.routesvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#routePath{fill:none;stroke:none}
#routeDone{fill:none;stroke:#FFF4CF;stroke-width:26;stroke-linecap:round;opacity:.55}
.pin{width:calc(48*var(--u));height:calc(48*var(--u));margin:calc(-24*var(--u));border-radius:50%;background:var(--cream);border:calc(6*var(--u)) solid var(--maroon);transition:background .4s,transform .4s}
.pin.on{background:var(--mustard-l);transform:scale(1.25);box-shadow:0 0 0 calc(8*var(--u)) rgba(245,201,90,.45)}
.tt{position:absolute;left:0;top:0;height:auto;will-change:transform;filter:drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(4*var(--u)) rgba(40,20,0,.35))}
.tt.loco{width:calc(56*var(--u))}.tt.coach{width:calc(55*var(--u))}
.stations{position:absolute;inset:0;top:50%;height:calc(2340*var(--u));transform:translateY(-50%);z-index:3;pointer-events:none}
.st{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));
  background:var(--cream);border-radius:calc(14*var(--u));padding:calc(18*var(--u)) calc(24*var(--u)) calc(20*var(--u));text-align:start;
  box-shadow:inset calc(10*var(--u)) 0 0 var(--green),0 calc(10*var(--u)) calc(24*var(--u)) rgba(40,20,0,.3);
  opacity:0;transform:translateY(calc(30*var(--u))) scale(.94);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
html.ur .st{box-shadow:inset calc(-10*var(--u)) 0 0 var(--green),0 calc(10*var(--u)) calc(24*var(--u)) rgba(40,20,0,.3)}
.st.on{opacity:1;transform:none}
.st .when{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.2em;font-size:max(9px,calc(22*var(--u)));color:var(--maroon);padding-inline-start:calc(12*var(--u))}
.st h4{margin:calc(4*var(--u)) 0;font-family:var(--f-disp);font-weight:400;font-size:max(15px,calc(44*var(--u)));color:var(--green-d);padding-inline-start:calc(12*var(--u))}
.st p{margin:0;font-size:max(12px,calc(28*var(--u)));line-height:1.45;color:var(--ink-soft);padding-inline-start:calc(12*var(--u))}

/* ================= 8 · RSVP ================= */
.lamp{width:calc(130*var(--u));top:calc(430*var(--u));transform-origin:22% 4%;animation:swing 4.6s ease-in-out infinite;z-index:2}
.lamp.la{left:calc(-8*var(--u))}
.lamp.lb{right:calc(-8*var(--u));animation-delay:-2.3s}
.lamp.lb img{transform:scaleX(-1)}
.lamp.lb{transform-origin:78% 4%}
@keyframes swing{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
.s-date .lamp{display:none}
.s-rsvp .brk{display:none}
.s-rsvp .content{padding-top:calc(230*var(--u));padding-bottom:calc(520*var(--u))}
.slip{position:relative;text-align:start;background:var(--cream);border-radius:calc(10*var(--u));padding:calc(40*var(--u)) calc(50*var(--u)) calc(40*var(--u));
  box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(40,20,0,.3);
  -webkit-mask:radial-gradient(circle calc(12*var(--u)) at 50% 0,transparent 98%,#000) 0 0/calc(40*var(--u)) 51% repeat-x,radial-gradient(circle calc(12*var(--u)) at 50% 100%,transparent 98%,#000) 0 100%/calc(40*var(--u)) 51% repeat-x;
  mask:radial-gradient(circle calc(12*var(--u)) at 50% 0,transparent 98%,#000) 0 0/calc(40*var(--u)) 51% repeat-x,radial-gradient(circle calc(12*var(--u)) at 50% 100%,transparent 98%,#000) 0 100%/calc(40*var(--u)) 51% repeat-x}
.slip::before{content:"";position:absolute;inset:calc(26*var(--u)) calc(20*var(--u));border:1.5px solid rgba(30,74,51,.5);border-radius:calc(6*var(--u));pointer-events:none}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;font-size:max(10px,calc(25*var(--u)));color:var(--green);letter-spacing:.24em;font-weight:500;
  padding-bottom:calc(18*var(--u));margin-bottom:calc(10*var(--u));border-bottom:2px solid var(--green)}
.slip-head .no{color:var(--maroon);letter-spacing:.12em}
.f{display:flex;flex-direction:column;gap:4px;margin-top:calc(26*var(--u))}
.f > span,legend{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.16em;font-size:max(10px,calc(24*var(--u)));color:var(--ink-soft)}
.inp{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px dashed rgba(46,32,21,.5);padding:6px 2px;border-radius:0;outline:none;resize:none}
.inp:focus{border-bottom:2px solid var(--maroon)}
fieldset{border:0;margin:calc(26*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:44px;padding:8px 6px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.3;
  border:1.5px solid rgba(30,74,51,.45);color:var(--green);transition:.2s}
.choice input:checked + label{background:var(--green);color:var(--cream);border-color:var(--green)}
.choice input:focus-visible + label{outline:2px solid var(--maroon);outline-offset:2px}
.err{color:#9B1C1C;font-size:14px;margin:12px 0 0}
#rsvp .pbtn{width:100%;margin-top:calc(34*var(--u))}
.done{display:flex;flex-direction:column;gap:12px;margin-top:calc(30*var(--u));text-align:center;font-size:15px}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:calc(30*var(--u));padding-top:calc(22*var(--u));border-top:1px dashed rgba(46,32,21,.35);
  font-size:14px;color:var(--ink-soft);text-align:center}
.wa{display:inline-flex;align-items:center;gap:6px;color:var(--green-d);text-decoration:none;font-weight:600}
.wa svg{width:22px;height:22px}

/* ================= 9 · SHUKRIYA ================= */
.s-thanks .content{padding-top:calc(230*var(--u))}
.nm.ty{font-size:calc(116*var(--u));line-height:1.1;text-shadow:calc(6*var(--u)) calc(6*var(--u)) 0 var(--mustard-l);white-space:nowrap}
.endbox{margin:calc(56*var(--u)) auto 0;max-width:calc(880*var(--u))}
.signoff{margin-top:calc(22*var(--u));padding-top:calc(18*var(--u));border-top:1.5px solid rgba(30,74,51,.4);font-size:max(11px,calc(28*var(--u)));letter-spacing:.24em;color:var(--maroon);font-weight:500}
.foot{text-align:center;padding:16px 0 calc(70px + env(safe-area-inset-bottom,0px));font-family:var(--f-caps);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--green);background:var(--paper)}

/* ================= URDU ================= */
html.ur body{font-family:var(--f-ur)}
html.ur .caps,html.ur .sign,html.ur .stop,html.ur .banner,html.ur .pbtn,html.ur .hint,html.ur .replay span,html.ur .f > span,html.ur legend,
html.ur .t-lab,html.ur .tt-head,html.ur .b-head,html.ur .fl span,html.ur .car h3,html.ur .st .when,html.ur .seal small,html.ur .nameplate .ep,html.ur .evs .meta,html.ur .slip-head{
  font-family:var(--f-ur);letter-spacing:0;text-transform:none}
html.ur .sign{font-weight:600;font-size:calc(52*var(--u));line-height:2;padding:calc(4*var(--u)) calc(56*var(--u)) calc(10*var(--u))}
html.ur .nm,html.ur .nameplate .nm,html.ur .st h4,html.ur .nameboard span{font-family:var(--f-ur);font-weight:600;text-shadow:none;letter-spacing:0}
html.ur .nm.cn{font-size:calc(82*var(--u));line-height:2.1}
html.ur .nm.ty{font-size:calc(80*var(--u));line-height:2.1}
html.ur .couple-names .nm{font-size:calc(64*var(--u));line-height:2}
html.ur .nameplate .nm{font-size:min(5.2cqi,7vw);line-height:1.9}
html.ur .nameplate{top:75%}
html.ur .nm em{margin:0 .45em}
html.ur .nameboard span{font-size:calc(66*var(--u));line-height:2}
html.ur .t-day{font-family:var(--f-disp)}
html.ur .sub,html.ur .invite p,html.ur .plate p,html.ur .st p,html.ur .evs .note{font-style:normal;line-height:2.1}
html.ur .bism-en{font-style:normal;line-height:2.1}
html.ur .t-band,html.ur .t-stub{writing-mode:horizontal-tb;transform:none;flex-direction:column;text-align:center}
html.ur .t-band{font-size:max(10px,calc(24*var(--u)));line-height:1.7;padding:0 2px}
html.ur .t-addr{font-family:var(--f-body);line-height:1.3;font-size:max(9.5px,calc(22*var(--u)))}
html.ur .t-venue{line-height:1.6;font-size:max(11px,calc(26*var(--u)))}
html.ur html.ur .evs .venue,html.ur .evs .addr,html.ur .car span{line-height:2}
html.ur #schedule li span{line-height:2}
html.ur .choice label{line-height:1.9;font-size:13px}

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