/* Self-hosted fonts (SIL Open Font License): Bricolage Grotesque, Geist, IBM Plex Sans Arabic */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/plex-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/plex-arabic-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/plex-arabic-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
/* ra3d.me
   Concept: one body of points. Every point stands for a fixed number of Arabic Discord members,
   so the whole cloud IS the 200,000. The same points rearrange into every scene: nothing is swapped out,
   the community just takes a new shape. No page scroll: scenes are states, changed by click, key or swipe. */
:root{
  --bg:#07080b; --panel:#101217; --ink:#f2f1ec; --mute:#8f94a1; --line:#252830;
  --gold:#e3cf9a; --on-gold:#14120b; --tint:#aebbd6;
  --font:"Geist","IBM Plex Sans Arabic",-apple-system,"Segoe UI",Tahoma,sans-serif;
  --display:"Bricolage Grotesque","IBM Plex Sans Arabic","Geist",sans-serif;
  --gut:clamp(18px,3.2vw,44px); --ease:cubic-bezier(.2,.7,.2,1); --cx:50vw; --cy:50vh;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;margin:0;-webkit-font-smoothing:antialiased;position:fixed;inset:0;touch-action:pan-y}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.ltr{direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(7,8,11,.82) 100%)}

/* chrome */
.bar{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gut)}
.mark{display:flex;align-items:center;gap:10px;font:600 18px/1 var(--display);min-height:44px}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(227,207,154,.16)}
.lang{display:flex}
.lang button{min-width:44px;height:44px;display:grid;place-items:center;font-size:14px;font-weight:500;color:var(--mute)}
.lang button[aria-pressed="true"]{color:var(--ink)}

.rail{position:absolute;z-index:20;inset-inline-start:var(--gut);bottom:22px;display:flex;gap:2px}
.rail button{height:44px;padding-inline:10px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mute);transition:color .3s}
.rail button b{font:500 13px/1 var(--display);font-variant-numeric:tabular-nums;opacity:.7}
.rail button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .6s var(--ease),opacity .4s;opacity:0}
.rail button::after{content:"";width:18px;height:1px;background:currentColor;opacity:.35;transition:width .6s var(--ease),opacity .3s,background .3s}
.rail button:hover{color:var(--ink)}
.rail button[aria-current="true"]{color:var(--ink)}
.rail button[aria-current="true"] span{max-width:12em;opacity:1}
.rail button[aria-current="true"]::after{width:44px;background:var(--gold);opacity:1}
.rail li:last-child button::after{display:none}

.ctl{position:absolute;z-index:20;inset-inline-end:var(--gut);bottom:22px;display:flex;align-items:center;gap:8px}
.ctl button{height:52px;border-radius:26px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:12px;transition:border-color .3s,background .3s,color .3s;background:rgba(7,8,11,.6)}
.ctl button:hover{border-color:var(--ink)}
.ctl svg{width:16px;height:16px}
[dir="rtl"] .ctl svg{transform:scaleX(-1)}
#prev{width:52px}
#next{padding-inline:22px 18px;font-weight:500;font-size:15px;background:var(--ink);color:var(--bg);border-color:var(--ink);will-change:transform}
#next small{font-size:12.5px;opacity:.6;font-weight:400}
#next span{display:grid;line-height:1.2}
button[disabled]{opacity:.3;pointer-events:none}
html:not(.in) .bar,html:not(.in) .rail,html:not(.in) .ctl,html:not(.in) .mob{opacity:0;pointer-events:none}
.bar,.rail,.ctl,.mob{transition:opacity .8s .5s}

