:root{--green:#113d32;--wine:#772b3d;--gold:#ad8550;--cream:#fff3dc}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#052e28}body{display:grid;place-items:center;color:var(--green);font-family:'Cormorant Garamond',Georgia,serif;background:radial-gradient(ellipse at 50% 30%,#24564a,#062f29 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #c69b5c;outline-offset:5px}.invitation{position:relative;isolation:isolate;overflow:hidden;width:min(100vw,66.6667svh,720px);height:100svh;max-height:1080px;min-height:580px;background:#fff2db;box-shadow:0 0 100px #001d1870}.scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.15s ease,visibility 1.15s;display:flex;align-items:center;justify-content:center}.scene.active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}.scene.leaving{visibility:visible;z-index:3;pointer-events:none}.house{background:#083e35;color:#fff2db;display:block}.house-art{position:absolute;width:100%;height:100%;object-fit:fill;transform-origin:50% 73%;transform:scale(1);transition:transform 2s cubic-bezier(.2,.65,.3,1)}.house.leaving .house-art{transform:scale(1.6)}.house-copy{position:absolute;top:12%;width:100%;text-align:center;padding:0 7%;z-index:2}.small{font-size:12px;letter-spacing:.19em;font-weight:600;margin:0 0 22px}.house h1{font-size:clamp(27px,4.2svh,44px);font-weight:400;line-height:1.3;margin:18px 0 24px}.house h1 em{font-family:'Great Vibes',cursive;font-size:1.18em;font-weight:400;font-style:normal}.opening-date{font-size:11px;letter-spacing:.21em}.house.active .house-copy{animation:welcome 1.1s ease both}.enter{position:absolute;bottom:6.5%;left:50%;transform:translateX(-50%);border:1px solid #f9e0b765;border-radius:50px;background:#063c32d9;color:#fff3db;padding:14px 23px;width:max-content;max-width:90%;font-size:17px;z-index:5;box-shadow:0 5px 20px #00251e50}.enter span{margin-left:12px}.warmth{position:absolute;top:65%;left:40%;width:20%;height:13%;background:#ffce6b20;filter:blur(18px);animation:glow 3.2s ease-in-out infinite;pointer-events:none}.stars i{position:absolute;background:#fff0bc;width:3px;height:3px;border-radius:50%;box-shadow:0 0 8px #ffdf92;animation:twinkle 3s ease-in-out infinite}.paper{background:#fff3df url('frame-jasmine-v2.webp') center/100% 100% no-repeat}.card-copy{width:100%;padding:16% 9% 17%;text-align:center;position:relative}.active .card-copy{animation:welcome .7s ease both}.bismillah{font-family:'Noto Naskh Arabic',serif;color:#9b743e;font-size:clamp(21px,3.4svh,30px);margin:0 0 20px;line-height:1.5}.hosts{font-size:clamp(17px,2.8svh,25px);font-weight:500;margin:0 0 5px;line-height:1.3}.inviting{font-size:clamp(16px,2.4svh,21px);margin:0}.names{font-family:'Great Vibes',cursive;font-size:clamp(47px,8.2svh,76px);font-weight:400;line-height:1.2;color:var(--wine);margin:21px 0 0}.names span{font-size:.64em}.occasion{text-transform:uppercase;font-size:clamp(11px,1.8svh,16px);letter-spacing:.18em;font-weight:600;margin:6px 0 0}.ornament{color:var(--gold);font-size:25px;display:flex;gap:13px;align-items:center;justify-content:center;margin:15px 0}.ornament:before,.ornament:after{content:'';height:1px;width:35px;background:#ad855075}.description{font-size:clamp(15px,2.3svh,21px);line-height:1.4;margin:0 0 20px;font-style:italic}.date{display:flex;flex-direction:column;gap:5px}.date>span:first-child:not(.time){font-size:10px;letter-spacing:.23em}.date strong{font-size:clamp(22px,3.6svh,32px);font-weight:500}.time{font-size:clamp(19px,2.9svh,26px);letter-spacing:.08em}.place{font-size:clamp(22px,3.4svh,30px);font-weight:500;margin:18px 0 3px}.address{font-size:clamp(15px,2.2svh,20px);margin:0;line-height:1.5}.programme h2,.closing h2{font-size:clamp(30px,4.7svh,42px);line-height:1.1;font-weight:400;margin:0;color:var(--wine)}h2 em{font-weight:400}.programme .card-copy{padding-top:19%}.programme .small,.closing .small{font-size:10px;letter-spacing:.18em;margin-bottom:18px}.programme-items{margin-top:24px}.programme-items>div{position:relative}.number{font-size:10px;letter-spacing:.12em;color:var(--gold)}h3{font-size:clamp(24px,3.6svh,32px);font-weight:500;color:var(--green);margin:3px 0}.programme-items p{font-size:clamp(16px,2.4svh,21px);line-height:1.25;margin:3px 0}.connector{display:block;height:18px;width:1px;background:#b68a4c70;margin:10px auto}.closing-names{font-family:'Great Vibes',cursive;color:var(--wine);font-size:clamp(44px,7svh,66px);margin:0}.closing .date{margin-top:23px}.map{display:inline-flex;align-items:center;gap:22px;margin-top:22px;background:var(--green);color:var(--cream);text-decoration:none;padding:12px 25px;font-size:17px;border:1px solid #b08d50;box-shadow:0 3px 10px #053a2420}.replay{display:block;margin:18px auto 0;padding:5px;border:0;background:none;color:var(--wine);font-size:15px}.tools{position:absolute;top:max(12px,env(safe-area-inset-top));left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;z-index:15}.tools button{background:#07382ddd;border:1px solid #e8cd9b50;color:#fff4dc;font-family:Georgia,serif;font-size:11px;padding:9px 13px;border-radius:24px}#pause{width:34px;height:34px;padding:0;font-size:16px}.scene-nav{position:absolute;z-index:15;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:9px;padding:8px 14px;background:#07382ddd;border:1px solid #e8cd9b30;border-radius:30px}.scene-nav button{border:0;background:none;width:30px;height:14px;padding:5px 0;position:relative}.scene-nav button:before{content:'';position:absolute;inset:5px 0;background:#ffffff40;border-radius:5px}.scene-nav button[aria-current]::before{background:#f3d8a3}.petals{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}.petal{position:absolute;top:-20px;width:8px;height:13px;border-radius:80% 0 70% 10%;background:#9d365299;animation:fall 10s linear infinite;opacity:0}.is-paused .stars i,.is-paused .petal,.is-paused .warmth{animation-play-state:paused!important}.tools .hidden{visibility:hidden}@keyframes welcome{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.9;transform:scale(1.15)}}@keyframes glow{50%{opacity:.4}}@keyframes fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%{opacity:.55}80%{opacity:.3}100%{opacity:0;transform:translate3d(40px,110svh,0) rotate(260deg)}}@media(max-width:600px){.invitation{width:100%;max-height:none;min-height:600px}.card-copy{padding-left:10%;padding-right:10%}.hosts{font-size:22px}.names{font-size:64px}.house-copy{top:13%}.small{font-size:11px}}@media(max-height:740px){.card-copy{padding-top:15%;padding-bottom:14%}.bismillah{margin-bottom:12px}.names{font-size:52px;margin-top:13px}.description{margin-bottom:12px}.ornament{margin:10px 0}.place{margin-top:12px}.programme-items{margin-top:17px}.connector{height:12px;margin:7px auto}.closing .date{margin-top:14px}.closing .map{margin-top:15px}.replay{margin-top:12px}.hosts{font-size:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.petals,.stars,.warmth{display:none}.house-art{transform:none!important}}

/* Keep the opening title in the sky above the actual residence. */
.house-copy{top:6.5%}.house-copy .small{margin-bottom:10px;font-size:10px}.house h1{font-size:clamp(25px,3.7svh,37px);margin:10px 0 14px}.opening-date{font-size:9px;margin:0}.house-art{transform-origin:52% 67%}.warmth{top:64%;left:43%;height:14%}@media(max-width:600px){.house-copy{top:7%}.house h1{font-size:clamp(25px,3.7svh,32px)}}

/* Continuous cinematic motion; the whole invitation plays without swiping. */
.scene-nav{display:none}.enter{pointer-events:none;border:0;background:none;box-shadow:none;font-style:italic;bottom:5%;animation:breathing 3s ease-in-out infinite}.house.active .house-art{animation:approach 8s cubic-bezier(.2,.35,.5,1) both}.house.leaving .house-art{animation:none;transform:scale(1.48)}
@keyframes approach{from{transform:scale(1)}to{transform:scale(1.15) translateY(-1%)}}
@keyframes breathing{50%{opacity:.55}}
.paper{background:none;overflow:hidden}.paper:before{content:'';position:absolute;inset:-1.5%;background:#fff3df url('frame-jasmine-v2.webp') center/100% 100% no-repeat;animation:frame-breathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes frame-breathe{to{transform:scale(1.025)}}
.active .card-copy{animation:none}.active .card-copy>*,.active .programme-items>div{animation:line-reveal .85s cubic-bezier(.2,.7,.3,1) both}.active .card-copy>:nth-child(2){animation-delay:.08s}.active .card-copy>:nth-child(3){animation-delay:.16s}.active .card-copy>:nth-child(4){animation-delay:.24s}.active .card-copy>:nth-child(n+5){animation-delay:.32s}.active .programme-items>div:nth-of-type(2){animation-delay:.7s}.active .programme-items>div:nth-of-type(3){animation-delay:1.3s}
@keyframes line-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ornament:before,.ornament:after{transform-origin:center;animation:line-grow 2s ease both}@keyframes line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.curtain-transition{position:absolute;inset:0;z-index:8;pointer-events:none;visibility:hidden;overflow:hidden}.curtain-reveal .curtain-transition{visibility:visible}.drape{position:absolute;inset:0 auto 0 0;width:51%;background:repeating-linear-gradient(90deg,#07382f 0%,#205748 10%,#0c352b 18%,#37715a 25%,#082f28 32%);border-right:3px solid #bc945b;box-shadow:12px 0 35px #001d2080;transform:translateX(-105%);border-radius:0 0 45% 0}.drape.right{left:auto;right:0;transform:translateX(105%);border-right:0;border-left:3px solid #bc945b;border-radius:0 0 0 45%}.curtain-reveal .left{animation:curtain-left 1.6s cubic-bezier(.25,.65,.3,1) both}.curtain-reveal .right{animation:curtain-right 1.6s cubic-bezier(.25,.65,.3,1) both}@keyframes curtain-left{from{transform:translateX(0)}to{transform:translateX(-105%)}}@keyframes curtain-right{from{transform:translateX(0)}to{transform:translateX(105%)}}
.hanging-lights{position:absolute;inset:0;z-index:7;pointer-events:none}.lantern{position:absolute;top:-20px;width:9%;height:29%;fill:#c29a58;stroke:#ddb975;stroke-width:1;transform-origin:50% 0;animation:sway 4.6s ease-in-out infinite alternate;filter:drop-shadow(0 4px 8px #b8862f55)}.lantern-0{left:3%}.lantern-1{right:3%;animation-delay:-2.2s}.flame{fill:#fff4bb;stroke:none;animation:flame 2s ease-in-out infinite alternate}@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}@keyframes flame{to{opacity:.45}}
.is-paused .house-art,.is-paused .paper:before,.is-paused .lantern,.is-paused .flame,.is-paused .enter{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.curtain-transition,.hanging-lights{display:none}.enter{display:none}}
/* Gate → residence → doorway. Afterwards, swipe at your own pace. */
.invitation{touch-action:none}.scene{transition:opacity .45s ease,visibility .45s}.scene-nav{display:none}.reading .scene-nav{display:flex}.swipe-hint{display:none;position:absolute;z-index:12;bottom:49px;left:0;width:100%;text-align:center;font-size:13px;letter-spacing:.06em;color:var(--wine);pointer-events:none}.reading .swipe-hint{display:block}.swipe-hint span{margin-left:8px}.house.active .house-art,.house.leaving .house-art{animation:none;transform:scale(1);transition:transform 2s cubic-bezier(.3,.5,.3,1);transform-origin:52% 68%}.approaching-door .house-art{transform:scale(4.8)}.house-copy{top:9%;transition:opacity .35s}.entering .house-copy,.entering .enter{opacity:0;pointer-events:none}.enter{pointer-events:auto;cursor:pointer;animation:none;bottom:7%;background:#083b31e8;border:1px solid #d6b378;border-radius:40px;padding:15px 32px;font-style:normal;box-shadow:0 5px 20px #001c2560}.gate-layer{position:absolute;inset:0;z-index:1;perspective:1200px;overflow:hidden}.gate-half{position:absolute;top:0;bottom:0;width:50%;background-image:url('gate.webp');background-size:200% 100%;transition:transform 1.6s cubic-bezier(.4,.1,.3,1),opacity 1.5s;backface-visibility:hidden}.gate-left{left:0;background-position:left center;transform-origin:left}.gate-right{right:0;background-position:right center;transform-origin:right}.entering .gate-left{transform:rotateY(-100deg);opacity:0}.entering .gate-right{transform:rotateY(100deg);opacity:0}.stars{position:absolute;inset:0;z-index:2;pointer-events:none}.door-transition{position:absolute;inset:0;z-index:10;perspective:1400px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s}.door-visible .door-transition{opacity:1;visibility:visible}.door-panel{position:absolute;top:-3%;bottom:-3%;width:50.2%;background:linear-gradient(90deg,#361f14,#754a2c 50%,#3d2519);border:7px solid #9a7045;box-shadow:inset 0 0 30px #170c08;transition:transform 1.35s cubic-bezier(.25,.65,.3,1);backface-visibility:hidden}.door-panel:before,.door-panel:after{content:'';position:absolute;left:12%;right:12%;border:5px ridge #926841;box-shadow:inset 0 0 20px #160b09;background:linear-gradient(110deg,#4f3020,#785036,#3f261a)}.door-panel:before{top:8%;height:43%;border-radius:45% 45% 0 0}.door-panel:after{top:58%;bottom:8%}.door-left{left:0;transform-origin:left}.door-right{right:0;transform-origin:right}.door-panel i{position:absolute;top:53%;width:10px;height:32px;border:3px solid #d6b06b;border-radius:40%;z-index:2;box-shadow:1px 2px 4px #190c05}.door-left i{right:5%}.door-right i{left:5%}.door-open .door-left{transform:rotateY(-105deg)}.door-open .door-right{transform:rotateY(105deg)}.active .card-copy>*,.active .programme-items>div{animation-duration:.45s;animation-delay:0s!important}.paper:before{animation:none}.tools #skip[hidden]{display:none}.reading .tools{justify-content:flex-start}.curtain-transition{display:none}@media(prefers-reduced-motion:reduce){.gate-half,.door-panel{transition:none}.door-transition{display:none}.enter{display:block}.approaching-door .house-art{transform:none}}

/* One forward camera path: gate, courtyard, actual ground-floor doorway. */
html,body{overflow:hidden;height:100%;}.invitation{min-height:0}.gate-layer{perspective:none;transform-origin:50% 65%;}.gate-art{width:100%;height:100%;object-fit:fill;display:block}.entering .gate-layer{animation:pass-gate 1.9s cubic-bezier(.3,.25,.35,1) both}.house.active .house-art{transform-origin:32% 70%;transition:none}.entering .house.active .house-art{animation:walk-to-door 4.9s linear both}.house-copy,.enter{z-index:4}.entering .stars,.entering .warmth{opacity:0;transition:opacity .3s}.names,.closing-names{font-family:'Pinyon Script',cursive;font-weight:400}.house-copy .small{font-family:'Pinyon Script',cursive;text-transform:none;letter-spacing:0;font-size:30px;margin-bottom:12px}.house-copy .small{font-variant:normal}.house-copy .small{text-transform:capitalize}.reading #scene-1.active .card-copy{animation:arrive-card .5s ease-out both}
@keyframes pass-gate{0%{transform:scale(1);opacity:1}65%{opacity:1}100%{transform:scale(3.2);opacity:0}}
@keyframes walk-to-door{0%,20%{transform:translate(0,0) scale(1)}40%{transform:translate(2%,-2%) scale(1.12)}58%{transform:translate(6%,-7%) scale(1.65)}76%{transform:translate(12%,-14%) scale(3.8)}100%{transform:translate(18%,-20%) scale(13)}}
@keyframes arrive-card{from{transform:scale(.94);opacity:.5}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.entering .gate-layer{display:none}.house.active .house-art{animation:none!important}}

/* Open the metal leaves only; hold the house, then dissolve to the card. */
.gate-layer{perspective:1100px;transform:none;transform-origin:center;}.gate-surround,.actual-gate-leaf{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;backface-visibility:hidden}.gate-surround{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,19.5% 41%,19.5% 75.5%,83% 75.5%,83% 41%,19.5% 41%)}.left-leaf{clip-path:polygon(19.5% 41%,50.8% 41%,50.8% 75.5%,19.5% 75.5%);transform-origin:19.5% 60%}.right-leaf{clip-path:polygon(50.8% 41%,83% 41%,83% 75.5%,50.8% 75.5%);transform-origin:83% 60%}.entering .gate-layer{animation:gate-dissolve 2.5s ease both}.entering .left-leaf{animation:actual-open-left 1.8s cubic-bezier(.3,.5,.3,1) both}.entering .right-leaf{animation:actual-open-right 1.8s cubic-bezier(.3,.5,.3,1) both}.entering .house.active .house-art{animation:none;transform:none;transform-origin:center}.house-copy{top:5.5%}.house-copy .small{margin-bottom:8px}.house h1{margin-top:8px}.reading #scene-1.active .card-copy{animation:none}.scene{transition:opacity .7s ease,visibility .7s}@keyframes actual-open-left{from{transform:rotateY(0)}to{transform:rotateY(-100deg)}}@keyframes actual-open-right{from{transform:rotateY(0)}to{transform:rotateY(100deg)}}@keyframes gate-dissolve{0%,65%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.entering .gate-layer{display:none}}

/* Clear the full gate foreground together so the exterior fills the frame. */
:root{--green:#665248;--wine:#965c66;--gold:#ad8550;--cream:#fff6e9}body{background:radial-gradient(ellipse at 50% 30%,#f4e7dc,#d4bcb3 80%)}.paper:before{background-color:#fff5e8}.tools button,.scene-nav,.enter{background:#80545de8;color:#fff5e9;border-color:#d4b391}.map{background:#80545d}.petal{background:#d58a9d99}.house-copy{text-shadow:0 2px 8px #132e20,0 0 20px #132e20}.gate-surround{clip-path:none}.entering .gate-surround{animation:clear-surround .65s ease-out both}.entering .gate-layer{animation:clear-entire-gate 1.45s linear both}.entering .left-leaf{animation:actual-open-left 1.35s cubic-bezier(.3,.5,.3,1) both}.entering .right-leaf{animation:actual-open-right 1.35s cubic-bezier(.3,.5,.3,1) both}.gate-layer.cleared{display:none!important}.entering .house-copy{animation:none;opacity:0}.entering .house.active .house-art{animation:none;transform:none}.house-art{object-fit:cover}
@keyframes clear-surround{from{opacity:1}to{opacity:0}}@keyframes clear-entire-gate{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}

/* A single full-frame dissolve from the gate photograph to the exterior. */
.house-art{opacity:1}
.gate-surround{clip-path:none}
.entering .gate-surround{animation:none}
.entering .gate-layer{animation:gate-crossfade .85s ease-in-out both}
.entering .house.active .house-art{animation:none;transform:none;opacity:1}
@keyframes gate-crossfade{from{opacity:1}to{opacity:0;visibility:hidden}}

.exterior-copy{position:absolute;top:7%;left:0;width:100%;padding:0 6%;text-align:center;z-index:3;opacity:0;pointer-events:none;color:#fff4e3;text-shadow:0 2px 8px #493323,0 0 18px #49332380}
.entering .exterior-copy{animation:exterior-welcome .45s .85s ease-out both}
@keyframes exterior-welcome{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* The opening copy must never remain over the exterior welcome. */
.entering .house.active .house-copy{display:none;animation:none!important;visibility:hidden;opacity:0}

/* Ivory jasmine stationery with deep rose typography. */
:root{--green:#5d5042;--wine:#794651;--gold:#ad8550;--cream:#fff6e9}
.paper:before{inset:0;background-size:100% 100%}
.card-copy{padding-left:12%;padding-right:12%}
.names,.closing-names{color:#794651}
.address{margin-top:20px;font-size:clamp(17px,2.4svh,22px)}
.tools button,.scene-nav,.enter,.map{background:#704652eb}
.active .card-copy>*,.active .programme-items>div{animation-duration:.4s;animation-delay:0s!important}
@media(max-height:700px){.address{margin-top:12px}.names{margin-top:10px}.description{font-size:16px}.card-copy{padding-top:14%;padding-bottom:14%}}

/* Both families host the Mehendi and Qawwali evening. */
#scene-1 .hosts{font-size:clamp(15px,2.35svh,22px);line-height:1.3;margin-bottom:8px}.hosts-and{font-size:.8em;color:var(--gold)}
@media(max-height:700px){#scene-1 .bismillah{margin-bottom:8px}#scene-1 .hosts{font-size:16px}#scene-1 .names{font-size:48px}#scene-1 .description{margin-bottom:8px}}

.programme .nikah-preface{font-size:clamp(16px,2.3svh,21px);font-style:italic;font-weight:500;margin:16px 0 0;color:var(--wine)}.programme .nikah-preface+.programme-items{margin-top:10px}
@media(max-height:700px){.programme .nikah-preface{margin-top:10px;font-size:16px}.programme .nikah-preface+.programme-items{margin-top:6px}}

/* Fit the entrance inside the visible mobile browser area. */
body{place-items:start center}
.invitation{height:var(--visible-height,100dvh);width:min(100vw,calc(var(--visible-height,100dvh) * 2 / 3),720px)}
.gate-surround{object-fit:cover}
.enter{bottom:max(28px,calc(env(safe-area-inset-bottom) + 20px))}
@media(max-width:600px){.invitation{width:100%}}