/* Murada Prime: glass editor window, neon from the avatar, living shards. */
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(fonts/jetbrains-700.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/grotesk-700.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400.woff2) format("woff2")}

@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --void:#05050b;
  --panel:rgba(11,11,22,.72);
  --bar:rgba(255,255,255,.035);
  --text:#f1f2fb;
  --soft:#c3c7da;
  --comment:#a0a7bf;
  --magenta:#ff2fd0;
  --violet:#8b3dff;
  --blue:#1e9bff;
  --line:rgba(190,180,255,.16);
  --neon:linear-gradient(100deg,var(--magenta),var(--violet) 52%,var(--blue));
  --ring:conic-gradient(from var(--spin),var(--magenta),var(--violet),var(--blue),#35e0ff,var(--blue),var(--violet),var(--magenta));
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  --display:"Space Grotesk","JetBrains Mono",system-ui,sans-serif;
  --arabic:"Plex Arabic",Tahoma,"Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;display:flow-root;min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;
  font-family:var(--mono);font-weight:400;color:var(--text);
  background:
    radial-gradient(640px 540px at 10% 18%,rgba(255,47,208,.2),transparent 70%),
    radial-gradient(700px 580px at 92% 78%,rgba(30,155,255,.2),transparent 70%),
    radial-gradient(520px 420px at 55% 112%,rgba(139,61,255,.16),transparent 70%),
    var(--void);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
p{margin:0}
.sharediv{position:absolute;top:0;right:0;padding:0}

/* The shards: they float, turn and pulse behind the glass. */
.background-container{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.parallax-background{position:absolute;inset:0}
.parallax-background>div{
  position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);
  clip-path:polygon(50% 0,100% 100%,0 86%);
  background:linear-gradient(135deg,#ff5cdc,var(--magenta) 35%,var(--violet));
  opacity:var(--o,.8);
  will-change:transform,opacity;
  animation:shard-float var(--t,14s) ease-in-out var(--d,0s) infinite alternate,
            shard-pulse calc(var(--t,14s)*.6) ease-in-out var(--d,0s) infinite alternate;
}
.parallax-background>.object9,.parallax-background>.object10,.parallax-background>.object11,.parallax-background>.object12{
  background:linear-gradient(135deg,#35e0ff,var(--blue) 40%,var(--violet));
}
/* size, place, travel, turn, tempo */
.object1 {--s:72px; --x:7%; --y:10%;--dx:70px; --dy:90px;  --a:-30deg;--b:150deg; --t:13s;--d:-2s;--o:.85}
.object2 {--s:36px; --x:20%;--y:27%;--dx:-60px;--dy:70px;  --a:40deg; --b:-200deg;--t:9s; --d:-5s}
.object3 {--s:104px;--x:3%; --y:42%;--dx:60px; --dy:-90px; --a:60deg; --b:230deg; --t:17s;--d:-8s;--o:.6}
.object4 {--s:30px; --x:23%;--y:52%;--dx:-70px;--dy:-60px; --a:110deg;--b:-120deg;--t:10s;--d:-1s}
.object5 {--s:54px; --x:14%;--y:68%;--dx:50px; --dy:80px;  --a:-12deg;--b:210deg; --t:12s;--d:-6s;--o:.85}
.object6 {--s:20px; --x:27%;--y:9%; --dx:-90px;--dy:60px;  --a:40deg; --b:320deg; --t:8s; --d:-3s}
.object7 {--s:26px; --x:29%;--y:84%;--dx:-80px;--dy:-70px; --a:200deg;--b:-60deg; --t:11s;--d:-7s}
.object8 {--s:84px; --x:5%; --y:82%;--dx:90px; --dy:-60px; --a:150deg;--b:-90deg; --t:16s;--d:-4s;--o:.6}
.object9 {--s:120px;--x:83%;--y:12%;--dx:-70px;--dy:90px;  --a:12deg; --b:-170deg;--t:18s;--d:-9s;--o:.6}
.object10{--s:34px; --x:75%;--y:38%;--dx:80px; --dy:-70px; --a:-50deg;--b:240deg; --t:9s; --d:-2s}
.object11{--s:64px; --x:88%;--y:58%;--dx:-60px;--dy:-80px; --a:95deg; --b:-150deg;--t:14s;--d:-6s;--o:.8}
.object12{--s:24px; --x:74%;--y:85%;--dx:90px; --dy:-50px; --a:30deg; --b:300deg; --t:10s;--d:-4s}
@keyframes shard-float{
  from{transform:translate(0,0) rotate(var(--a))}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--b))}
}
@keyframes shard-pulse{from{opacity:calc(var(--o,.8)*.55)}to{opacity:var(--o,.8)}}