/* scenes */
.sc{position:absolute;inset:0;visibility:hidden;pointer-events:none;z-index:10;padding:76px var(--gut) 96px;display:grid}
.sc.on,.sc.out{visibility:visible}
.sc.on{pointer-events:auto}
.sc.on>*{pointer-events:auto}
.sc{pointer-events:none}
.a{opacity:0;transform:translate3d(0,26px,0);transition:opacity .3s,transform .35s cubic-bezier(.6,0,.8,.3)}
.sc.on .a{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*70ms + .75s)}
.m{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.m>span{display:block;transform:translate3d(0,108%,0);transition:transform .35s cubic-bezier(.6,0,.8,.3)}
.sc.on .m>span{transform:none;transition:transform 1.15s var(--ease);transition-delay:calc(var(--d,0)*70ms + .7s)}
.kick{font-size:14.5px;color:var(--mute)}
.big{font:600 clamp(34px,4.6vw,68px)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
[lang="ar"] .big,[lang="ar"] .verbs button,[lang="ar"] .xl button{letter-spacing:0;line-height:1.35}
.go{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px}
.go a{font-size:15px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.go a:hover{border-color:var(--tint);color:var(--tint)}
.go svg{width:12px;height:12px}

/* 01 */
.s1{align-items:center}
.s1 .tx{max-width:min(46vw,620px)}
.s1 .who{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.s1 .who b{font:600 22px/1 var(--display)}
.s1 .roles{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:0 34px;margin-top:30px}
.s1 .roles li{font-size:15px;padding:10px 0;border-top:1px solid var(--line);min-width:11em}
.s1 .lede{color:var(--mute);margin-top:18px;font-size:17px;max-width:27em}
.face{position:absolute;left:var(--cx);top:var(--cy);width:clamp(104px,11vw,150px);aspect-ratio:1;margin:calc(clamp(104px,11vw,150px)/-2) 0 0 calc(clamp(104px,11vw,150px)/-2);border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s}
.sc.on .face{opacity:1;transform:none;transition:opacity .9s .9s,transform 1.3s .8s var(--ease)}
.face img{width:100%;height:100%;border-radius:50%}
.face::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--gold);opacity:.7}

/* 02 */
.s2{align-items:center}
.verbs{display:grid;gap:2px;margin-top:16px}
.verbs button{font:600 clamp(34px,5.4vw,78px)/1.06 var(--display);letter-spacing:-.035em;color:rgba(242,241,236,.2);transition:color .5s,transform .7s var(--ease);min-height:44px;width:max-content;max-width:100%}
.verbs button:hover{color:rgba(242,241,236,.55)}
.verbs button[aria-pressed="true"]{color:var(--ink);transform:translateX(14px)}
[dir="rtl"] .verbs button[aria-pressed="true"]{transform:translateX(-14px)}
.s2 .say{margin-top:22px;font-size:18px;max-width:23em;min-height:3.2em;color:var(--ink)}
.s2 .say span{display:block;transition:opacity .4s,transform .6s var(--ease)}
.s2 .say.sw span{opacity:0;transform:translateY(10px);transition:none}

/* 03 */
.s3{place-items:center;text-align:center}
.s3 .core{display:grid;justify-items:center;transition:transform 1s var(--ease)}
.adid{display:flex;align-items:center;gap:12px;text-align:start}
.adid img{width:48px;height:48px;border-radius:50%}
.adid b{display:block;font:600 19px/1.2 var(--display)}
.adid span span{display:block;font-size:14px;color:var(--mute)}
.num{font:700 clamp(68px,17.5vw,280px)/.92 var(--display);letter-spacing:-.055em;font-variant-numeric:tabular-nums;margin-top:10px;text-shadow:0 0 60px rgba(7,8,11,.9)}
.s3 .cap{font-size:15px;color:var(--mute);margin-top:10px}
.s3 .cap b{color:var(--ink);font-weight:500}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding-inline:22px;border-radius:24px;border:1px solid var(--tint);color:var(--ink);font-weight:500;font-size:15px;margin-top:22px;background:rgba(7,8,11,.55);transition:background .3s,color .3s}
.pill:hover,.pill[aria-expanded="true"]{background:var(--tint);color:#0a0b10}
.more{position:absolute;inset-inline-end:var(--gut);top:50%;width:min(400px,calc(100vw - 2*var(--gut)));background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px;text-align:start;transform:translate3d(40px,-50%,0);opacity:0;visibility:hidden;transition:opacity .35s,transform .6s var(--ease),visibility 0s .6s}
[dir="rtl"] .more{transform:translate3d(-40px,-50%,0)}
.s3.open .more{opacity:1;transform:translate3d(0,-50%,0);visibility:visible;transition:opacity .5s,transform .8s var(--ease)}
.more q{font:500 20px/1.35 var(--display);display:block;quotes:none}
.more .sm{font-size:13.5px;color:var(--mute);display:block;margin-top:10px}
@media (min-width:900px){ .s3.open .core{transform:translate3d(-17vw,0,0) scale(.82)} [dir="rtl"] .s3.open .core{transform:translate3d(17vw,0,0) scale(.82)} }

/* 04 */
.s4{align-items:center}
.xl{display:grid;gap:0;margin-top:14px}
.xl button{display:flex;align-items:center;gap:16px;font:600 clamp(22px,2.7vw,40px)/1.15 var(--display);letter-spacing:-.025em;color:rgba(242,241,236,.26);padding-block:7px;min-height:48px;transition:color .5s}
.xl button:hover{color:rgba(242,241,236,.6)}
.xl button[aria-pressed="true"]{color:var(--ink)}
.xl button i{width:8px;height:8px;border-radius:50%;background:var(--tint);transform:scale(0);transition:transform .5s var(--ease)}
.xl button[aria-pressed="true"] i{transform:none}
.xd{position:absolute;inset-inline-end:var(--gut);bottom:104px;width:min(400px,38vw);text-align:start}
.xd .in{transition:opacity .4s,transform .6s var(--ease)}
.xd.sw .in{opacity:0;transform:translateY(12px);transition:none}
.xd .logo{height:56px;display:flex;align-items:center;margin-bottom:14px}
.xd .logo img{height:52px;width:auto;border-radius:50%}
.xd .logo img.sq{border-radius:12px}
.xd .logo img.raw{border-radius:0}
.xd .logo svg{height:40px;width:auto}
.xd h3{font:600 26px/1.2 var(--display);margin-top:2px}
.xd p.w{margin-top:8px;color:#c9ccd4}

/* 05 */
.s5{grid-template-columns:1fr 1fr;align-items:end;gap:var(--gut)}
.s5 article{max-width:400px;justify-self:center;width:100%;padding-bottom:4vh;transition:opacity .5s}
.s5 .lg{height:46px;display:flex;align-items:center;margin-bottom:16px}
.s5 .lg img{height:46px;width:auto}
.s5 .lg svg{height:44px;width:auto}
.s5 h2{font:600 clamp(28px,3vw,42px)/1.1 var(--display);letter-spacing:-.02em;margin-top:2px}
.s5 p.w{margin-top:10px;color:#c9ccd4}
.s5 .tabs{display:none}

/* 06 */
.s6{place-items:center;text-align:center}
.handle{font:700 clamp(96px,19vw,250px)/.95 var(--display);letter-spacing:-.06em;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding-inline:28px;border-radius:26px;background:var(--gold);color:var(--on-gold);font-weight:600;margin-top:20px;will-change:transform}
.rooms{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:34px}
.rooms a{display:flex;align-items:center;gap:10px;min-height:48px;font-size:15px;font-weight:500;border-bottom:1px solid transparent;transition:border-color .3s}
.rooms a:hover{border-color:var(--ink)}
.rooms img{width:28px;height:28px;border-radius:50%}
.rooms img.raw{border-radius:0}
.note{position:absolute;inset-inline:var(--gut);bottom:88px;font-size:12.5px;color:var(--mute);text-align:center}

/* opening */
#intro{position:absolute;inset:0;z-index:40;display:grid;place-items:center;text-align:center;cursor:pointer;transition:opacity .7s,visibility 0s .7s}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro .n{font:600 clamp(54px,9vw,120px)/1 var(--display);letter-spacing:-.04em;margin-top:150px}
#intro .n span{display:inline-block;opacity:0;transform:translateY(40%);animation:up .9s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + .5s)}
#intro .h{color:var(--mute);margin-top:8px;opacity:0;animation:fade .8s 1.1s forwards}
#enter{margin-top:30px;min-height:52px;padding-inline:30px;border-radius:26px;border:1px solid var(--gold);color:var(--gold);font-weight:500;opacity:0;animation:fade .8s 1.7s forwards;transition:background .3s,color .3s}
#enter:hover{background:var(--gold);color:var(--on-gold)}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* mobile chrome */
.mob{display:none}
.sheet{position:absolute;inset:0;z-index:30;background:rgba(7,8,11,.94);display:grid;align-content:center;padding:var(--gut);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .3s}
.sheet button{display:flex;gap:16px;align-items:baseline;font:600 30px/1.2 var(--display);padding-block:10px;width:100%;color:var(--mute)}
.sheet button[aria-current="true"]{color:var(--ink)}
.sheet button b{font-size:14px;font-weight:500;color:var(--gold)}

/* cursor */
.cur{position:fixed;top:0;left:0;z-index:95;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
.cur.onn{opacity:1}
.cur i{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(242,241,236,.7);transition:transform .45s var(--ease),background .3s,border-color .3s}
.cur span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);opacity:0;font-size:12.5px;font-weight:600;color:var(--on-gold);white-space:nowrap;transition:opacity .25s,transform .45s var(--ease)}
.cur.hov i{transform:scale(1.5);border-color:var(--gold)}
.cur.lab i{transform:scale(2.5);background:var(--gold);border-color:var(--gold)}
.cur.lab span{opacity:1;transform:translate(-50%,-50%)}

@media (max-width:899px){
  .rail,.ctl{display:none}
  .mob{position:absolute;z-index:20;inset:auto 0 0 0;display:flex;align-items:center;gap:8px;padding:10px var(--gut) max(12px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 45%)}
  .mob button{height:50px;border-radius:25px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:rgba(7,8,11,.7)}
  .mob .ar{width:50px;flex:none}
  .mob .ar svg{width:16px;height:16px}
  [dir="rtl"] .mob .ar svg{transform:scaleX(-1)}
  .mob #mNext{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .mob #mNow{flex:1;gap:10px;font-size:15px;font-weight:500;min-width:0}
  .mob #mNow b{font:500 13px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
  .mob #mNow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sc{padding:66px var(--gut) 84px;overflow-y:auto}
  .s1,.s2,.s4{align-items:end}
  .s1 .tx{max-width:none}
  .big{font-size:clamp(30px,8.6vw,44px)}
  .s1 .roles{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:18px}
  .s1 .roles li{min-width:0;font-size:14px;padding:8px 0}
  .s1 .lede{font-size:15.5px;margin-top:12px}
  .verbs{grid-template-columns:auto auto;justify-content:start;gap:0 22px}
  .verbs button{font-size:clamp(26px,8vw,38px)}
  .verbs button[aria-pressed="true"]{transform:none}
  .s2 .say{font-size:16.5px;margin-top:12px;min-height:4.8em}
  .s3{align-content:center}
  .more{inset:auto var(--gut) 84px var(--gut);top:auto;width:auto;transform:translate3d(0,30px,0)!important}
  .s3.open .more{transform:none!important}
  .s3.open .core{transform:translate3d(0,-19vh,0) scale(.8)}
  .xl{grid-template-columns:1fr 1fr;gap:0 14px;margin-top:8px}
  .xl button{font-size:19px;gap:10px;padding-block:4px;min-height:44px}
  .xd{position:static;width:auto;margin-top:12px;min-height:214px;order:2}
  .s4{align-content:end}
  .xd .logo{height:44px;margin-bottom:8px}.xd .logo img{height:40px}.xd .logo svg{height:32px}
  .xd h3{font-size:21px}
  .s5{grid-template-columns:1fr;align-content:end}
  .s5 article{padding-bottom:0;max-width:none;grid-area:2/1}
  .s5 article[hidden]{display:block;opacity:0;visibility:hidden;pointer-events:none}
  .s5 .tabs{display:flex;gap:6px;grid-area:1/1;margin-bottom:14px}
  .s5 .tabs button{height:44px;padding-inline:18px;border-radius:22px;border:1px solid var(--line);font-weight:500;font-size:15px}
  .s5 .tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .rooms{gap:0 20px;margin-top:20px}
  .note{position:static;margin-top:14px}
}
@media (max-width:899px) and (max-height:679px){ .s1 .roles,.s4 .kick,.s2 .kick{display:none} .face{width:72px;margin:-36px 0 0 -36px} .big{font-size:27px} .xd{min-height:196px;margin-top:6px} .xd .logo{height:36px;margin-bottom:4px} .xd .logo img{height:32px} .xd .logo svg{height:26px} .go{margin-top:8px} .go a{min-height:40px} .s5 .lg{height:34px;margin-bottom:8px} .s5 .lg img,.s5 .lg svg{height:32px} .s5 h2{font-size:24px} }
@media (max-height:620px) and (min-width:900px){ .verbs button{font-size:44px} .xl button{font-size:26px;padding-block:3px;min-height:40px} .big{font-size:40px} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important;transition-delay:0s!important} }

/* stagger steps, replaces inline style attributes so the page runs under a strict CSP */
.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}.d5{--d:5}.d6{--d:6}.d7{--d:7}
.ar-glyph{font-family:"IBM Plex Sans Arabic",sans-serif}
#rail{display:flex}
#nextL{font-weight:600}
.face img{background:#14161c}
.xd .logo img[src$="probot.svg"]{height:36px;border-radius:0}