/* style.css — layout, Hindi typography and every ambient/micro animation */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#2b0a14}
body{background:#2b0a14 radial-gradient(circle at 12px 12px,rgba(255,213,74,.18) 2px,transparent 3px) 0 0/26px 26px;font-family:Martel,serif;color:#5a1a1a;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1080px;height:1920px;transform-origin:50% 50%;overflow:hidden;background:#7a1f1f;box-shadow:0 0 120px rgba(0,0,0,.6)}
#stage.loading .txt,#stage.loading #ui{opacity:0}
.txt,#ui{transition:opacity .6s}

/* ---------------------------------------------------------------- scenes */
.scene{position:absolute;inset:0;display:none;overflow:hidden}
.scene.active,.scene.leaving{display:block}
.scene.leaving{z-index:1}
.scene.active{z-index:2}
.scene.enter{animation:reveal 1s cubic-bezier(.55,.05,.35,1) both}
@keyframes reveal{from{clip-path:circle(0% at var(--cx) var(--cy))}to{clip-path:circle(150% at var(--cx) var(--cy))}}
.art{position:absolute;inset:0;width:100%;height:100%;display:block}
.txt{position:absolute;left:0;top:var(--safe-top,0);width:1080px;height:1920px;pointer-events:none;z-index:3}
.txt a,.txt button{pointer-events:auto}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
#petals{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
#frame{position:absolute;inset:16px;border:6px double rgba(201,162,39,.85);border-radius:6px;z-index:8;pointer-events:none}
#ui{position:absolute;inset:0;z-index:9;pointer-events:none}
#ui button{pointer-events:auto;cursor:pointer}

/* ---------------------------------------------------------------- chrome */
#music{position:absolute;top:46px;right:46px;width:104px;height:104px;border-radius:50%;background:rgba(43,10,20,.72);border:3px solid #c9a227;display:grid;place-items:center}
#music svg{width:56px;height:56px;grid-area:1/1}
#music .slash{display:none}
#music.muted .slash{display:block}
#music.on:not(.muted) .note{animation:bob 1.2s ease-in-out infinite}
#hint{position:absolute;left:50%;bottom:150px;transform:translate(-50%,20px);display:flex;align-items:center;gap:18px;padding:14px 40px 20px 26px;border-radius:70px;background:rgba(43,10,20,.8);border:2.5px solid rgba(201,162,39,.8);color:#ffe9b0;font:600 38px/1.4 Martel,serif;white-space:nowrap;opacity:0;transition:opacity .5s,transform .5s;pointer-events:none}
#hint.show{opacity:1;transform:translate(-50%,0)}
#hint .tap{width:44px;height:44px;border-radius:50%;background:#ffd54a;position:relative;flex:none;box-shadow:0 0 0 0 rgba(255,213,74,.7);animation:tap 1.6s infinite}
#hint.done .tap{background:#7fd88a;animation:none;box-shadow:none}
#hint.done .tap::after{content:"";position:absolute;left:15px;top:9px;width:10px;height:20px;border:solid #1b5e20;border-width:0 5px 5px 0;transform:rotate(45deg)}
@keyframes tap{0%{box-shadow:0 0 0 0 rgba(255,213,74,.7)}70%{box-shadow:0 0 0 26px rgba(255,213,74,0)}100%{box-shadow:0 0 0 0 rgba(255,213,74,0)}}
#next,#prev{position:absolute;bottom:136px;width:112px;height:112px;border-radius:50%;border:4px solid #c9a227;background:radial-gradient(circle at 35% 30%,#e8822a,#a3122e 70%);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .4s,transform .3s}
#next{right:44px}#prev{left:44px;width:92px;height:92px;bottom:146px;background:rgba(43,10,20,.7)}
#next svg,#prev svg{width:52px;height:52px}
#next.ready,#next.nudge{animation:pulse 1.4s ease-in-out infinite}
#next.hide,#prev.hide{opacity:0;pointer-events:none!important}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12);box-shadow:0 0 0 14px rgba(255,213,74,.25)}}
#nav{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;gap:10px;padding:8px 22px;border-radius:50px;background:rgba(43,10,20,.55)}
#nav .nd{width:62px;height:62px;border:0;background:none;opacity:.5;transition:transform .3s,opacity .3s}
#nav .nd svg{width:100%;height:100%;overflow:visible}
#nav .nd .nf{fill:#ffb300;opacity:0;transform-origin:20px 20px;transition:opacity .4s}
#nav .nd.seen{opacity:.9}
#nav .nd.seen .nf{opacity:1;animation:flicker .9s ease-in-out infinite}
#nav .nd.cur{opacity:1;transform:scale(1.3)}
#nav .nd.cur svg{filter:drop-shadow(0 0 8px #ffd54a)}
#ui.on-gate #nav,#ui.on-gate #prev{opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- type */
.divider{display:block;width:360px;height:28px;margin:6px auto 10px}
.ic{width:1.05em;height:1.05em;flex:none}
.orn{color:#c9a227;font-family:serif}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px 18px;border-radius:60px;background:linear-gradient(#b3163a,#7a1f1f);color:#fff3d6;font:600 31px/1.3 Martel,serif;border:3px solid #c9a227;box-shadow:0 6px 0 rgba(60,10,10,.35);text-decoration:none;cursor:pointer}
.btn.alt{background:linear-gradient(#11798c,#0b4f5c)}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(60,10,10,.35)}

.gate-title{position:absolute;top:96px;left:0;width:1080px;text-align:center}
.gt-couple{font:700 78px/1.5 Amita,serif;color:#7a1f1f;text-shadow:0 2px 0 rgba(255,240,200,.7)}
.gt-welcome{font:400 124px/1.25 'Jaini',serif;color:#8e1b1b;text-shadow:0 4px 0 #f3c25b,0 8px 24px rgba(120,30,10,.35);animation:breatheText 4s ease-in-out infinite}
@keyframes breatheText{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

.inv{position:absolute;top:430px;left:120px;width:840px;text-align:center}
.inv-top{font:400 86px/1.3 'Jaini',serif;color:#8e1b1b}
.inv-doha{font:600 44px/1.65 Martel,serif;color:#5a1a1a}
.inv-doha span{display:block}
.inv-bottom{position:absolute;top:1450px;left:0;width:1080px;text-align:center;font:400 72px/1.3 'Jaini',serif;color:#8e1b1b;transition:text-shadow 1s}
.glowtext{text-shadow:0 0 18px #ffd54a,0 0 40px #ffb300}

.letter{position:absolute;top:760px;left:250px;width:580px;text-align:center;opacity:0;transform:translateY(20px);transition:opacity .8s 1s,transform .8s 1s}
.scene.open .letter{opacity:1;transform:none}
.l-greet{font:700 68px/1.5 Amita,serif;color:#a3122e}
.l-body{font:600 44px/1.75 Martel,serif;color:#4a1a1a;margin:22px 0}
.l-tail{font:800 46px/1.5 Martel,serif;color:#7a1f1f}

.person{position:absolute;top:120px;left:110px;width:860px;text-align:center}
.p-label{font:700 44px/1.4 Martel,serif;color:#7a1f1f;letter-spacing:4px}
.p-name{line-height:1.25;margin-top:8px}
.p-pre{font:700 46px Martel,serif;color:#5a1a1a;vertical-align:middle}
.p-main{font:700 118px Amita,serif;color:#0f5e6e;display:inline-block;vertical-align:middle}
.p-line{font:600 39px/1.62 Martel,serif;color:#4a1a1a}
.shine{animation:shine 1.6s ease-out}
@keyframes shine{0%{text-shadow:0 0 0 rgba(255,213,74,0);transform:scale(1)}35%{text-shadow:0 0 26px #ffd54a,0 0 60px #ffb300;transform:scale(1.08)}100%{text-shadow:0 0 0 rgba(255,213,74,0);transform:scale(1)}}

.parinay{position:absolute;top:96px;left:100px;width:880px;text-align:center}
.pa-couple{font:700 66px/1.5 Amita,serif;color:#0f5e6e}
.pa-couple span{font:700 44px Martel,serif;color:#a3122e;margin:0 10px}
.pa-ke{font:700 42px/1.3 Martel,serif;color:#5a1a1a}
.pa-title{font:400 108px/1.3 'Yatra One',serif;color:#8e1b1b;text-shadow:0 3px 0 #f6d27a}
.pa-title .orn{font-size:64px;vertical-align:middle;color:#c2185b}
.pa-line{font:600 42px/1.65 Martel,serif;color:#4a1a1a;margin-top:6px}

.evt{position:absolute;top:150px;left:100px;width:880px;text-align:center}
.evt-title{font:400 90px/1.3 'Yatra One',serif;color:#8e1b1b;text-shadow:0 3px 0 #f6d27a}
.evt-date{font:800 46px/1.6 Martel,serif;color:#4a1a1a}
.evt-time{font:600 42px/1.6 Martel,serif;color:#7a1f1f}
.evt-venue{display:inline-block;margin-top:6px;font:700 40px/1.5 Martel,serif;color:#0f5e6e;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:10px;text-decoration-color:rgba(15,94,110,.35)}
.evt-btns{display:flex;gap:22px;justify-content:center;margin-top:26px}

.closing{position:absolute;top:150px;left:0;width:1080px;text-align:center}
.cl-1{font:400 118px/1.3 'Jaini',serif;color:#f7d77a;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.cl-2{font:700 74px/1.5 Amita,serif;color:#ffe8c2;text-shadow:0 3px 14px rgba(0,0,0,.5)}

.rsvp{position:absolute;top:410px;left:96px;width:888px;text-align:center}
.rs-title{font:400 76px/1.2 'Yatra One',serif;color:#8e1b1b;letter-spacing:10px}
.rs-group{margin:6px 0 14px}
.rs-gt{font:400 52px/1.5 'Yatra One',serif;color:#c2185b}
.rs-gt .orn{font-size:36px;vertical-align:middle}
.rs-name{font:600 37px/1.56 Martel,serif;color:#4a1a1a}
.rs-foot{font:800 42px/1.6 Martel,serif;color:#7a1f1f;margin-top:4px}
.rs-vt{font:400 44px/1.4 'Yatra One',serif;color:#0f5e6e;margin-bottom:12px}
.rs-venues{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vchip{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:22px;border:2.5px solid #c9a227;background:#fff8ec;color:#a3122e;text-decoration:none;text-align:left;font-size:34px}
.vchip span{display:flex;flex-direction:column;min-width:0}
.vchip b{font:700 29px/1.45 Martel,serif;color:#7a1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vchip i{font:600 26px/1.45 Martel,serif;font-style:normal;color:#0f5e6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-actions{display:flex;justify-content:center;gap:22px;margin-top:26px}

/* ---------------------------------------------------------------- gate */
.gate-behind{position:absolute;left:0;width:1080px;top:calc(var(--safe-top,0px) + 680px);height:1060px;background:linear-gradient(#ffe7a8,#ffb85c 60%,#e8822a)}
.gb-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#fffbe8 0%,rgba(255,240,190,.6) 30%,transparent 70%);opacity:.6;transition:opacity 1.2s}
.doors{position:absolute;left:300px;top:calc(var(--safe-top,0px) + 690px);width:480px;height:1030px;perspective:1800px}
.door{position:absolute;top:0;width:240px;height:1030px;transition:transform 1.9s cubic-bezier(.55,.05,.25,1);backface-visibility:hidden}
.door svg{width:100%;height:100%;display:block}
.door.l{left:0;transform-origin:0 50%}
.door.r{left:240px;transform-origin:100% 50%}
.scene.open .door.l{transform:rotateY(104deg)}
.scene.open .door.r{transform:rotateY(-104deg)}
.scene.open .gb-light{opacity:1}

/* ---------------------------------------------------------------- SVG motion */
.art *{transform-box:view-box}
.breath{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite}
.breath-slow{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 5.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-3px) scaleY(1.008)}}
.head{animation:tilt 6.5s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 5.2s infinite}
.bride .eyes{animation-duration:4.4s;animation-delay:-1.1s}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.iris{animation:look 9s ease-in-out infinite}
@keyframes look{0%,40%,100%{transform:translateX(0)}50%,65%{transform:translateX(2px)}75%,90%{transform:translateX(-1.5px)}}
.arm,.fore{transform-origin:0 0;transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.arm-idle{transform-origin:0 0;animation:armIdle 3.8s ease-in-out infinite}
@keyframes armIdle{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}
.sway-top{transform-box:fill-box;transform-origin:50% 0;animation:sway 3.4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.sehra{animation:sway 2.6s ease-in-out infinite}
.plume{animation:plume 2.2s ease-in-out infinite}
@keyframes plume{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.jhumka{animation:swing 2s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
.drape{transform-box:fill-box;transform-origin:20% 0;animation:flutter 3.2s ease-in-out infinite}
.odhni-back{transform-box:fill-box;transform-origin:50% 0;animation:flutter2 5s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:skewX(0) rotate(0)}50%{transform:skewX(-3deg) rotate(1deg)}}
@keyframes flutter2{0%,100%{transform:skewX(1.2deg)}50%{transform:skewX(-1.2deg)}}
.lehenga{animation:skirt 4s ease-in-out infinite}
@keyframes skirt{0%,100%{transform:rotate(-.8deg) scaleX(1)}50%{transform:rotate(.8deg) scaleX(1.015)}}
.leaf{transform-box:fill-box;transform-origin:50% 0;animation:leaf 2.8s ease-in-out infinite}
@keyframes leaf{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .9s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.92,1.08) skewX(3deg)}50%{transform:scale(1.04,.94) skewX(-2deg)}75%{transform:scale(.96,1.05) skewX(2deg)}}
.glow,.lglow,.fglow,.kglow{transform-box:fill-box;transform-origin:50% 50%;animation:glowP 2.2s ease-in-out infinite}
@keyframes glowP{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.diya .flame,.diya .glow{opacity:0;transition:opacity .5s}
.diya.lit .flame,.diya.lit .glow{opacity:1}
.diya.lit .flame{animation:flicker .9s ease-in-out infinite,lightUp .5s ease-out}
@keyframes lightUp{from{transform:scale(.2)}to{transform:scale(1)}}
.twinkle{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.win{animation:win 6s ease-in-out infinite}
@keyframes win{0%,100%{opacity:1}50%{opacity:.7}}
.drift{animation:drift 60s linear infinite}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(1500px)}}
.fly{animation:fly 24s linear infinite}
@keyframes fly{0%{transform:translate(-500px,40px)}50%{transform:translate(500px,-20px)}100%{transform:translate(1500px,30px)}}
.flap{transform-box:fill-box;transform-origin:50% 100%;animation:flap .5s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.5)}}
.bell{transform-origin:0 0;animation:bellS 3.4s ease-in-out infinite}
.bell.ring{animation:bellR .5s ease-in-out 6}
@keyframes bellS{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bellR{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.trunk{animation:trunk 3.6s ease-in-out infinite}
@keyframes trunk{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
.ear{animation:ear 2.8s ease-in-out infinite}
@keyframes ear{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.86)}}
.etail{transform-box:fill-box;transform-origin:50% 0;animation:sway 2.4s ease-in-out infinite}
.htail{animation:sway 2.6s ease-in-out infinite}
.horse-inner.prance{animation:prance 1.3s ease-in-out}
@keyframes prance{0%,100%{transform:rotate(0)}35%,55%{transform:rotate(-9deg)}}
.hop{animation:hop 3.2s ease-in-out infinite}
@keyframes hop{0%,30%,100%{transform:translateY(0)}10%{transform:translateY(-12px)}20%{transform:translateY(0)}}
.ptail{animation:ptail 3s ease-in-out infinite}
@keyframes ptail{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.puppet{transform-box:fill-box;transform-origin:50% 0;animation:puppet 2.4s ease-in-out infinite}
@keyframes puppet{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-18px) rotate(5deg)}}
.spin-slow{transform-box:fill-box;transform-origin:50% 50%;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.walk{animation:walk .7s ease-in-out infinite}
@keyframes walk{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.herd{animation:herd 40s linear infinite}
@keyframes herd{from{transform:translateX(-560px)}to{transform:translateX(1120px)}}
.dust{transform-box:fill-box;transform-origin:50% 50%;animation:dust 6s ease-in-out infinite}
@keyframes dust{0%{transform:translate(0,0) scale(.6);opacity:0}30%{opacity:.6}100%{transform:translate(40px,-90px) scale(1.6);opacity:0}}
.reflect{animation:ripple 4s ease-in-out infinite}
@keyframes ripple{0%,100%{transform:scaleY(1) skewX(0)}50%{transform:scaleY(.97) skewX(1.5deg)}}
.shimmer{animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.1}50%{opacity:.7}}
.drum-arm{animation:drum 1.2s ease-in-out infinite}
.drum-arm.b{animation-delay:-.6s}
.drum-arm.fast{animation-duration:.3s}
@keyframes drum{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.halo{transform-box:fill-box;transform-origin:50% 50%;transition:opacity 1s,transform 1s;opacity:.35}
.halo.on{opacity:1;transform:scale(1.15)}

/* scene-specific signature states */
.paper{transition:transform 1.4s cubic-bezier(.45,.05,.25,1) .25s}
.rod-b{transition:transform 1.4s cubic-bezier(.45,.05,.25,1) .25s}
.scene.open .paper{transform:scaleY(1)!important}
.scene.open .rod-b{transform:translateY(0)}
.scene:not(.open) .rod-b{transform:translateY(-938px)}
.seal-l,.seal-r,.thread{transition:transform .7s ease-in,opacity .7s}
.scene.open .seal-l{transform:translate(-120px,140px) rotate(-60deg);opacity:0}
.scene.open .seal-r{transform:translate(120px,140px) rotate(60deg);opacity:0}
.scene.open .seal text,.scene.open .thread{opacity:0;transition:opacity .4s}
.curtain{transition:transform 1.4s cubic-bezier(.45,.05,.25,1)}
.scene.open .curtain{transform:scaleX(.16)}
.spin-wrap.spin{animation:spinY .6s ease-in-out 3}
@keyframes spinY{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.canopy{transform:scaleY(0);transition:transform 1.4s cubic-bezier(.3,1.4,.5,1)}
.scene.open .canopy{transform:scaleY(1)}
.dab{opacity:0;transition:opacity .6s}
.scene.dabbed .dab{opacity:.85}
.varmala{transform-origin:0 0}
.knot.on{animation:knot 1.2s ease-in-out 3}
@keyframes knot{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.fire.flare .flame{animation-duration:.45s}
.fire.flare .fglow{animation:glowP .5s ease-in-out infinite}
.dish{opacity:0;transition:opacity .4s}
.dish.on{opacity:1}
.dish .pop{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.3);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.dish.on .pop{transform:scale(1)}
.scene.served .steam{animation:steam 2.6s ease-out infinite}
@keyframes steam{0%{opacity:0;transform:translateY(0)}30%{opacity:.6}100%{opacity:0;transform:translateY(-60px)}}

/* petals & notes */
.petal{position:absolute;top:-60px;animation:fall 6s linear forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),2500px) rotate(var(--rot))}}
.mnote{position:absolute;font:700 72px serif;color:#ffd54a;text-shadow:0 0 12px #ffb300;animation:noteUp 2s ease-out forwards}
@keyframes noteUp{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(40px,-300px) scale(1.3) rotate(20deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* calm mode for phones that ask for less motion */
.reduce .art *{animation-play-state:paused!important}
.reduce .scene.enter{animation-duration:.4s}
.diya:not(.lit) .glow,.diya:not(.lit) .flame{visibility:hidden}