:root{--gold:#f8d9ae;--rose:#f59bad;--violet:#bc9cff;--page:#0d0810;--line:#ffd5bf42;--ease:cubic-bezier(.22,1,.36,1);--arabic:'Tajawal','Noto Kufi Arabic',sans-serif;--display:'Aref Ruqaa',serif;--latin:'Cormorant Garamond',serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#fff;background:var(--page);font-family:var(--arabic);overflow-x:hidden}body.locked{overflow:hidden}button,a{font:inherit}#stars,#sparkles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#stars{z-index:0}#sparkles{z-index:3}#progress{position:fixed;z-index:150;top:0;right:0;height:3px;width:0;background:linear-gradient(90deg,var(--rose),var(--gold),#9ee8e3)}#loader{position:fixed;inset:0;z-index:300;display:grid;place-content:center;justify-items:center;background:#08060b;transition:.7s}#loader.hide{opacity:0;visibility:hidden}#loader b{font:2rem var(--display);color:var(--gold);animation:float 1.8s infinite}#loader b i{color:var(--rose)}#loader span{width:140px;height:2px;background:#fff1;margin-top:16px;overflow:hidden}#loader span:after{content:"";display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:load 1.2s infinite}#hearts{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}.heart{position:absolute;bottom:-25px;color:var(--rose);animation:heartUp var(--dur) linear forwards;font-size:var(--size)}
#opening{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;overflow:hidden;text-align:center;background:radial-gradient(circle at 50% 44%,#5b294246,transparent 34%),linear-gradient(145deg,#160c15,#08070b);transition:opacity .64s var(--ease),transform .64s var(--ease),filter .64s var(--ease),visibility .64s}#opening.opened{opacity:0;transform:scale(1.085);filter:blur(9px);visibility:hidden}.eyebrow{font:600 .75rem var(--latin);letter-spacing:.25em;color:var(--gold)}#envelope{width:min(78vw,360px);height:235px;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 35px 45px #0009)}.env{position:relative;width:100%;height:200px;transition:.7s var(--ease)}.env>div{position:absolute}.back{inset:0;background:linear-gradient(145deg,#f6e4c8,#bd9868);border-radius:5px}.paper{z-index:2;left:7%;right:7%;bottom:7%;height:86%;background:#fff9ea;color:#6a4c27;display:flex;flex-direction:column;align-items:center;justify-content:center;font:1.2rem var(--display)}.paper span{font-size:2rem;color:#952448}.left,.right,.front,.flap{inset:0}.left{z-index:3;background:#d6b687;clip-path:polygon(0 0,52% 56%,0 100%)}.right{z-index:3;background:#b89563;clip-path:polygon(100% 0,48% 56%,100% 100%)}.front{z-index:4;background:linear-gradient(160deg,#dec598,#ad8958);clip-path:polygon(0 36%,50% 74%,100% 36%,100% 100%,0 100%)}.flap{z-index:5;height:58%;background:linear-gradient(#efdcc0,#c09d6c);clip-path:polygon(0 0,100% 0,50% 100%)}.wax{z-index:7;left:50%;top:48%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ed7080,#941d49 65%,#4b0a28);border:3px double #ffd68d66;color:var(--gold);font:1rem var(--display);transition:.35s}.wax i{color:#fff;font-size:.6rem}.openGlow{position:absolute;left:50%;top:48%;width:min(110vw,760px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.5);background:radial-gradient(circle,#fff6df55,#f59bad25 22%,transparent 68%);opacity:0}.openFlash{position:absolute;inset:0;z-index:30;background:radial-gradient(circle,#fff8dfd0,#ffd0c25e 15%,transparent 55%);opacity:0;pointer-events:none}#envelopeParticles{position:absolute;inset:0;z-index:32;pointer-events:none}.envParticle{position:absolute;left:50%;top:49%;width:var(--size);height:var(--size);border-radius:50%;background:var(--color);box-shadow:0 0 10px var(--color);opacity:0;animation:particle var(--dur) var(--delay) cubic-bezier(.18,.75,.25,1) forwards}.animating .wax{transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.5) drop-shadow(0 0 25px #fff0ce);opacity:1}.animating .env{animation:dissolve .76s .22s var(--ease) forwards}.animating .openGlow{animation:glow .9s forwards}.animating .openFlash{animation:flash .72s .18s forwards}.animating #openBtn,.animating small,.animating .eyebrow{opacity:0;transition:.2s}#openBtn{border:1px solid var(--line);background:#ffffff0c;color:#fff;border-radius:999px;padding:14px 25px;backdrop-filter:blur(14px);cursor:pointer}#opening small{color:#a99a98;margin-top:10px}#musicBtn{position:fixed;z-index:160;left:18px;top:18px;border:1px solid var(--line);background:#090710cc;color:#fff;border-radius:999px;padding:9px 13px;opacity:0;transition:.4s}#musicBtn.show{opacity:1}#notice{position:fixed;z-index:180;left:50%;bottom:20px;transform:translate(-50%,20px);background:#090710ed;border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:#f8dfb6;opacity:0;visibility:hidden;transition:.35s}#notice.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
main{position:relative;z-index:1;background:linear-gradient(180deg,#110914,#170c16 23%,#120a13 50%,#170c16 73%,#0d080f);overflow:clip}.hero,.story,.count,.details,.gallery,.final{background-color:transparent}.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;background-image:radial-gradient(circle at 18% 24%,#f59bad2a,transparent 34%),linear-gradient(180deg,#110914,transparent 86%,#170c16)}.depth{position:absolute;inset:-10%;background:radial-gradient(circle at 25% 30%,#f59bad22,transparent 28%);transform:translate(var(--bx,0),var(--by,0))}.moon{position:absolute;right:8vw;top:8vh;width:78px;height:78px;border-radius:50%;filter:drop-shadow(0 0 10px #fff0caaa) drop-shadow(0 0 30px #f8d9ae77);transform:translate(var(--mx,0),var(--my,0))}.moon:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 68% 39%,transparent 0 48%,#fff2cf 49% 70%,transparent 71%)}.flare{position:absolute;left:50%;top:47%;width:min(95vw,740px);aspect-ratio:1;transform:translate(calc(-50% + var(--fx,0px)),calc(-50% + var(--fy,0px)));background:radial-gradient(circle,#fffbe3df 0 1px,#f8d9ae40 2px 5%,#f59bad16 15%,transparent 54%)}.heroText{z-index:2;padding:25px;transform:translate(var(--tx,0),var(--ty,0))}.basmala{font:1.25rem var(--display);color:var(--gold)}.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:18px}.orn span{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.orn span:last-child{transform:scaleX(-1)}.heroText>p:not(.basmala){color:#cdbfbc;line-height:1.9}.nameStage{position:relative}.nameStage>i{position:absolute;color:#fff1d5;text-shadow:0 0 12px var(--gold);animation:twinkle 3s infinite}.nameStage>i:first-child{left:5%;top:0}.nameStage>i:nth-child(2){right:4%;bottom:0;animation-delay:-1.4s}.hero h1{font:600 clamp(2.65rem,9vw,6rem)/.95 var(--latin);margin:20px 0 8px;background:linear-gradient(110deg,#f59bad,#fff0cf,#ffd0c2,#bc9cff,#f59bad);background-size:250%;-webkit-background-clip:text;color:transparent;animation:gradient 7s linear infinite}.hero h1 em{font-size:.5em;-webkit-text-fill-color:var(--rose)}.hero h3,.glass h2,header h2,.cards h3,.final h2{font-family:var(--display)}.occasion{font:500 .68rem 'Noto Kufi Arabic';letter-spacing:.3em}.date{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:20px;font:600 1rem var(--latin)}.date b{width:4px;height:4px;border-radius:50%;background:var(--rose)}.scroll{margin-top:7vh;color:#8e8281;font-size:.7rem}.scroll span{display:block;width:1px;height:40px;margin:10px auto;background:linear-gradient(var(--gold),transparent)}.pad{padding:105px max(18px,6vw)}.story{min-height:90vh;display:grid;place-items:center;background-image:radial-gradient(ellipse at 15% 45%,#6a254d35,transparent 42%)}.glass{width:min(760px,100%);padding:clamp(40px,8vw,84px);text-align:center;background:linear-gradient(145deg,#ffffff16,#ffffff06);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(24px)}.glass h2{display:inline;font-size:clamp(1.9rem,6vw,3.2rem);color:#fff0cc}.glass p,.cards p,.final p{line-height:2;color:#c7baba}.sign,.final h3{font:600 1.7rem var(--latin);color:var(--gold)}.sign i,.final h3 i{color:var(--rose)}header{text-align:center;margin-bottom:50px}header small,.glass small{color:var(--gold);letter-spacing:.15em}header h2{font-size:clamp(2rem,7vw,3.7rem);margin:7px}.count{text-align:center;background-image:radial-gradient(ellipse,#5c214640,transparent 60%)}.counter{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:850px;margin:auto}.counter div{padding:28px 6px;border-block:1px solid var(--line);border-radius:14px;background:#fff1}.counter b{display:block;font:clamp(2.3rem,9vw,5.2rem)/1 var(--display);color:var(--gold)}.counter span{color:#a89995}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:auto}.cards article{padding:40px 22px;text-align:center;border:1px solid var(--line);border-radius:16px;background:#ffffff07;transition:.45s}.cards article:hover,.cards .featured{transform:translateY(-6px);background:linear-gradient(160deg,#f59bad15,#bc9cff0d)}.cards article>i{width:58px;height:58px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:auto auto 22px;color:var(--gold)}.map{display:block;width:max-content;margin:42px auto 0;padding:15px 24px;border-radius:999px;color:#181018;text-decoration:none;background:linear-gradient(105deg,#f59bad,#f8d9ae,#9ee8e3)}.photos{max-width:1050px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:240px 240px;gap:16px}.photos figure{position:relative;margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background-position:center;background-size:cover}.p1{grid-row:1/3;background-image:linear-gradient(transparent,#08060bcc),url('photo-1.jpg')}.p2{background-image:linear-gradient(transparent,#08060bcc),url('photo-2.jpg')}.p3{background-image:linear-gradient(transparent,#08060bcc),url('photo-3.jpg')}.photos figure div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#50294499,#160f19dd)}.photos figure.has div{justify-content:flex-end;align-items:flex-start;padding:20px;background:linear-gradient(transparent,#08060bd9)}.photos b{font:4rem var(--display);color:#ffe8ad44}.final{min-height:100svh;display:grid;place-items:center;text-align:center;padding:90px 20px;background-image:radial-gradient(ellipse at 28% 25%,#7d315035,transparent 42%)}.final>div:last-child{max-width:760px}.final h2{font-size:clamp(2rem,7vw,3.7rem);color:var(--gold)}.rings{position:absolute;top:14%;display:flex}.rings i{width:58px;aspect-ratio:1;border:3px solid var(--gold);border-radius:50%}.rings i+i{margin-right:-15px;border-color:var(--rose)}.reveal{opacity:0;filter:blur(9px);transform:scale(.978);transition:.9s var(--ease)}.reveal.visible{opacity:1;filter:blur(0);transform:scale(1)}body.revealing .heroText{animation:arrival .95s .18s var(--ease) both}
@keyframes dissolve{0%,28%{opacity:1;transform:scale(1.08)}72%{opacity:.28;transform:scale(1.19)}100%{opacity:0;transform:scale(1.31);filter:blur(12px)}}@keyframes glow{50%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}@keyframes flash{0%,22%{opacity:0}48%{opacity:.88}100%{opacity:0}}@keyframes particle{20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.1)}}@keyframes arrival{0%{opacity:0;filter:blur(14px);transform:scale(1.105)}100%{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes gradient{to{background-position:250%}}@keyframes twinkle{50%{opacity:.2;transform:scale(.5) rotate(60deg)}}@keyframes float{50%{transform:translateY(-6px)}}@keyframes load{to{transform:translateX(330%)}}@keyframes heartUp{10%{opacity:.5}100%{transform:translate(var(--drift),-110vh);opacity:0}}
@media(max-width:760px){.cards{grid-template-columns:1fr}.counter{gap:5px}.photos{grid-template-columns:1fr;grid-template-rows:330px 220px 220px}.p1{grid-row:auto}.pad{padding:82px 16px}.moon{width:60px;height:60px}.hero h1{font-size:clamp(2.45rem,13vw,4.1rem)}.env{height:180px}#envelope{height:215px}}


/* ===== MOBILE LIGHT FINAL ===== */
:root{--gold:#bd8b43;--rose:#d77f96;--ink:#624b53;--paper:#fffaf5;--line:#d9aa8055}
html{background:#fff8f3}body{color:var(--ink);background:linear-gradient(180deg,#fffaf6 0%,#fff1ea 40%,#fff9f5 72%,#fbece6 100%)}
#loader{background:#fffaf6}#loader b{color:var(--gold)}
#opening{background:radial-gradient(circle at 50% 38%,#fff 0,#fff5ed 48%,#f9e5e1 100%);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease),visibility .55s}#opening.opened{transform:scale(1.055);filter:blur(7px)}.openGlow{background:radial-gradient(circle,#fff 0,#ffd9c966 25%,transparent 68%)}.openFlash{background:radial-gradient(circle,#fff 0,#f8c9bb88 16%,transparent 58%)}.eyebrow{color:#9c7060}
#envelope{height:250px;filter:drop-shadow(0 24px 35px #aa705533)}.invitation-box{position:relative;width:min(78vw,340px);aspect-ratio:1.42;border-radius:20px;background:linear-gradient(145deg,#fffdf8,#f3dcc4 72%,#e6c19c);border:1px solid #fff;box-shadow:inset 0 0 0 8px #fff6,inset 0 0 45px #d79e6622,0 14px 35px #b8795b2b;overflow:hidden;transition:.55s var(--ease)}.box-border{position:absolute;inset:14px;border:1px solid #b98a5766;border-radius:12px}.box-shine{position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 40%,#fff9 50%,transparent 60%);transform:translateX(-55%);animation:boxShine 4s ease-in-out infinite}.ribbon-v,.ribbon-h{position:absolute;background:linear-gradient(90deg,#c56e87,#e3a4b4,#bd627e);box-shadow:0 2px 10px #8f3c5b22}.ribbon-v{width:42px;inset:0 auto 0 50%;transform:translateX(-50%)}.ribbon-h{height:42px;inset:50% 0 auto;transform:translateY(-50%)}.invitation-box .wax{z-index:8;box-shadow:0 5px 14px #79334d33}.box-title{position:absolute;z-index:9;left:0;right:0;bottom:25px;text-align:center;font:700 1rem 'Aref Ruqaa';color:#8b6545;text-shadow:0 1px #fff}.animating .invitation-box{animation:boxBurst .66s .14s var(--ease) forwards}.animating .wax{transform:translate(-50%,-50%) scale(1.22)!important;filter:brightness(1.25) drop-shadow(0 0 18px #e997aa)!important}.animating .env{animation:none!important}.envParticle{width:var(--size);height:var(--size);box-shadow:0 0 6px var(--color)}
main{background:linear-gradient(180deg,#fffaf6,#fff1ea 38%,#fff9f5 70%,#fbece6)}.hero,.story,.count,.details,.gallery,.final{background-color:transparent!important}.hero{background-image:radial-gradient(circle at 50% 34%,#fff 0,#fff8ee 46%,transparent 74%)!important}.depth{background:radial-gradient(circle at 24% 30%,#f1a8b31c,transparent 30%)}.moon{filter:drop-shadow(0 0 10px #c9954d66);color:#d1a252}.flare{opacity:.24;mix-blend-mode:multiply}.heroText>p:not(.basmala),.glass p,.cards p,.final p{color:#816a72}.hero h1{background-image:linear-gradient(110deg,#c76c85,#c89a4b,#df987e,#a47391,#c76c85)}.basmala,.glass small,header small{color:#a4743e}.hero h3,.glass h2,header h2,.cards h3,.final h2{color:#76535f}.glass,.cards article,.counter div{background:#ffffffa6;border:1px solid #fff;box-shadow:0 18px 50px #b2765b18}.glass{backdrop-filter:blur(14px);border-radius:26px}.cards article,.counter div,.photos figure{border-radius:20px}.map{color:#fff;background:linear-gradient(105deg,#d57b92,#cca052,#dd9278)}.photos figure{border:4px solid #fff;box-shadow:0 18px 45px #a86c5422}.final{background-image:linear-gradient(180deg,transparent,#f8ded5)!important}.music-btn,#musicBtn{background:#fffaf5e8;color:#855c66;border-color:#d9aa8055}
.reveal{filter:blur(5px);transform:translateY(8px) scale(.99);transition:opacity .72s var(--ease),filter .72s var(--ease),transform .72s var(--ease)}
@keyframes boxShine{0%,50%{transform:translateX(-55%)}85%,100%{transform:translateX(55%)}}@keyframes boxBurst{0%,25%{opacity:1;transform:scale(1.04)}70%{opacity:.35;transform:scale(1.17)}100%{opacity:0;transform:scale(1.28);filter:blur(9px)}}
@media(max-width:760px){#opening{padding:16px}.eyebrow{margin-bottom:12px}.invitation-box{width:min(82vw,315px);border-radius:18px}.box-title{bottom:20px}.section-pad,.pad{padding:76px 15px}.heroText{padding:20px 16px}.hero h1{font-size:clamp(2.35rem,12.5vw,3.8rem);line-height:1}.heroText>p:not(.basmala){font-size:.92rem;max-width:92vw}.countdown,.counter{gap:6px}.countdown div,.counter div{padding:18px 2px;border-radius:14px}.countdown strong,.counter b{font-size:clamp(2rem,11vw,3.2rem)}.detail-card,.cards article{padding:30px 18px}.gallery-grid,.photos{gap:10px}.glass{padding:38px 20px}.music-label,#musicBtn span{display:none}}
@media(max-width:380px){.invitation-box{width:82vw}.box-title{font-size:.88rem}.hero h1{font-size:2.35rem}.counter span{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.box-shine{animation:none}.animating .invitation-box{animation:none!important;opacity:0}}


/* ===== FINAL QA PERFORMANCE PATCH ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}.invitation-box,.glass,.cards article,.counter div,.photos figure{transform:translateZ(0)}
#opening{min-height:100svh;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
#musicBtn{top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left))}.map{min-height:48px;display:flex;align-items:center;justify-content:center}.cards article,.counter div{content-visibility:auto;contain-intrinsic-size:220px}
@media(max-width:760px){.photos{grid-template-rows:280px 200px 200px}.photos figure{min-height:0}.hero{min-height:100svh}.heroText{width:min(100%,620px)}.hero h3{margin-block:10px}.counter{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.counter b{white-space:nowrap}.cards{gap:12px}.map{width:min(100%,320px);text-align:center}.final{min-height:100svh;padding-inline:18px}.final h2{line-height:1.5}}
@media(max-width:380px){.photos{grid-template-rows:250px 180px 180px}.counter span{font-size:.66rem}.counter b{font-size:clamp(1.75rem,10vw,2.5rem)}#opening small{max-width:260px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){#sparkles,#stars{display:none}.reveal{opacity:1!important;filter:none!important;transform:none!important}}