:root{--bg:#fbfaf7;--ink:#3b3226;--soft:#7a6e5c;--gold:#b8954a;--gold2:#e3cd8f;--card:#fff;--env:#f1ead9;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17140f;--ink:#f3ecdc;--soft:#b9ad96;--card:#221d15;--env:#2a2418}}
:root[data-theme="dark"]{--bg:#17140f;--ink:#f3ecdc;--soft:#b9ad96;--card:#221d15;--env:#2a2418}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Amiri,serif;font-size:20px;line-height:1.8}
body.locked{overflow:hidden;height:100%}
h1,h2{font-family:"Aref Ruqaa",Amiri,serif;font-weight:400;margin:0}
.gold{color:var(--gold)}

/* envelope gate */
#gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
padding:env(safe-area-inset-top,0px) 20px env(safe-area-inset-bottom,0px);transition:opacity .9s ease .9s,visibility 0s 1.8s;cursor:pointer}
#gate.open{opacity:0;visibility:hidden;pointer-events:none}
.env{position:relative;width:min(86vw,360px);aspect-ratio:3/2;perspective:900px}
.env .back,.env .front{position:absolute;inset:0;border-radius:6px;background:var(--env);border:1px solid var(--gold2);box-shadow:0 14px 40px rgba(120,95,40,.22)}
.env .front{clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border:0;background:linear-gradient(160deg,#f7f1e2,var(--env));z-index:3;box-shadow:none}
.flap{position:absolute;left:0;right:0;top:0;height:60%;background:linear-gradient(#efe6cf,#e6d9b6);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:4;transition:transform .9s ease,z-index 0s .45s}
.seal{position:absolute;left:50%;top:52%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;z-index:5;display:grid;place-items:center;
background:radial-gradient(circle at 35% 30%,#f2dc9c,var(--gold));color:#fff;font-size:26px;box-shadow:0 3px 10px rgba(0,0,0,.25);transition:opacity .3s}
.letter{position:absolute;left:7%;right:7%;top:6%;height:88%;background:#fff;border-radius:4px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3b3226;
box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform 1s ease .5s}
.letter b{font-family:"Aref Ruqaa",serif;font-size:1.5rem;font-weight:400;color:var(--gold)}
#gate.open .flap{transform:rotateX(180deg);z-index:1}
#gate.open .seal{opacity:0}
#gate.open .letter{transform:translateY(-70%) scale(1.15)}
.tap{color:var(--soft);font-size:1.05rem;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* page */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px}
.hero p{margin:0;color:var(--soft)}
.names{font-size:clamp(3.4rem,17vw,7rem);line-height:1.25;color:var(--gold);margin:14px 0}
.names small{display:block;font-size:.4em;color:var(--ink)}
.line{width:90px;height:1px;background:var(--gold);margin:22px auto}
.count{display:flex;gap:10px;justify-content:center;margin-top:28px}
.count div{min-width:66px;padding:10px 4px;border:1px solid var(--gold2);border-radius:40px 40px 10px 10px}
.count b{display:block;font-size:1.8rem;line-height:1.2;color:var(--gold)}
.count small{font-size:.85rem;color:var(--soft)}

.photos{padding:30px 0 60px}
.pic{width:min(78vw,380px);aspect-ratio:3/4;margin:0 auto 70px;border-radius:200px 200px 14px 14px;overflow:hidden;border:1px solid var(--gold2);
background:linear-gradient(160deg,#f3ead2,#e3cd8f);display:grid;place-items:center;color:var(--gold);font-family:"Aref Ruqaa",serif;font-size:1.3rem;
opacity:0;transform:translateY(60px) scale(.92);transition:opacity .9s ease,transform .9s ease}
.pic:nth-child(even){border-radius:14px 14px 200px 200px}
.pic.in{opacity:1;transform:none}
.pic img{width:100%;height:120%;object-fit:cover;display:block;will-change:transform}

.reel{overflow:hidden;direction:ltr;padding:20px 0 70px}
.track{display:flex;width:max-content;animation:slide 45s linear infinite}
.track img{height:min(60vh,430px);aspect-ratio:3/4;object-fit:cover;margin-right:16px;border-radius:140px 140px 14px 14px;border:1px solid var(--gold2);flex:none;background:#e3cd8f}
.track img:nth-child(even){border-radius:14px 14px 140px 140px}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.reel{overflow-x:auto}}
#mus{position:fixed;z-index:60;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:var(--card);color:var(--gold);font-size:20px;line-height:1;cursor:pointer;display:none;place-items:center}
#mus.show{display:grid}
#mus:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
section{max-width:640px;margin:0 auto;padding:40px 24px 70px;text-align:center}
h2{font-size:2.4rem;color:var(--gold);margin-bottom:10px}
.card{background:var(--card);border:1px solid var(--gold2);border-radius:160px 160px 18px 18px;padding:44px 24px 32px;margin-top:22px}
.card p{margin:2px 0}
.big{font-size:1.5rem;font-weight:700}
.btn{display:inline-block;margin-top:18px;padding:13px 30px;border-radius:999px;background:var(--gold);color:#fff;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
footer{text-align:center;padding:30px 24px 60px;color:var(--soft)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.pic{opacity:1;transform:none}}

/* إضافات الدعوة المخصصة فقط */
.btn.share { cursor: pointer; font-family: inherit; }
.petal-rain { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.petal-rain span { position: absolute; top: -10vh; opacity: 0; color: var(--gold); font-size: 1.35rem; }
.petal-rain span:nth-child(1) { left: 8%; }
.petal-rain span:nth-child(2) { left: 21%; font-size: 1rem; }
.petal-rain span:nth-child(3) { left: 35%; }
.petal-rain span:nth-child(4) { left: 50%; font-size: 1.8rem; }
.petal-rain span:nth-child(5) { left: 65%; }
.petal-rain span:nth-child(6) { left: 78%; font-size: 1rem; }
.petal-rain span:nth-child(7) { left: 90%; }
#gate.open .petal-rain span { animation: petal-fall 1.5s ease-in forwards; }
#gate.open .petal-rain span:nth-child(2n) { animation-delay: .12s; }
#gate.open .petal-rain span:nth-child(3n) { animation-delay: .24s; }
@keyframes petal-fall { 0% { opacity: 0; transform: translateY(-8vh) rotate(0); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(32px, 115vh) rotate(260deg); } }
.music-frame { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sparkle-burst { position: fixed; inset: 0; z-index: 56; pointer-events: none; overflow: hidden; }
.sparkle-burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold2); opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.sparkle-burst i::after { content: "✦"; position: absolute; left: 50%; top: 50%; color: var(--gold); font-size: 1.1rem; transform: translate(-50%, -50%); }
.sparkle-burst.active i { animation: sparkle-pop 1.15s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes sparkle-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); } }