@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Great+Vibes&display=swap');
:root{color-scheme:light;--ivory:#f4f0e6;--gold:#8f8054;font-family:'Cormorant Garamond',Georgia,serif;background:var(--ivory);color:var(--gold)}
*{box-sizing:border-box}body{margin:0}button{font:inherit;-webkit-tap-highlight-color:transparent}
.scene{min-height:100svh;width:100%;display:grid;place-items:center;isolation:isolate;overflow:hidden;padding:clamp(0px,2.5vw,35px);perspective:1500px}
.surround{position:fixed;inset:-40px;z-index:-2;background:var(--ivory) url('/assets/mohammed-simav.png') center/cover no-repeat;filter:blur(25px);opacity:.28;transition:transform 2s ease,opacity 2s ease}
.scene::after{content:'';position:fixed;inset:0;z-index:-1;background:#fbf8f03b}
.envelope{position:relative;display:block;width:min(100%,1100px,calc((100svh - 40px)*1.257));padding:0;border:0;background:transparent;cursor:pointer;line-height:0;transition:transform .7s ease,box-shadow .7s ease;box-shadow:0 24px 80px #6a624e18;outline-offset:8px;transform-origin:50% 63%;isolation:isolate}
.envelope img{width:100%;height:auto;display:block}
.envelope-kicker{position:absolute;z-index:1;left:50%;top:22.7%;transform:translateX(-50%);width:38%;padding:1.4% 1% 1.1%;background:#f6f1e8;color:#827444;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(10px,1.5vw,21px);font-weight:500;line-height:1;letter-spacing:.04em;white-space:nowrap;text-align:center}
.envelope:hover{transform:translateY(-5px) scale(1.008);box-shadow:0 30px 90px #6a624e26}
.envelope:focus-visible{outline:2px solid var(--gold)}
/* A light sweep and a halo animate over the original photograph. */
.envelope::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 25%,#fffced00 36%,#fffcedb3 48%,#fffced00 59%,transparent 70%);background-size:240% 100%;background-position:120% 0}
.envelope::after{content:'';position:absolute;left:50%;top:63%;width:19%;aspect-ratio:1;pointer-events:none;transform:translate(-50%,-50%) scale(.3);border-radius:50%;background:radial-gradient(circle,#fffefac9, #eddbad75 30%,#fff4cd00 70%);opacity:0}
body.arrived .envelope::before{animation:arrival-shine 2s .2s ease-out both}
body.opening .envelope{animation:envelope-depart 1.7s cubic-bezier(.3,.02,.2,1) both;pointer-events:none}
body.opening .envelope::before{animation:opening-shine 1s ease-out both}
body.opening .envelope::after{animation:seal-light 1.2s ease-out both}
body.open .envelope{opacity:0;transform:translateY(40px) scale(1.17);pointer-events:none}
body.opening .surround,body.open .surround{transform:scale(1.08);opacity:.18}
body.open{overflow:hidden}
@keyframes arrival-shine{0%{opacity:0;background-position:120% 0}25%{opacity:.55}100%{opacity:0;background-position:-30% 0}}
@keyframes opening-shine{0%{opacity:0;background-position:110% 0}40%{opacity:.65}100%{opacity:0;background-position:-20% 0}}
@keyframes seal-light{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}35%{opacity:.85;transform:translate(-50%,-50%) scale(1.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(4.5)}}
@keyframes envelope-depart{0%{opacity:1;transform:scale(1) rotateX(0);filter:blur(0)}35%{opacity:1;transform:scale(1.065) rotateX(3deg);filter:blur(0)}100%{opacity:0;transform:translateY(60px) scale(1.2) rotateX(12deg);filter:blur(8px)}}
dialog{position:fixed;border:0;padding:0;width:min(88vw,540px);max-height:90svh;background:#f8f4ea;color:var(--gold);box-shadow:0 35px 110px #453c2833;overflow:auto;transform-origin:50% 85%}
dialog[open]{animation:letter-arrive 1.5s cubic-bezier(.16,.8,.2,1) both}
dialog::backdrop{background:#f2ecddb8;backdrop-filter:blur(7px)}
dialog[open]::backdrop{animation:veil-in 1.3s ease both}
.letter{position:relative;margin:24px;min-height:min(620px,78svh);padding:55px 22px 35px;border:1px solid #bdaf852e;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.kicker{font-size:clamp(12px,2.5vw,15px);font-weight:400;letter-spacing:3px;line-height:1.6;margin:0 0 35px}
h1{font-family:'Great Vibes','Brush Script MT',cursive;font-weight:400;font-size:clamp(44px,9vw,72px);line-height:1.3;margin:0}
h1 span{display:block}.ampersand{font-size:.75em;line-height:1.5}
.monogram{margin:40px 0 0;font-size:20px;letter-spacing:5px}.monogram span{font-style:italic}
.close{position:absolute;right:13px;top:9px;border:0;background:transparent;color:#91835d;width:40px;height:40px;font-size:28px;cursor:pointer;z-index:3}.close:focus-visible{outline:1px solid #a18d54;outline-offset:0}
dialog[open] .kicker{animation:ink-in 1.1s .45s both}
dialog[open] h1>span:nth-child(1){animation:ink-in 1.2s .65s both}
dialog[open] h1>span:nth-child(2){animation:ink-in 1.2s .95s both}
dialog[open] h1>span:nth-child(3){animation:ink-in 1.2s 1.2s both}
dialog[open] .monogram{animation:ink-in 1.2s 1.6s both}
dialog[open] .letter{animation:border-in 2.3s .3s both}
@keyframes letter-arrive{0%{opacity:0;transform:perspective(1400px) translateY(170px) rotateX(18deg) scale(.82);filter:blur(8px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:perspective(1400px) translateY(0) rotateX(0) scale(1);filter:blur(0)}}
@keyframes ink-in{from{opacity:0;transform:translateY(18px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes veil-in{from{background:#f2ecdd00;backdrop-filter:blur(0)}to{background:#f2ecddb8;backdrop-filter:blur(7px)}}
@keyframes border-in{from{border-color:transparent}to{border-color:#bdaf8566}}
.dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.dust i{position:absolute;left:var(--x);top:100%;width:var(--size);height:var(--size);background:#c3a46a;border-radius:50%;opacity:0;box-shadow:0 0 7px #d9bd7e66;animation:dust-rise var(--duration) var(--delay) ease-out both}
@keyframes dust-rise{0%{opacity:0;transform:translate3d(0,0,0)}20%{opacity:.55}75%{opacity:.35}100%{opacity:0;transform:translate3d(var(--drift),-80vh,0)}}
@media(max-width:600px){.scene{padding:0}.envelope{width:100%;box-shadow:none}.letter{margin:18px;padding:50px 15px 35px}.kicker{letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.dust{display:none}}
/* Personal invitation: wedding date, photographs and ivory flowers. */
dialog{width:min(94vw,860px);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9a77b #f8f4ea}
.letter{isolation:isolate;min-height:0;justify-content:flex-start;padding:70px 28px 65px;overflow:hidden}
.letter>.kicker,.letter>h1,.wedding-date,.countdown,.photo-gallery,.location,.monogram{position:relative;z-index:1}
h1{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:clamp(42px,6.5vw,66px)}
h1 .ampersand{line-height:1.3}
.kicker{margin-bottom:24px}
.wedding-date{display:block;margin:25px 0 42px;font-size:26px;letter-spacing:5px;font-weight:500;line-height:1.5}
.wedding-date::before,.wedding-date::after{content:'';display:block;width:48px;height:1px;background:#b3a17670;margin:12px auto}
.countdown{width:100%;margin:-8px 0 47px;text-align:center}
.countdown>p{margin:0 0 14px;font-size:10px;letter-spacing:2.6px;color:#766a49}
.countdown-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:400px;margin:auto}
.countdown-grid>span{padding:15px 6px 12px;background:#fffdf6;border:1px solid #c7b99355;box-shadow:0 7px 20px #5446280c}
.countdown-grid strong{display:block;font-size:clamp(30px,5vw,42px);font-weight:400;line-height:1;color:#8f8054;font-variant-numeric:tabular-nums}
.countdown-grid small{display:block;margin-top:8px;font-family:'Cormorant Garamond',Georgia,serif;font-size:11px;letter-spacing:.06em;color:#756c57}
.photo-gallery{width:min(100%,590px);margin:0 auto 15px;touch-action:pan-y}
.photo-stage{position:relative;width:100%;aspect-ratio:4/5;filter:drop-shadow(0 18px 30px #54462820)}
.photo-frame{position:absolute;inset:0;margin:0;background:#fffdf6;padding:10px 10px 24px;border:1px solid #c7b99355;opacity:0;visibility:hidden;transform:translateX(36px) rotate(2deg) scale(.96);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1),visibility .55s}
.photo-frame.is-active{opacity:1;visibility:visible;transform:translateX(0) rotate(-1.2deg) scale(1);z-index:1}
.photo-window{position:relative;width:100%;height:100%;overflow:hidden;background:#e8e0cd}
.photo-window img{position:absolute;display:block;width:100%;height:auto;max-width:none;top:-31.25%;left:0}
.gallery-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:45px;height:45px;padding:0;border:1px solid #d2c6a7;background:#fffdf6e8;color:#7f7048;border-radius:50%;font-size:34px;line-height:1;box-shadow:0 5px 15px #473b201c;backdrop-filter:blur(4px)}
.gallery-prev{left:14px}.gallery-next{right:14px}
.gallery-arrow:hover,.gallery-arrow:focus-visible{background:#8f8054;color:#fff;outline:none}
.gallery-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.gallery-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#cfc5ac;transition:width .25s,background .25s}
.gallery-dots button.is-active{width:28px;border-radius:10px;background:#8f8054}
.flowers{position:absolute;pointer-events:none;z-index:0;width:210px;height:auto;object-fit:contain}
.flowers-top{top:-60px;right:-62px;transform:rotate(180deg);opacity:.8}
.flowers-bottom{bottom:-58px;left:-50px;width:235px;opacity:.9}
.monogram{margin-top:48px}
.location{width:100%;margin:58px 0 10px;padding-top:42px;border-top:1px solid #b8a4744d;text-align:center}
.location-label{margin:0 0 11px;font-size:11px;letter-spacing:3px;font-weight:500}
.location h2{margin:0;font-family:'Great Vibes','Brush Script MT',cursive;font-size:clamp(36px,6vw,52px);font-weight:400;line-height:1.25}
.location address{margin:13px 0 25px;color:#675d43;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-style:normal;line-height:1.55}
.map-frame{width:100%;height:300px;overflow:hidden;border:7px solid #fffdf6;box-shadow:0 10px 30px #5446281c;background:#e7e0d1}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.route-button{display:inline-block;margin-top:22px;padding:12px 25px;border:1px solid #9d8c5d;color:#6f6039;background:#fffdf6;text-decoration:none;font-size:15px;letter-spacing:.06em;border-radius:999px;transition:background .2s,color .2s}
.route-button:hover,.route-button:focus-visible{background:#8f8054;color:#fff;outline:none}
.close{position:sticky;display:block;top:8px;margin:8px 10px -48px auto;right:auto;border-radius:50%;background:#f8f4eaed;backdrop-filter:blur(5px);z-index:5}
dialog[open] .wedding-date{animation:ink-in 1.2s 1.45s both}
dialog[open] .countdown{animation:ink-in 1.2s 1.62s both}
dialog[open] .photo-gallery{animation:ink-in 1.2s 1.82s both}
dialog[open] .location{animation:ink-in 1.2s 2.02s both}
dialog[open] .monogram{animation:ink-in 1.2s 2.17s both}
@media(max-width:600px){
 body{width:100%;overflow-x:hidden}
 .scene{min-height:100svh;padding:0 8px}
 .envelope{width:100%;max-width:100%;box-shadow:none}
 .envelope-kicker{top:22.2%;width:43%;font-size:clamp(8px,2.55vw,13px);letter-spacing:.01em;padding:1.8% 0 1.4%}
 dialog{inset:0;width:calc(100vw - 12px);max-width:none;max-height:calc(100svh - 12px);margin:auto;border-radius:3px}
 .letter{margin:10px;padding:60px 12px 58px;overflow:hidden}
 h1{flex-direction:column;gap:0;font-size:49px}
 .wedding-date{font-size:23px;margin:20px 0 28px}
 .countdown{margin-bottom:36px}
 .countdown-grid{gap:4px}
 .countdown-grid>span{padding:12px 2px 10px}
 .countdown-grid strong{font-size:clamp(30px,10vw,40px)}
 .countdown-grid small{font-size:10px;letter-spacing:.03em}
 .photo-gallery{width:94%}
 .photo-stage{aspect-ratio:4/5}
 .photo-frame{padding:6px 6px 17px}
 .gallery-arrow{width:41px;height:41px;font-size:31px}
 .gallery-prev{left:9px}.gallery-next{right:9px}
 .location{margin-top:42px;padding-top:34px}
 .location h2{font-size:40px}
 .location address{font-size:19px}
 .map-frame{height:255px;border-width:5px}
 .route-button{width:100%;padding:14px 20px;font-size:16px}
 .flowers-top{width:160px;right:-52px;top:-35px}
 .flowers-bottom{width:185px;left:-50px;bottom:-28px}
}
@media(max-width:360px){.envelope-kicker{font-size:8px}.letter>.kicker{font-size:9px;letter-spacing:1.3px}h1{font-size:43px}.wedding-date{letter-spacing:3px}.location h2{font-size:35px}}
.letter{padding:24px 14px 50px;border:0;margin:0}
.stationery{position:relative;isolation:isolate;width:100%;aspect-ratio:4/5;container-type:inline-size;z-index:1}
.stationery-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.stationery-title{position:absolute;left:53%;top:5.5%;width:39%;height:13%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:3;color:#7b6d4d}
.stationery-title p{font-size:2cqw;letter-spacing:.08em;margin:0 0 .65cqw;line-height:1.1}
.stationery-title h1{display:block;font-family:'Great Vibes','Brush Script MT',cursive;font-size:4cqw;line-height:.95;font-weight:400;margin:0}
.stationery-title h1 span{display:inline;font-size:2.5cqw;line-height:1}
.keepsake{position:absolute;overflow:hidden;z-index:2;background:#e7e0d1}
.keepsake img{position:absolute;width:100%;height:auto;left:0;top:-31.25%;display:block}
.keepsake-oval{left:16%;top:22%;width:30.5%;height:33.5%;border-radius:50%}
.keepsake-right{left:58.7%;top:26.5%;width:28.8%;height:27%}
.keepsake-small{left:14%;top:68%;width:22%;height:23%;border:4px solid #fffdf6;box-shadow:0 4px 14px #51453125;transform:rotate(-8deg);z-index:4}
.stationery-date{position:absolute;z-index:5;top:59%;left:36%;width:31%;text-align:center;font-size:4.2cqw;letter-spacing:.04em;color:#7b6d4d;font-weight:500}
dialog[open] .stationery{animation:ink-in 1.4s .5s both}
.location{width:90%;margin-top:30px}
@media(max-width:600px){.letter{margin:0;padding:24px 0 45px}.stationery{width:100%}.keepsake-small{border-width:2px}.location{width:88%}.stationery-title h1{font-size:4cqw}}
@media(prefers-reduced-motion:reduce){dialog[open] .wedding-date,dialog[open] .countdown,dialog[open] .photo-gallery,dialog[open] .location,dialog[open] .monogram{animation:none}.photo-frame{transition:none}}