@font-face{font-family:Amiri;src:url(assets/amiri.ttf) format('truetype');font-display:swap}@font-face{font-family:Serif;src:url(assets/serif.ttf) format('truetype');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth}html[data-phase=closed],html[data-phase=opening]{overflow:hidden}body{margin:0;color:#263747;background:#f3ecdf;font:18px/1.9 Amiri,Georgia,serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #8c7145;outline-offset:6px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#f7f1e7,#eae0cd 60%,#f8f4ec)}.aura{position:absolute;width:90vw;height:90vw;border-radius:50%;filter:blur(65px);animation:aura 23s ease-in-out infinite alternate;will-change:transform}.a{background:#d7bc7d38;right:-50%;top:-35%}.b{background:#fff9;left:-45%;bottom:-50%;animation-delay:-12s}canvas{position:absolute;inset:0;width:100%;height:100%}.grain{position:absolute;inset:0;background:radial-gradient(#b6a78918 .7px,transparent .7px);background-size:5px 5px;opacity:.25}.glass{background:linear-gradient(135deg,#fffdf59c,#fffdf54d);border:1px solid #fffdfad6;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 18px 70px #7563460b,inset 0 1px 0 #fff9}.topline{position:absolute;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:23px 6%;font-size:13px;color:#8b7758}.topline [dir=ltr]{font-family:Serif,Georgia,serif;letter-spacing:.25em;font-size:15px}#cover{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 20px 45px;text-align:center;background:linear-gradient(130deg,#f4ecdfdc,#f9f5ede6);transition:opacity 1.6s ease,visibility 1.6s}.eyebrow{font-size:17px;color:#8c7652}.cover-copy h1{font-size:clamp(28px,5vw,40px);font-weight:400;margin:12px 0 25px}.envelope{position:relative;width:min(96vw,600px);aspect-ratio:3/2;flex-shrink:0;border:0;padding:0;background:none;isolation:isolate;perspective:1300px;filter:drop-shadow(0 18px 23px #5a493824);animation:float 8s ease-in-out infinite}.envelope-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:polygon(7% 13%,43% 55%,43% 71%,57% 71%,57% 55%,93% 13%,93% 87%,7% 87%)}.envelope-flap{position:absolute;inset:0;transform-origin:50% 13%;transform-style:preserve-3d;transition:transform 3.1s cubic-bezier(.32,.02,.16,1);z-index:2}.envelope-flap img{width:100%;height:100%;object-fit:contain;clip-path:polygon(7% 13%,93% 13%,57% 55%,57% 71%,43% 71%,43% 55%);backface-visibility:hidden}.envelope-inside{position:absolute;inset:13% 7%;background:linear-gradient(#bca884,#e5d7bd);z-index:-1;border-radius:4px}.open-label{background:none;border:0;color:#344250;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px;padding:10px 35px;font-size:20px}.open-label svg{width:20px;height:25px;stroke:#9e8355;stroke-width:1.2;animation:float 3s ease-in-out infinite}.cover-note{font-size:15px;color:#9b8767;margin-top:16px}html[data-phase=opening] .envelope{animation:none}html[data-phase=opening] .envelope-flap{transform:rotateX(170deg)}html[data-phase=opening] .cover-copy,html[data-phase=opening] .open-label,html[data-phase=opening] .cover-note{opacity:0;transition:opacity .9s}html[data-phase=open] #cover{opacity:0;visibility:hidden;pointer-events:none}main{max-width:760px;margin:auto;padding:90px 24px 42px;visibility:hidden;opacity:0}html[data-phase=open] main{visibility:visible;opacity:1;animation:reveal 2.2s ease both}.invitation-card{position:relative;border-radius:140px 140px 28px 28px;padding:62px 42px 28px;overflow:hidden;text-align:center}.card-line{position:absolute;inset:10px;border:1px solid #a48a5330;border-radius:132px 132px 21px 21px;pointer-events:none}.announcement{position:relative;min-height:660px;display:flex;flex-direction:column;align-items:center;justify-content:center}.bismillah{font-size:21px;color:#6b654f;margin:0 0 34px}.announcement h2{font-weight:400;font-size:clamp(100px,19vw,165px);line-height:1.45;margin:0;color:#25394a;text-shadow:0 2px 1px #fff8}.announcement h2:focus{outline:none}.name-en{font-family:Serif,Georgia,serif;font-size:17px;letter-spacing:.15em;color:#a58a5b}.gold-rule{width:48px;height:1px;background:#b59b6d;margin:28px auto}.gratitude{font-size:20px;margin:0 0 9px;color:#786646}.message{font-size:19px;line-height:2.1;margin:0 auto;max-width:430px;color:#4c555a}.scroll-cue{margin-top:35px;display:block}.scroll-cue svg{width:22px;height:28px;stroke:#ab9267;stroke-width:1.1;animation:float 4s ease-in-out infinite}.event{scroll-margin-top:25px;padding:32px 0 0}.section-label{display:flex;align-items:center;justify-content:center;gap:17px}.section-label span{height:1px;background:#b29b723d;width:38px}.section-label h3{font-size:25px;font-weight:400;margin:0}.date-display{padding:24px 0 30px}.date-display>span{font-size:16px;color:#8c7857}.date-display>div{display:flex;align-items:center;justify-content:center;gap:25px;margin:5px 0;font-family:Serif,Georgia,serif}.date-display b{font-weight:400;font-size:85px;line-height:1.25}.date-display i{height:55px;width:1px;background:#a88d5c4d}.date-display>div>div{display:flex;flex-direction:column;text-align:left;gap:4px}.date-display strong{font-size:18px;letter-spacing:.12em;font-weight:400}.date-display>div>div span{font-size:25px;color:#9b8050}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.detail{padding:23px 10px;border-radius:18px;display:flex;flex-direction:column;align-items:center}.detail svg{width:22px;height:22px;stroke:#a0875b;stroke-width:1.2;margin-bottom:12px}.detail>span{font-size:15px;color:#8d7956}.detail p{margin:7px 0 0;font-size:18px}.detail small{font-size:13px;color:#867e70}.closing{max-width:360px;margin:35px auto;font-size:23px;line-height:1.9}.utilities{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.utilities button,.utilities a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;padding:10px 16px;font-size:16px;transition:background .2s,transform .2s}.utilities button{border:1px solid #25394a;background:#25394a;color:#fffaf0;box-shadow:0 7px 18px #25394a13}.utilities a{border:1px solid #b7a07a70;background:#fff8;color:#6d5c3e}.utilities svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.3;flex-shrink:0}.utilities a:hover{background:#fff}.utilities button:hover{background:#354f62}.utilities button:active,.utilities a:active{transform:scale(.97)}.location-note{font-size:13px;color:#817c71;margin:12px 0}.status{font-size:15px;min-height:25px;margin:0;color:#74623f}footer{padding-top:30px;margin-top:22px;border-top:1px solid #aa936524;display:flex;flex-direction:column;align-items:center;gap:6px;color:#8d7c61;font-size:13px}footer a{display:flex;align-items:center;gap:8px}footer img{object-fit:contain;opacity:.75}footer strong{font:18px/1.5 Serif,Georgia,serif;letter-spacing:.18em}footer small{font-size:12px}.music{position:fixed;bottom:20px;left:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;z-index:40;color:#6f5d3e}.music[hidden]{display:none}.music svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.2}.music[aria-pressed=true] .mute-line{display:none}.music[aria-pressed=true]{box-shadow:0 0 0 5px #f9f1dc77}.reveal{transition:opacity 1s ease,transform 1s ease}.reveal.pending{opacity:0;transform:translateY(22px)}@keyframes reveal{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(-6px)}}@keyframes aura{to{transform:translate(-12%,15%) scale(1.1)}}@media(max-width:480px){main{padding:72px 15px 35px}.invitation-card{padding:43px 22px 25px;border-radius:110px 110px 24px 24px}.card-line{border-radius:102px 102px 18px 18px;inset:8px}.announcement{min-height:620px}.message{font-size:18px}.bismillah{font-size:20px}.detail-grid{gap:9px}.detail p{font-size:17px}.detail small{font-size:12px}.closing{font-size:21px}.utilities{gap:9px}.utilities a,.utilities button{font-size:15px;padding:10px 12px}.topline{padding:20px 7%}.cover-copy h1{font-size:30px}}@media(max-width:340px){.detail-grid{grid-template-columns:1fr}.utilities>*{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;transform:none}}

.envelope-body{clip-path:polygon(6.4% 13.6%,41.8% 48%,41.8% 67.5%,58% 67.5%,58% 48%,93.6% 13.6%,93.6% 87.2%,6.4% 87.2%)}.envelope-flap{transform-origin:50% 13.6%}.envelope-flap img{clip-path:polygon(6.4% 13.6%,93.6% 13.6%,58% 48%,58% 67.5%,41.8% 67.5%,41.8% 48%)}.envelope-inside{inset:13.6% 6.4% 12.8%}
.language{border-radius:30px;padding:6px 17px;border-color:#bca77d55;color:#4f514c;font-family:Amiri,Georgia,serif;font-size:15px;min-height:40px}#cover{padding-block:90px}.envelope{width:min(96vw,650px)}html[lang=en] body{font-family:Serif,Georgia,serif}html[lang=en] .announcement h2{font-size:clamp(49px,10vw,92px);line-height:1.4;margin:28px 0 15px}html[lang=en] .name-en{display:none}html[lang=en] .bismillah{font-size:18px;max-width:370px;line-height:1.6}html[lang=en] .message{font-size:20px;line-height:1.8}html[lang=en] .eyebrow{font-size:19px}html[lang=en] .detail small{font-size:14px}#music-engine{position:fixed;left:-10000px;top:0;width:320px;height:210px;pointer-events:none}

/* Watercolor clouds move gently at the paper's edges. */
.cloud-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;opacity:0;transition:opacity 2.4s ease}html[data-phase=open] .cloud-layer{opacity:1}main{position:relative;z-index:1}.cloud{position:absolute;display:block;width:clamp(100px,18vw,220px);will-change:transform;opacity:.82}.cloud img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 12px #96826010)}.cloud-1{left:-3%;top:8%}.cloud-2{right:-4%;top:21%;width:clamp(95px,15vw,180px)}.cloud-3{left:2%;top:44%;width:clamp(85px,14vw,170px);opacity:.65}.cloud-4{right:0;top:60%}.cloud-5{left:-2%;top:79%;width:clamp(100px,16vw,190px)}.cloud-6{right:17%;top:94%;width:clamp(85px,12vw,150px);opacity:.6}@media(max-width:600px){.cloud-1{left:-35px}.cloud-2{right:-30px}.cloud-3{left:-36px}.cloud-4{right:-45px}.cloud-5{left:-30px}.cloud-6{right:-15px}.cloud{opacity:.72}.invitation-card{background:linear-gradient(135deg,#fffdf5b0,#fffdf580)}}@media(prefers-reduced-motion:reduce){.cloud{will-change:auto}.cloud-layer{transition:none}}

/* Composite the fold and reveal together; no filter on the 3D parent. */
.envelope{filter:none;transform-style:preserve-3d}.envelope-flap{transition:none;will-change:transform;backface-visibility:visible;-webkit-backface-visibility:visible}.envelope-flap:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#f4ead8,#e4d3b5);clip-path:polygon(6.4% 13.6%,93.6% 13.6%,58% 48%,58% 67.5%,41.8% 67.5%,41.8% 48%);transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}.envelope-flap img{position:relative;z-index:1;-webkit-backface-visibility:hidden}html[data-phase=opening] .envelope-flap{transform:none}html[data-phase=opening] main{visibility:visible;opacity:0}html[data-phase=open] main{animation:none}html[data-phase=opening] #cover{transition:none;will-change:opacity}html[data-phase=opening] .invitation-card{backdrop-filter:none;-webkit-backdrop-filter:none}html[data-phase=opening] main{will-change:opacity,transform}

@font-face{font-family:NameScript;src:url(assets/name-script.ttf) format('truetype');font-display:swap}@font-face{font-family:BodySans;src:url(assets/body-sans.ttf) format('truetype');font-display:swap}html[lang=en] body{font-family:BodySans,Arial,sans-serif;font-size:16px;line-height:1.8}html[lang=en] .announcement h2{font-family:NameScript,Georgia,serif;font-size:clamp(64px,14vw,118px);font-weight:400;line-height:1.3;letter-spacing:0;margin:24px 0 18px}html[lang=en] .message{font-size:15px;line-height:1.95;max-width:430px}html[lang=en] .bismillah{font-family:Serif,Georgia,serif;font-size:20px;line-height:1.7}html[lang=en] .eyebrow{font-size:13px;letter-spacing:.045em;line-height:1.9}html[lang=en] .gratitude{font-size:15px;line-height:1.9}html[lang=en] .section-label h3,html[lang=en] .closing{font-family:Serif,Georgia,serif;font-size:28px;line-height:1.6}html[lang=en] .detail p{font-size:14px}html[lang=en] .detail>span{font-size:13px}html[lang=en] .detail small,html[lang=en] .location-note{font-size:12px;line-height:1.7}html[lang=en] .utilities a,html[lang=en] .utilities button{font-size:13px}html[lang=en] .topline{font-size:12px}html[lang=en] footer{font-size:12px}

/* Continuous triangular fold; the round wax seal is an independent layer. */
.envelope-body{clip-path:polygon(6.4% 13.6%,50% 62.6%,93.6% 13.6%,93.6% 87.2%,6.4% 87.2%)}.envelope-flap .flap-paper{clip-path:polygon(6.4% 13.6%,93.6% 13.6%,50% 62.6%)}.envelope-flap .moving-seal{position:absolute;inset:0;z-index:3;clip-path:ellipse(8% 11.6% at 49.9% 55.5%);backface-visibility:hidden;-webkit-backface-visibility:hidden}.envelope-flap:after{clip-path:polygon(6.4% 13.6%,93.6% 13.6%,50% 62.6%)}

/* Photographic cotton paper and separate transparent poured-wax seal. */
.envelope{isolation:auto}
.envelope-body{clip-path:polygon(6.1% 12.6%,50% 64%,93.7% 12.6%,93.7% 87.2%,6.1% 87.2%)}
.envelope-flap{transform-origin:50% 12.6%}
.envelope-flap .flap-paper{clip-path:polygon(6.1% 12.6%,93.7% 12.6%,50% 64%)}
.envelope-flap .moving-seal{inset:auto;left:39%;top:48%;width:22%;height:auto;clip-path:none;transform:translateZ(2px);filter:drop-shadow(1px 3px 2px #5c432d35)}
.envelope-flap:after{background:linear-gradient(160deg,#f2e6d0ed,#dac9a7ed),url(assets/envelope-paper.webp) center/cover;clip-path:polygon(6.1% 12.6%,93.7% 12.6%,50% 64%)}
.envelope-inside{inset:12.6% 6.3% 12.8% 6.1%;border-radius:1px;background:linear-gradient(180deg,#b7a484,#e7dac2 60%,#eee3d0);box-shadow:0 18px 28px #6049271a,inset 0 2px 8px #58432225}
.envelope{isolation:isolate;transform-style:flat;max-width:min(88vw,460px);margin-top:130px}.envelope-body{z-index:3}.envelope-inside{z-index:0}.envelope-flap{z-index:4}.baby-letter{position:absolute;left:20%;top:14%;width:60%;aspect-ratio:.75;background:linear-gradient(145deg,#fffaf1,#efe2cd);border:1px solid #cbb68e;border-radius:38% 38% 2px 2px/7% 7% 2px 2px;box-shadow:0 5px 20px #55432222;z-index:2;overflow:hidden;padding:9% 5% 4%;container-type:inline-size;pointer-events:none}.baby-letter .announcement{padding:0;background:none}.baby-letter .announcement>*{margin:2cqw 0;opacity:1;transform:none}.baby-letter .bismillah{font-size:5cqw}.baby-letter .eyebrow{font-size:4cqw}.baby-letter h2{font-size:24cqw;line-height:1.7}.baby-letter .name-en{font-size:4cqw;letter-spacing:.08em}.baby-letter .gratitude,.baby-letter .message{font-size:4.6cqw;line-height:1.8}.baby-letter .gold-rule{margin:3cqw auto;width:25%}html[data-phase=opening] main{visibility:hidden!important;opacity:0!important}html[data-phase=open] main{animation:reveal .8s ease both}
/* The pocket clips everything below the physical envelope, at every frame. */
.letter-pocket{position:absolute;inset:-160% 0 12.8%;overflow:hidden;z-index:2;pointer-events:none}
.letter-pocket .baby-letter{display:block;top:auto;bottom:0;left:20%;width:60%;height:auto;min-height:0;aspect-ratio:.75;transform:translateY(100%);opacity:0;padding:9% 5% 4%}
.baby-letter .announcement{min-height:0!important;height:auto!important;display:block!important;padding:0!important}.baby-letter .message{font-size:4.1cqw;line-height:1.6}.baby-letter h2{font-size:20cqw}
#cover{justify-content:center;padding-top:65px;padding-bottom:35px}.envelope{margin-top:125px}.baby-welcome{position:absolute;top:max(55px,8svh);left:50%;transform:translateX(-50%);width:min(320px,80vw);text-align:center;transition:opacity .45s}
.baby-welcome img{display:block;width:210px;height:145px;object-fit:contain;margin:auto}.baby-welcome p{font-size:23px;margin:0;line-height:1.7}.baby-welcome span{font:italic 17px/1.6 Serif,serif;color:#8f7955}.baby-open-hint{font-size:18px;color:#90764e;margin:22px 0 0;transition:opacity .4s}
html[data-phase=opening] .baby-welcome,html[data-phase=opening] .baby-open-hint{opacity:0;pointer-events:none}
@media(max-height:700px){.baby-welcome{top:60px}.baby-welcome img{width:160px;height:110px}.baby-welcome p{font-size:20px}.envelope{max-width:min(82vw,360px);margin-top:150px}.baby-open-hint{margin-top:8px}}