@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
:root{--bg:#f5eee1;--paper:#fffaf0;--line:#d8c6a5;--gold:#c7a968;--brown:#765c4d;--red:#8c4b52;--shadow:0 20px 60px rgba(98,73,52,.16)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#eee4d4;color:var(--brown);font-family:"Noto Naskh Arabic",serif}
body{overflow-x:hidden}.site{min-height:100vh}
.opening{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:
radial-gradient(circle at 20% 15%,#fffdf8 0 8%,transparent 27%),
radial-gradient(circle at 80% 80%,#eadcc7 0 4%,transparent 24%),#f5eee2;transition:opacity .75s,visibility .75s}
.opening.hide{opacity:0;visibility:hidden;pointer-events:none}
.opening-envelope{position:relative;width:min(88vw,420px);height:300px;filter:drop-shadow(0 25px 25px rgba(86,63,44,.16));transform:translateY(0);transition:transform .8s}
.opening.opening-now .opening-envelope{transform:translateY(-8vh)}
.env-back{position:absolute;inset:0;background:linear-gradient(145deg,#ead8b8,#e3cda6);border:1px solid #cbb58f;border-radius:3px}
.env-letter{position:absolute;z-index:2;left:12%;right:12%;top:6%;height:90%;background:#fffaf0;border:1px solid #ded0b6;box-shadow:0 5px 15px rgba(80,60,45,.08);transition:transform .95s cubic-bezier(.2,.85,.2,1)}
.env-left,.env-right,.env-bottom{position:absolute;z-index:4;inset:0}
.env-left{background:#e7d2ad;clip-path:polygon(0 0,50% 50%,0 100%)}.env-right{background:#e3cba4;clip-path:polygon(100% 0,50% 50%,100% 100%)}
.env-bottom{background:#dfc59d;clip-path:polygon(0 100%,100% 100%,50% 50%)}
.env-flap{position:absolute;z-index:6;inset:0;background:linear-gradient(155deg,#f0dfbf,#e0c7a0);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:50% 0;transition:transform 1s cubic-bezier(.22,.8,.2,1)}
.seal{position:absolute;z-index:8;left:50%;top:53%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#b85d62,#82383f);color:#fff4e5;font-size:25px;box-shadow:0 7px 18px rgba(87,40,42,.28);transition:opacity .35s,transform .65s}
.open-pill{position:absolute;z-index:10;left:50%;bottom:11%;transform:translateX(-50%);border:0;border-radius:999px;background:#fffaf2;color:#775d4d;padding:11px 24px;box-shadow:0 7px 20px rgba(87,63,44,.16);font-size:15px;white-space:nowrap}
.open-pill:first-letter{color:var(--gold)}
.opening.opening-now .env-flap{transform:rotateX(180deg)}.opening.opening-now .env-letter{transform:translateY(-33%)}.opening.opening-now .seal{opacity:0;transform:translate(-50%,-50%) scale(.2)}.opening.opening-now .open-pill{opacity:0}
.opening-note{position:absolute;bottom:7%;font-size:14px;color:#8d796b}
.main{min-height:100vh;padding:26px 12px 60px;background:
radial-gradient(circle at 12% 10%,rgba(214,188,131,.15),transparent 18%),
radial-gradient(circle at 90% 75%,rgba(180,120,130,.09),transparent 22%),#eee4d4;opacity:0;transform:translateY(35px);transition:1s}
.main.show{opacity:1;transform:none}.card{max-width:650px;margin:auto;background:rgba(255,250,240,.97);border:1px solid var(--line);box-shadow:var(--shadow);padding:35px 22px 28px;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:13px;border:1px solid rgba(198,169,104,.25);pointer-events:none}.top-ornament{position:absolute;right:25px;top:18px;color:#cfb474;opacity:.45}
.intro{text-align:center;position:relative}.bismillah{font-size:18px;margin-bottom:8px}.rule{height:1px;width:90px;margin:10px auto 13px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.intro>p{margin:4px 0;color:#877166}.intro h1{font-size:25px;color:#704e49;margin:0 0 8px;font-weight:600}.invite-text{font-size:17px;line-height:1.9}.life{font-size:15px;line-height:2.05;max-width:530px;margin:9px auto!important}.small-intro{font-size:14px;margin-top:14px!important}.intro h2{font-size:43px;line-height:1.1;margin:2px 0;color:#7e4049;font-weight:600}.intro h2 span{color:var(--gold);font-size:27px}
.photo-wrap{margin:23px auto 16px;max-width:430px}.photo{position:relative;border:6px solid #f4ead7;outline:1px solid #d7c29b;background:#eee;box-shadow:0 9px 25px rgba(70,50,38,.13)}.photo img{display:block;width:100%;height:auto;max-height:590px;object-fit:cover}.photo-heart{position:absolute;right:9px;bottom:9px;width:39px;height:39px;border:1px solid #dfd1b8;background:#fffaf1d9;border-radius:50%;color:#8f5c64;font-size:22px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.detail{border:1px solid #dfd3bd;background:#fffaf1;border-radius:13px;padding:12px 8px;text-align:center}.detail.location{grid-column:1/-1;padding-bottom:14px}.big{color:var(--gold);font-size:28px;line-height:1}.label{font-size:16px;margin:2px 0;color:#80695d}.value{font-size:15px;color:#806e65}.map{display:inline-block;margin-top:8px;padding:3px 13px;border:1px solid #d2ba82;border-radius:999px;color:#7b624f;text-decoration:none;font-size:13px}
.divider{text-align:center;color:var(--gold);margin:20px 0 7px}.closing{text-align:center;font-size:16px;line-height:2;color:#7d685d;margin:0}
.contacts{margin-top:19px}.contacts h3{text-align:center;font-size:21px;color:#7d4650;margin:7px 0}.contact-row{display:flex;justify-content:space-between;align-items:center;border:1px solid #dfd3bd;border-radius:11px;padding:7px 12px;background:#fffaf2;margin:7px 0;font-size:14px}.contact-row b{font-weight:500;color:#8b6d5d}
.count{text-align:center;margin-top:20px}.count>p{margin:0 0 8px;font-size:14px}.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;direction:ltr}.count-grid div{border:1px solid #dfd3bd;background:#fffaf2;border-radius:10px;padding:5px 2px;direction:rtl}.count-grid strong{display:block;font-family:Georgia,serif;color:#a15a61;font-size:22px}.count-grid small{font-size:11px;color:#8a756b}
footer{text-align:center;margin-top:20px;color:#806a60}footer p{font-size:20px;color:#7e4049;margin:5px}#reopen{border:1px solid #d2ba82;border-radius:999px;background:#fffaf1;color:#7c624f;padding:6px 15px;font-size:12px}
.music-btn{position:fixed;z-index:90;left:16px;bottom:18px;width:48px;height:48px;border-radius:50%;border:1px solid #d2bb86;background:#fffaf2;color:#8a5b62;font-size:23px;box-shadow:0 8px 20px rgba(70,50,38,.15);display:none}.music-btn.show{display:block}.music-btn.playing{animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 0 0 9px rgba(198,169,104,.12),0 8px 20px rgba(70,50,38,.15)}}
@media(max-width:430px){.opening-envelope{width:91vw;height:265px}.card{padding:31px 16px 25px}.intro h1{font-size:23px}.intro h2{font-size:39px}.invite-text{font-size:16px}.life{font-size:14px}.photo-wrap{margin-top:19px}}