/* fonts: self-hosted, white-labelled (U = Latin + digits, P = Arabic running text, EB = Arabic display). Licences: assets/fonts/NOTICE.txt */
@font-face{font-family:'EB';src:url('../assets/fonts/eb.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0-2F,U+3A-10FFFF} /* digits come from U: the Arabic display face draws ٠١٢, the rest of the page uses 012 */
@font-face{font-family:'U';src:url('../assets/fonts/u4.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'U';src:url('../assets/fonts/u5.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'U';src:url('../assets/fonts/u7.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'P';src:url('../assets/fonts/p4a.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'P';src:url('../assets/fonts/p4.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'P';src:url('../assets/fonts/p5a.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'P';src:url('../assets/fonts/p5.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#191923;--bg2:#20202A;--bg3:#252531;--acc:#FFC107;--txt:#e3e3e3;--pri:#FEFEFE;--m:20px;--ease:cubic-bezier(.16,1,.3,1);--bar:56px}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:400 16px/1.5 'U',system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
html[lang=ar] body{font-family:'EB','U',system-ui,sans-serif;font-weight:700;font-synthesis:none}
::selection{background:var(--acc);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html{scrollbar-color:var(--acc) var(--bg);scrollbar-width:thin}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* header (kept) */
.bar{position:absolute;inset:0 0 auto;z-index:6;height:var(--bar);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 var(--m);font-size:14px;color:var(--txt)}
.bar .l{display:flex;align-items:center;gap:9px}
.bar .av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--acc)}
.bar .on{width:8px;height:8px;border-radius:50%;background:#5CE08A;transition:background .4s}
.bar.off .on{background:#5d5d6b}
.bar .zz{font-size:12px;font-weight:500;color:rgba(227,227,227,.62);margin-inline-start:-3px}
.bar a{color:var(--acc);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.bar a:hover{color:var(--pri)}

/* hero */
.hero{position:relative;height:100svh;min-height:580px;overflow:hidden;isolation:isolate;touch-action:pan-y;--x:50%;--y:30%}
canvas.wand{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
canvas.led{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.portrait{position:absolute;inset:0;z-index:1;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.fig{position:relative;height:88%;aspect-ratio:700/1250}
.fig img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.fig .base{filter:brightness(.5) saturate(.7)}
.fig .lit{-webkit-mask-image:radial-gradient(circle 190px at var(--lx,50%) var(--ly,30%),#000 0,#000 30%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--lx,50%) var(--ly,30%),#000 0,#000 30%,transparent 100%)} /* taste-skill-ignore: scrim / alpha mask, not a visible gradient fill */
.scrim{position:absolute;inset:auto 0 0;height:62%;z-index:2;background:linear-gradient(to top,var(--bg) 6%,rgba(25,25,35,.0) 100%);pointer-events:none} /* taste-skill-ignore: scrim / alpha mask, not a visible gradient fill */
.scan{position:absolute;top:0;bottom:0;left:0;width:2px;will-change:transform;margin-inline-start:-1px;z-index:5;background:var(--acc);opacity:0;pointer-events:none}
.scan::before{content:"";position:absolute;inset-block:0;inset-inline-end:100%;width:56px;background:rgba(255,193,7,.1)}
.content{position:absolute;inset:auto 0 0;z-index:4;padding:0 var(--m) 22px;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:720px;margin-inline:auto}
h1.name{width:100%;color:var(--pri)}
.ln{display:block;perspective:700px;white-space:nowrap;font-weight:700;line-height:.98;letter-spacing:-.015em;font-size:13.4vw}
.ln+.ln{font-size:14.8vw}
html[lang=ar] .ln{text-transform:none;letter-spacing:0;line-height:.9;font-size:16vw}
html[lang=ar] .ln+.ln{font-size:19vw}
.ln .w{display:inline-flex;gap:0}
.ch{display:inline-block;will-change:transform}
.ch .in{display:inline-block;transform:translateY(var(--dy,0)) scale(var(--s,1));transition:color .25s;color:inherit}
.ch.hot .in{color:var(--acc)}
/* the nickname: a small sticker slapped on the end of the name, late in the intro */
.nm{position:relative;width:100%}
.nick{position:absolute;inset-inline-end:2px;top:100%;margin-top:-2px;font-size:clamp(17px,4.7vw,22px);line-height:1.2;color:var(--acc);white-space:nowrap;transform:rotate(-6deg);transform-origin:50% 50%;pointer-events:none}
html[dir=ltr] .nick{transform:rotate(6deg)}
.title{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:6px}
.title .t1{font-size:clamp(18px,5vw,26px);line-height:1.2;font-weight:500;color:var(--pri);letter-spacing:.01em}
.title .t2{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;font-size:clamp(18px,5vw,26px);line-height:1.2;color:var(--pri);font-weight:500;letter-spacing:.01em}
.title .t2 i{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
html[lang=ar] .title .t1,html[lang=ar] .title .t2{flex-direction:column;gap:0}
html[lang=ar] .title .t2 i{display:none}
html[lang=ar] .title .t2{line-height:1.5;font-size:clamp(15px,4.2vw,18px)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:45px;border:2px solid var(--acc);background:var(--bg);color:var(--pri);padding:12px 24px;font:500 15px/1.2 inherit;font-family:inherit;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s,transform .3s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover,.btn:focus-visible{background:var(--acc);color:var(--bg)}
.btn:active{transform:scale(.96)}
.btn.sec{border-color:rgba(227,227,227,.38)}
.btn.sec:hover{border-color:var(--acc)}
.btn.pri::after{content:"";position:absolute;inset:-2px;border-radius:45px;border:2px solid var(--acc);opacity:0;pointer-events:none;animation:ring 3.2s var(--ease) 2.8s 3}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.22,1.5);opacity:0}}
.divider{position:relative;width:84px;height:2px;margin:22px auto 18px;background:var(--acc);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)} /* taste-skill-ignore: scrim / alpha mask, not a visible gradient fill */
.divider::after{content:"";position:absolute;inset:0;width:40%;background:rgba(255,255,255,.9);filter:blur(2px);animation:shim 3.4s var(--ease) 3s 2;transform:translateX(-120%)}
@keyframes shim{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
.socials{display:flex;gap:6px;justify-content:center}
.sl{position:relative;flex:0 0 clamp(34px,10.2vw,42px);aspect-ratio:1;border-radius:50%;border:2px solid var(--acc);background:var(--bg);display:grid;place-items:center;color:var(--pri);transition:transform .3s var(--ease),background .3s,color .3s}
.sl::before{content:"";position:absolute;inset:-5px}
.sl svg{width:48%;height:48%}
.sl:hover,.sl:focus-visible{background:var(--acc);color:var(--bg);transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){.btn.pri::after,.divider::after{animation:none}}
@media (min-width:900px){
:root{--m:32px}
.hero{min-height:620px}
.fig{height:92%}
.fig .lit{-webkit-mask-image:radial-gradient(circle 260px at var(--lx,50%) var(--ly,30%),#000 0,#000 30%,transparent 100%);mask-image:radial-gradient(circle 260px at var(--lx,50%) var(--ly,30%),#000 0,#000 30%,transparent 100%)} /* taste-skill-ignore: scrim / alpha mask, not a visible gradient fill */
.title .t1,.title .t2{font-size:28px}
}