:root{--bg1:#f6dfe3;--bg2:#e9b9c4;--ink:#7a5a45;--gold:#b98a5a;--paper:#fff8f3;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg1:#e9cdd2;--bg2:#d49aa8}}
:root[data-theme="dark"]{--bg1:#e9cdd2;--bg2:#d49aa8}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;font-family:'Amiri',serif;color:var(--ink);background:linear-gradient(var(--bg1),var(--bg2)) fixed;-webkit-tap-highlight-color:transparent}
body:not(.shown){overflow:hidden;height:100svh}
.gold{background:linear-gradient(100deg,#9c6b42 0,#dcb680 40%,#9c6b42 60%,#c89c68);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 6s linear infinite}
@keyframes sh{to{background-position:-200% 0}}

/* intro */
.intro{position:fixed;inset:0;z-index:5;overflow:hidden;background:linear-gradient(#f3d6dc,#e7b3bf 70%,#d89aaa);cursor:pointer;transition:opacity 1.3s,transform 1.8s}
.intro.gone{opacity:0;transform:scale(1.15);pointer-events:none}
.arch{position:absolute;top:calc(6% + env(safe-area-inset-top,0px));left:50%;width:min(80vw,340px);height:64%;transform:translateX(-50%);border-radius:999px 999px 0 0;background:linear-gradient(#fae8ec,#efc6cf);box-shadow:inset 0 0 0 6px #f6d9df,inset 0 0 0 7px rgba(185,138,90,.55),inset 0 0 0 18px #f2cdd5,inset 0 0 0 19px rgba(185,138,90,.35);overflow:hidden}
.rays{position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,transparent 0 40px,rgba(255,255,255,.35) 40px 95px);animation:dr 9s ease-in-out infinite alternate}
@keyframes dr{to{transform:translateX(40px)}}
.cap{position:absolute;top:17%;width:100%;text-align:center}
.cap small{display:block;font-size:14px;letter-spacing:4px;color:#a37a5c}
.cap b{font:700 30px 'Aref Ruqaa',serif}
.silk{position:absolute;left:-10%;right:-10%;bottom:0;height:42%;background:radial-gradient(120% 60% at 30% 10%,#f6cfd8 0,transparent 60%),radial-gradient(100% 70% at 80% 0,#fbe3e9 0,transparent 55%),repeating-linear-gradient(100deg,#e6a9b8 0 30px,#efbcc8 30px 70px,#e2a0b1 70px 110px);border-radius:50% 50% 0 0/14% 14% 0 0}
.box{position:absolute;left:50%;bottom:21%;width:min(78vw,330px);transform:translateX(-50%)}
.box svg{width:100%;display:block;overflow:visible}
.lid{transform-origin:150px 120px;transform:scaleY(-.38);transition:transform 1.5s cubic-bezier(.3,1.35,.5,1)}
.open .lid{transform:scaleY(1)}
.fig{transform:translateY(90px);opacity:0;transition:transform 1.7s 1s cubic-bezier(.2,.8,.2,1),opacity .6s 1s}
.open .fig{transform:none;opacity:1}
.spin{transform-origin:152px 150px}
.open .spin{animation:sp 9s 2.6s ease-in-out infinite}
@keyframes sp{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.tap{position:absolute;left:50%;bottom:calc(5% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:17px;color:#8c5f4c;transition:opacity .6s}
.open .tap{opacity:0}
.pl{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);background:rgba(255,255,255,.4);animation:pu 2.2s infinite}
@keyframes pu{0%{box-shadow:0 0 0 0 rgba(185,138,90,.5)}100%{box-shadow:0 0 0 22px rgba(185,138,90,0)}}
.sp{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #fff;opacity:0;animation:tw 2.4s infinite}
@keyframes tw{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}

/* card */
main{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:28px 16px 48px;visibility:hidden}
.shown main{visibility:visible}
.card{position:relative;z-index:2;width:min(100%,420px);padding:92px 26px 40px;text-align:center;background:radial-gradient(120% 80% at 50% 0,#fffdfb,var(--paper));border-radius:210px 210px 18px 18px;box-shadow:0 24px 60px rgba(150,70,90,.3),inset 0 0 0 1px rgba(185,138,90,.7),inset 0 0 0 7px var(--paper),inset 0 0 0 8px rgba(185,138,90,.45)}
.r{opacity:0}
.shown .r{animation:up 1.1s calc(var(--i)*.17s + .5s) both cubic-bezier(.2,.7,.2,1)}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.card p,.card div,.card h2{margin:0}
.bis{font-size:15px;color:#a37a5c}
.lab{font-size:14px;letter-spacing:3px;color:#a37a5c;margin-top:14px!important}
.nm{font:700 46px/1.5 'Aref Ruqaa',serif}
.amp{font:400 30px/1 'Aref Ruqaa',serif}
.orn{display:block;width:150px;height:14px;margin:14px auto;color:var(--gold)}
.inv{font-size:18px;line-height:1.9}
.date{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:18px 0 8px!important}
.date .s{padding:9px 0;border-block:1px solid rgba(185,138,90,.6);font-size:20px}
.date .n{font:700 60px/1.1 'Aref Ruqaa',serif}
.tm{font-size:19px;margin-bottom:4px!important}
.hall{font:700 30px/1.5 'Aref Ruqaa',serif;margin-top:4px!important}
.adr{font-size:17px;margin:2px 0 18px!important}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:999px;border:1px solid var(--gold);color:#7a5230;text-decoration:none;background:rgba(255,255,255,.65);font-size:17px}
.shown .btn{animation:up 1.1s calc(var(--i)*.17s + .5s) both cubic-bezier(.2,.7,.2,1),pu 2.8s 4s infinite}
.petals{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.pt{position:absolute;top:-30px;width:12px;height:14px;background:linear-gradient(#f7c3cf,#e48ea3);border-radius:0 100% 0 100%;opacity:.75;animation:fall linear infinite}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(540deg)}}
.snd{position:fixed;z-index:6;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:rgba(255,255,255,.75);color:#7a5230;font-size:20px;cursor:pointer}
.snd.off{opacity:.5;text-decoration:line-through}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}