/* The glass window with a slowly turning neon edge. */
.container{
  position:relative;z-index:1;width:calc(100% - 32px);max-width:620px;margin:clamp(20px,6vh,60px) auto;
  border-radius:16px;background:var(--panel);
  -webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%);
  box-shadow:0 40px 110px rgba(0,0,0,.65),-14px 0 60px -26px rgba(255,47,208,.6),14px 0 60px -26px rgba(30,155,255,.6);
  overflow:hidden;
}
.container::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ring-turn 9s linear infinite;
}
.container .container{width:auto;margin:0;border-top:1px solid var(--line);background:none;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.container .container::after{display:none}
@keyframes ring-turn{to{--spin:360deg}}

/* Title bar. */
.column::before{
  content:"murad@murada: ~";
  display:block;height:44px;margin-bottom:40px;padding:0 16px;
  font-size:12px;line-height:44px;text-align:center;color:var(--comment);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 24px 22px,var(--magenta) 5px,transparent 5.5px),
    radial-gradient(circle at 44px 22px,var(--violet) 5px,transparent 5.5px),
    radial-gradient(circle at 64px 22px,var(--blue) 5px,transparent 5.5px),
    var(--bar);
}
.row{display:block}
.column{width:100%;margin-top:0!important;padding:0 0 28px;text-align:center}

/* Name, with moving light across the gradient. */
h1{
  width:fit-content;max-width:calc(100% - 44px);margin:26px auto 0;
  font:700 clamp(38px,8vw,56px)/1.08 var(--display);letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--magenta),var(--violet) 30%,var(--blue) 50%,var(--violet) 70%,var(--magenta)) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:name-light 9s ease-in-out infinite alternate;
}
@keyframes name-light{to{background-position:100% 0}}
h1::after{
  content:"";display:inline-block;width:.42em;height:.86em;margin-left:.1em;vertical-align:-.08em;
  background:var(--blue);animation:caret 1.1s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}

/* Headline under the name. */
.description-parent{margin:14px 24px 0;padding:0!important}
.description-parent p{margin:0!important}
.description-parent p{font-size:13.5px;font-weight:700;line-height:1.6;letter-spacing:.015em;color:var(--text)}
center:has(p:empty),.description-parent:has(p:empty){display:none}

/* About block. */
.column>.fadein>span{display:block;margin:0 0 28px;padding:0 30px}
.column>.fadein>span>p{max-width:37em;margin:0 auto;font-size:13px;line-height:1.85;color:var(--soft)}
.column>.fadein>span>p:first-child::before{content:"// ";color:#b58cff;font-weight:700}
.column>.fadein>span>p[lang="ar"]{
  margin-top:14px;font-family:var(--arabic);font-size:15px;line-height:1.95;direction:rtl;
}
.footer{margin:0!important;min-height:0}
.column::after{content:"<murada.sa />";display:block;margin-top:26px;font-size:12px;font-weight:700;color:var(--comment)}
.toastbox{font-family:var(--mono)}

@media (max-width:640px){
  .column>.fadein>span{padding:0 20px}
  .object3,.object8,.object9{--s:64px}
}

@media (prefers-reduced-motion:reduce){
  .parallax-background>div,.container::after,h1,h1::after,.rounded-avatar{animation:none}
  .parallax-background>div{transform:rotate(var(--a))}
}

/* Entrance. */
@keyframes sig-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fadein{animation:sig-rise .5s cubic-bezier(.2,.7,.2,1) both}
.button-entrance{animation:sig-rise .45s cubic-bezier(.2,.7,.2,1) .1s both}
.rounded-avatar.fadein{animation:sig-rise .5s cubic-bezier(.2,.7,.2,1) both,ring-turn 7s linear infinite}
@media (prefers-reduced-motion:reduce){.fadein,.button-entrance,.rounded-avatar.fadein{animation:none}}