.logo .rule{width:min(260px,60%);margin-top:4px}
.logo{display:flex;flex-direction:column;align-items:center;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d}
.logo h1{margin:0;padding:0 .04em;font:700 clamp(104px,30vw,168px)/1.1 "Amiri",serif;letter-spacing:0;background:linear-gradient(100deg,#c9a34c 10%,#fffbe9 30%,#f0d68b 45%,#c9a34c 62%,#fffbe9 82%,#c9a34c);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 14px #000a);animation:intro 2.4s var(--ease) both,shimmer 5s linear 2s 2}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,480px)}
.go{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 12px 22px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(15,42,43,.82),rgba(7,23,27,.9));box-shadow:inset 0 1px 0 #d9bc7a2e,0 20px 40px -22px #000;color:var(--gold-l);font:700 21px "Amiri",serif;text-decoration:none;animation:rise .7s var(--ease) both;transition:transform .25s var(--ease),border-color .25s;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.go:nth-child(1){animation-delay:.25s}
.go:nth-child(2){animation-delay:.33s}
.go:nth-child(3){animation-delay:.41s}
.go:nth-child(4){animation-delay:.49s}
.go svg{width:34px;height:34px}
.go::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#d9bc7a22 50%,transparent 65%);transform:translateX(120%);transition:transform .7s var(--ease)}
.go:hover,.go:focus-visible{border-color:var(--gold);outline:0}
.go svg,.go span{transform:translateZ(26px)}
.go:hover::after,.go:focus-visible::after{transform:translateX(-120%)}
.go:active{transform:scale(.97)}
.rays i{z-index:-1;position:fixed;top:-20%;left:8%;width:30vw;height:140%;pointer-events:none;background:linear-gradient(180deg,rgba(217,188,122,.07),transparent 65%);transform:skewX(-18deg);animation:sway 16s ease-in-out infinite alternate}
.rays i:last-child{left:56%;width:20vw;animation-duration:22s;animation-delay:-8s;opacity:.7}
@keyframes shimmer{to{background-position:-220% 0}}
@keyframes sway{to{transform:skewX(-18deg) translateX(9vw)}}

html:has(body.story){scroll-snap-type:y proximity}
.scene{position:relative;display:grid;align-content:center;justify-items:center;gap:26px;min-height:100svh;padding:calc(8vh + 20px) 22px;text-align:center;scroll-snap-align:center}
.scene>*{max-width:720px}
.kicker{margin:0;color:var(--gold);font-size:13px;letter-spacing:0}
.lines,.wise{display:grid;gap:10px}
.line{margin:0;color:#f6efdc;font:400 clamp(26px,6.6vw,46px)/1.85 "Amiri",serif;text-shadow:0 2px 26px #000}
.line.small{font-size:clamp(15px,3.6vw,19px);color:var(--muted);font-family:"IBM Plex Sans Arabic",sans-serif}
.wise .line{font-size:clamp(22px,5.2vw,32px)}
.verse{margin:0;padding:26px 24px;border-radius:22px;color:var(--gold-l);font:400 clamp(24px,5.8vw,36px)/2.1 "Amiri",serif;box-shadow:0 24px 50px -26px #000;border:1px solid transparent;background:linear-gradient(rgba(6,20,24,.72),rgba(6,20,24,.72)) padding-box,linear-gradient(135deg,rgba(240,214,139,.75),rgba(217,188,122,.08) 40%,rgba(217,188,122,.08) 60%,rgba(240,214,139,.6)) border-box;transform-style:preserve-3d}
.verse cite{display:block;margin-top:6px;color:var(--gold);font:400 13px "IBM Plex Sans Arabic",sans-serif;letter-spacing:0;transform:translateZ(18px)}
.verse.big{box-shadow:none;font-size:clamp(28px,7vw,48px);color:#f6efdc;text-shadow:0 2px 26px #000;border:0;background:none}
.intro{gap:30px}
.intro .logo h1{font-size:clamp(50px,14.5vw,120px);line-height:1.5;white-space:nowrap;filter:drop-shadow(0 1px 0 #7a5b22) drop-shadow(0 2px 0 #725520) drop-shadow(0 3px 0 #694d1c) drop-shadow(0 4px 0 #604618) drop-shadow(0 20px 26px #000d)}
.intro .rule{width:min(260px,60%)}
.begin{padding:13px 46px;border:1px solid var(--gold);border-radius:999px;background:rgba(5,16,20,.5);color:var(--gold-l);font:700 22px "Amiri",serif;cursor:pointer;transition:background .3s,color .3s,transform .2s var(--ease)}
.begin:hover,.begin:focus-visible{background:linear-gradient(135deg,#ecd592,#b8964a);color:#13211b;outline:0}
.begin:active{transform:scale(.96)}
.cue{position:absolute;bottom:calc(6vh + 14px);left:50%;width:1px;height:54px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite}
.sig{margin:0;font:700 clamp(40px,11vw,64px)/1.5 "Amiri",serif;color:var(--gold)}
.finale{gap:30px}

body.ready [data-r]:not(.in){opacity:0;transform:perspective(900px) translate3d(0,36px,-150px) rotateX(-18deg);filter:blur(10px)}
[data-r]{transition:opacity 1.3s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s),filter 1.3s var(--ease) var(--d,0s);transform-origin:50% 100%}

.mood i{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
.m-night{background:rgba(2,6,12,.38)}
.m-dusk{background:linear-gradient(180deg,rgba(70,14,16,.5),rgba(24,6,10,.62))}
.m-dawn{background:linear-gradient(0deg,rgba(217,188,122,.3),rgba(47,165,139,.08) 45%,transparent 75%)}
body[data-mood="night"] .m-night,body[data-mood="dusk"] .m-dusk,body[data-mood="dawn"] .m-dawn{opacity:1}
body:not([data-mood]) .m-night{opacity:1}
.bars::before,.bars::after{content:"";position:fixed;left:0;right:0;z-index:50;height:clamp(18px,5.5vh,56px);background:#000;pointer-events:none;animation:curtain 2.6s var(--ease) both}
.bars::before{top:0}
.bars::after{bottom:0}
.story .music{top:calc(clamp(18px,5.5vh,56px) + 10px)}
.grain{position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

@keyframes intro{from{opacity:0;transform:translate3d(0,40px,-320px) rotateX(-28deg)}}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.4);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
.finale>div{width:100%;max-width:480px}
.in3d{display:grid;justify-items:center;gap:26px;width:100%;transform:perspective(1200px) translateZ(var(--tz,0px)) rotateX(var(--rx,0deg));will-change:transform}
.scene>.in3d>*{max-width:720px}
.scene[data-n]::before{content:attr(data-n);position:absolute;left:50%;top:50%;z-index:-1;font:700 min(70vh,120vw)/1 "Amiri",serif;color:transparent;-webkit-text-stroke:1px rgba(217,188,122,.11);transform:translate3d(-50%,calc(-50% + var(--c,0) * -12vh),0);pointer-events:none}
.stage{position:fixed;inset:0;z-index:-2;overflow:hidden;perspective:800px;background:#02050b}
.stage i{position:absolute;inset:-7%;background:center bottom/cover no-repeat;will-change:transform;transform:translate3d(calc(var(--px,0) * var(--k) * -1px),calc(var(--py,0) * var(--k) * .5px - var(--sp,0) * var(--k) * 2px),calc(var(--z) + var(--sp,0) * var(--dz,0px))) scale(var(--s))}
.stage .l-sky{--dz:25px;--k:6;--z:-400px;--s:1.5;background-image:url(../img/l-sky.svg)}
.stage .l-far{--dz:90px;--k:16;--z:-200px;--s:1.25;background-image:url(../img/l-far.svg)}
.stage .l-near{--dz:170px;--k:34;--z:-60px;--s:1.075;background-image:url(../img/l-near.svg)}
.dust{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:44;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.5))}
.finale .in3d>div{width:100%;max-width:480px}
.music{position:fixed;top:max(14px,env(safe-area-inset-top));left:14px;z-index:60;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:12px;background:rgba(5,16,20,.7)}
.music i{width:3px;height:5px;border-radius:2px;background:var(--gold);transition:height .3s}
.music.on i{animation:eq 1s ease-in-out infinite alternate}
.music.on i:nth-child(2){animation-delay:-.4s}
.music.on i:nth-child(3){animation-delay:-.7s}
@keyframes eq{from{height:5px}to{height:17px}}
.stage .l-front{--k:64;--z:40px;--dz:230px;--s:.95;background-image:url(../img/l-front.svg);filter:blur(1.2px)}
.stage .fog{--k:10;--z:-120px;--dz:60px;--s:1.15;background:linear-gradient(180deg,transparent 38%,rgba(130,200,190,.13) 62%,transparent 84%);animation:fog 11s ease-in-out infinite alternate}
.stage .f2{--k:26;--z:-10px;--dz:130px;--s:1.05;background:linear-gradient(180deg,transparent 55%,rgba(150,210,200,.1) 78%,transparent);animation-duration:16s;animation-delay:-5s}
@keyframes fog{from{opacity:.35}to{opacity:1}}
html.auto{scroll-snap-type:none!important}
@keyframes curtain{from{height:50vh}}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}