:root{--pe:#f4dccb;--pa:#fbf1e6;--gd:#b8894e;--gl:#e3c48f;--ink:#5b3a24;--mu:#8d6b55}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#2b1a12}body{margin:0;font-family:Tajawal,sans-serif;color:var(--ink);text-align:center;overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
/* envelope */
#env{position:fixed;inset:0;z-index:20;perspective:1400px;overflow:hidden}
.flap{position:absolute;inset:0;background:url(assets/env.webp) center/cover;transition:transform 1.25s cubic-bezier(.6,.05,.25,1),opacity 1.1s;will-change:transform;backface-visibility:hidden}
.ft{clip-path:polygon(0 0,100% 0,100% 16%,50% 51%,0 16%);transform-origin:50% 0;filter:drop-shadow(0 6px 8px rgba(90,50,30,.25));z-index:2}
.fl{clip-path:polygon(0 0,50% 51%,0 100%)}.fr{clip-path:polygon(100% 0,100% 100%,50% 51%)}.fb{clip-path:polygon(0 100%,50% 51%,100% 100%);filter:brightness(1.02)}
.shine{position:absolute;inset:-20%;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,236,190,.0) 42%,rgba(255,226,160,.75) 50%,rgba(255,250,235,.0) 58%,transparent 62%);mix-blend-mode:screen;transform:translateX(120%);opacity:0}
.spark{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background-image:radial-gradient(circle,#fff6d8 0 1.4px,transparent 2.4px),radial-gradient(circle,#ffe2a3 0 1px,transparent 2px);background-size:57px 61px,83px 79px;background-position:0 0,30px 20px;mix-blend-mode:screen}
#env.shim .shine{animation:sweep 1.3s ease-in-out forwards}#env.shim .spark{animation:tw 1.6s ease forwards}
@keyframes sweep{0%{transform:translateX(120%);opacity:1}100%{transform:translateX(-120%);opacity:1}}
@keyframes tw{0%,100%{opacity:0}35%,60%{opacity:.95}}
#seal{position:absolute;z-index:4;left:50%;top:51%;width:150px;height:150px;margin:-75px 0 0 -75px;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(0 8px 14px rgba(80,40,20,.35));transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .6s;animation:breathe 2.6s ease-in-out infinite}
#seal svg{width:100%;height:100%}@keyframes breathe{50%{transform:scale(1.04)}}
.hint{position:absolute;z-index:4;left:0;right:0;top:calc(51% + 92px);margin:0;font:500 15px Tajawal;color:#7d5235;letter-spacing:.3px;transition:opacity .4s}
.hint:before{content:"";display:block;width:6px;height:6px;margin:0 auto 8px;border-radius:50%;background:var(--gd);animation:pul 1.6s infinite}@keyframes pul{50%{transform:scale(1.8);opacity:.3}}
#env.open #seal{animation:none;transform:scale(1.25);opacity:0}#env.open .hint{opacity:0}
#env.open .ft{transform:rotateX(178deg);opacity:.0}#env.open .fl{transform:translateX(-102%)}#env.open .fr{transform:translateX(102%)}#env.open .fb{transform:translateY(102%)}
#env.gone{visibility:hidden}
/* scene */
#scene{position:fixed;inset:0;background:url(assets/scene.webp) center/cover;transform:scale(1.15);transition:transform 3.2s cubic-bezier(.2,.7,.2,1);will-change:transform}
body.shown #scene{transform:scale(1.02)}
main{position:relative;z-index:1}
.hero{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 8svh;color:#fff8ee;text-shadow:0 2px 14px rgba(90,40,10,.55)}
.hero>*{opacity:0;transform:translateY(16px);transition:opacity 1.2s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
body.shown .hero>*{opacity:1;transform:none}body.shown .hero .pre{transition-delay:.5s}body.shown .hero .nm{transition-delay:.8s}body.shown .hero .sub{transition-delay:1.1s}body.shown .scroll-cue{transition-delay:2s}
.pre{font:400 20px Amiri;margin:14px 0 2px}.nm{font:400 64px/1.25 "Aref Ruqaa";margin:0}.nm i,.nm2 i{font-style:normal;font-family:Amiri;font-size:.55em;color:var(--gl);margin:0 6px}
.sub{font:500 16px Tajawal;letter-spacing:3px;margin:6px 0}
.scroll-cue{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));font-size:13px}.scroll-cue span{display:block;width:2px;height:22px;margin:6px auto 0;background:linear-gradient(#fff8ee,transparent);animation:cue 1.6s infinite}@keyframes cue{50%{transform:translateY(6px);opacity:.4}}
/* medallion */
.med{width:92px;height:92px;margin:10px auto;display:grid;place-items:center;transform:rotate(45deg);border-radius:22px;background:radial-gradient(circle at 40% 35%,#fff1d6,#e5bf86 55%,#a87842);box-shadow:0 0 0 3px var(--pa),0 0 0 4.5px var(--gd),0 6px 18px rgba(120,70,30,.3)}
.med span{transform:rotate(-45deg);font:400 30px "Aref Ruqaa";color:#6d4220}
.med.big{width:104px;height:104px;box-shadow:0 0 0 3px rgba(255,240,215,.6),0 0 0 5px rgba(227,196,143,.9),0 0 40px rgba(255,200,130,.6)}
.med.sm{width:62px;height:62px;border-radius:14px}.med.sm span{font-size:20px}
.med.glow{animation:glow 3s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 0 0 3px var(--pa),0 0 0 4.5px var(--gd),0 0 38px 8px rgba(255,190,110,.65)}}
/* card */
.card{position:relative;margin:0 14px;padding:34px 0 18px;background:linear-gradient(#fbf1e6,#f6e4d3);border-radius:180px 180px 18px 18px/120px 120px 18px 18px;box-shadow:0 -10px 40px rgba(60,25,10,.35),inset 0 0 0 1px rgba(184,137,78,.45),inset 0 0 0 7px var(--pa),inset 0 0 0 8px rgba(184,137,78,.35)}
.sec{padding:30px 24px}.eyb{font:500 13px Tajawal;letter-spacing:4px;color:var(--gd);margin:0}
.nm2{font:400 46px/1.3 "Aref Ruqaa";margin:4px 0 6px}
.date{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0 4px}.date .l{font:500 15px Tajawal;padding:6px 0;border-top:1px solid var(--gl);border-bottom:1px solid var(--gl);min-width:76px}
.date .d{display:flex;flex-direction:column}.date b{font:400 54px/1 Amiri;color:var(--ink)}.date em{font:400 20px Amiri;font-style:normal;color:var(--gd)}
.yr{font:400 17px Amiri;color:var(--mu);margin:6px 0 16px;letter-spacing:2px}
.btn{display:inline-block;font:500 15px Tajawal;color:#fff;background:linear-gradient(135deg,#c79a5e,#a9773f);padding:11px 26px;border-radius:30px;text-decoration:none;border:0;box-shadow:0 4px 12px rgba(150,95,40,.3);cursor:pointer}
.btn:active{transform:scale(.97)}
.orn{height:14px;margin:0 auto;width:150px;background:linear-gradient(90deg,transparent,var(--gl),transparent) center/100% 1px no-repeat;position:relative}.orn:after{content:"✦";position:absolute;inset:0;font-size:11px;line-height:14px;color:var(--gd)}
.lead{font:400 21px/1.9 Amiri;margin:0 0 10px}.body{font:400 17px/1.9 Amiri;margin:8px 0}.body.s{font-size:15.5px;color:var(--mu)}
.ttl{font:400 34px "Aref Ruqaa";margin:0 0 16px;font-weight:400}
.arches{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px 50px;position:relative;max-width:280px;margin:0 auto}
.ar{border:1.5px solid var(--gl);border-radius:60px 60px 10px 10px;padding:20px 0 10px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 4px var(--pa),inset 0 0 0 5px rgba(184,137,78,.3)}
.ar b{display:block;font:500 30px Tajawal;font-variant-numeric:tabular-nums}.ar small{font-size:13px;color:var(--mu)}
.arches .med{position:absolute;left:50%;top:50%;margin:-31px 0 0 -31px}
.loc img{width:100%;max-width:330px;height:auto;mix-blend-mode:multiply;border-radius:6px}
.place{font:400 30px "Aref Ruqaa";margin:6px 0 0}.addr{font:400 16px Amiri;color:var(--mu);margin:0 0 16px}
.sig{font:400 24px "Aref Ruqaa";color:var(--gd);margin:10px 0}
footer{font-size:12px;color:var(--mu);padding:10px 0 calc(8px + env(safe-area-inset-bottom))}
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
#mus{position:fixed;z-index:15;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:42px;height:42px;border-radius:50%;border:1px solid rgba(184,137,78,.6);background:rgba(251,241,230,.85);color:var(--gd);font-size:18px;backdrop-filter:blur(6px);cursor:pointer}
#mus[aria-pressed=true]{background:#c99c62;color:#fff;animation:pul2 2s infinite}@keyframes pul2{50%{box-shadow:0 0 0 6px rgba(201,156,98,.2)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}
.hero{position:relative}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 42% at 50% 52%,rgba(70,30,10,.45),transparent 75%),linear-gradient(transparent 55%,rgba(60,25,10,.45))}
.hero .nm{font-size:68px}.pre{font-size:22px}
.hint{width:max-content;margin:0 auto;padding:7px 16px;border-radius:20px;background:rgba(251,241,230,.85);box-shadow:0 2px 10px rgba(120,70,30,.15)}