/* ==========================================================
   toufik.az
   Base: near-black. Accent: crimson. Cyan only appears inside
   glitch bursts. Project categories use their own accent colors.
   ========================================================== */
:root{
  --bg:#0a0a0d;
  --panel:#121216;
  --panel-2:#19191f;
  --line:#2a2a33;
  --line-hi:#454552;
  --text:#ededf2;
  --body:#bebec9;
  --muted:#8e8e9c;
  --red:#ff3b4e;
  --red-fill:#e0293e;
  --red-hi:#ff5566;
  --red-dim:#a82234;
  --cyan:#19d8ff;
  --kali:#4a90ff;
  --ok:#4ade80;
  --pixel:'Jersey 10',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1080px;
  --nav:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font:400 1rem/1.7 var(--sans);font-synthesis:none;font-variant-ligatures:none;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,40px);width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:8px 14px;font:600 .95rem var(--sans);z-index:300}
.skip:focus{left:8px}
.ico{display:inline-block;flex:none;vertical-align:middle}

/* pixel box: stepped corners, 2px border */
.px{
  --n:6px;--bc:var(--line);--fill:var(--panel);
  position:relative;background:var(--bc);isolation:isolate;
  clip-path:polygon(0 var(--n),var(--n) var(--n),var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)));
  transition:background-color .15s;
}
.px::before{
  content:"";position:absolute;inset:2px;z-index:-1;background:var(--fill);
  clip-path:polygon(0 var(--n),var(--n) var(--n),var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)));
  transition:background-color .15s;
}

/* sprites */
.spr{display:inline-block;flex:none;line-height:0}
.spr svg{display:block;width:100%;height:100%}

/* glitch: off by default, short bursts only */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;white-space:inherit}
.glitch.on{animation:gj var(--gd,.5s) steps(1,end) 1}
.glitch.on::before{opacity:1;color:var(--red);animation:g1 var(--gd,.5s) steps(1,end) 1 forwards}
.glitch.on::after{opacity:1;color:var(--cyan);animation:g2 var(--gd,.5s) steps(1,end) 1 forwards}
/* Repeat only within the timed burst set by the script. */
.glitch.on.live,.glitch.on.live::before,.glitch.on.live::after{animation-iteration-count:infinite}
.emblem.on.live .ghost.r,.emblem.on.live .ghost.c,.emblem.on.live .base{animation-iteration-count:infinite}
@keyframes gj{0%{transform:translate(0,0)}20%{transform:translate(-2px,0)}40%{transform:translate(2px,0)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,0)}100%{transform:none}}
@keyframes g1{
  0%{clip-path:inset(0 0 78% 0);transform:translate(-4px,0)}
  16%{clip-path:inset(34% 0 46% 0);transform:translate(4px,0)}
  32%{clip-path:inset(62% 0 14% 0);transform:translate(-3px,0)}
  48%{clip-path:inset(12% 0 70% 0);transform:translate(5px,0)}
  64%{clip-path:inset(48% 0 32% 0);transform:translate(-4px,0)}
  80%{clip-path:inset(76% 0 4% 0);transform:translate(3px,0)}
  100%{clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes g2{
  0%{clip-path:inset(58% 0 20% 0);transform:translate(4px,0)}
  16%{clip-path:inset(10% 0 74% 0);transform:translate(-4px,0)}
  32%{clip-path:inset(40% 0 40% 0);transform:translate(3px,0)}
  48%{clip-path:inset(72% 0 8% 0);transform:translate(-5px,0)}
  64%{clip-path:inset(22% 0 58% 0);transform:translate(4px,0)}
  80%{clip-path:inset(4% 0 82% 0);transform:translate(-3px,0)}
  100%{clip-path:inset(0 0 100% 0);transform:none}
}

/* buttons and tags */
.btn{
  --n:5px;--bc:var(--line-hi);--fill:var(--panel);
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;
  font:600 .98rem/1 var(--sans);letter-spacing:0;color:var(--text);
  transition:transform .1s steps(2),background-color .15s;
}
.btn:hover,.btn:focus-visible{--bc:var(--red);outline:none}
.btn:active{transform:translateY(2px)}
.btn-primary{--bc:var(--red-fill);--fill:var(--red-fill);color:#fff}
.btn-primary:hover{--bc:var(--red-hi);--fill:var(--red-hi)}
.btn-primary:focus-visible{--bc:#fff}
.btn-sm{padding:9px 15px;font-size:.92rem}
.btn .ico{width:18px;height:18px}
.tag{display:inline-block;font:500 .8rem/1 var(--sans);letter-spacing:.02em;white-space:nowrap;padding:5px 9px;border:2px solid var(--line-hi);color:var(--muted)}
.tag.red{color:var(--red);border-color:var(--red-dim)}
.tag.dash{border-style:dashed;color:var(--text)}
.tag.typ{color:var(--tc);border-color:var(--tc);background:color-mix(in srgb,var(--tc) 16%,transparent);font-weight:600}

/* project accents, shared by cards, labels and detail pages */
[data-project="scanner"]{--project-color:#ff3b4e}
[data-project="rsa"]{--project-color:#e6b450}
[data-project="gesstock"]{--project-color:#4a90ff}
[data-project="insta"]{--project-color:#4ade80}
[data-project="mobguide"]{--project-color:#a96bff}
[data-project="newsbot"]{--project-color:#ff9a3d}
[data-project="voyage"]{--project-color:#ff5a8a}
[data-project="zayro"]{--project-color:#2dd4bf}
[data-project="manga"]{--project-color:#c084fc}
[data-project] .icon-box{color:var(--project-color)}
.tile[data-project] small{color:var(--project-color)}
[data-project] .tag{color:var(--project-color);border-color:var(--project-color);background:color-mix(in srgb,var(--project-color) 12%,transparent)}

/* Icons share the brief hover burst used by their text. */
.hover-glitch{animation:icon-glitch .5s steps(1,end) 1}
@keyframes icon-glitch{
  0%,100%{transform:none;filter:none}
  15%,55%{transform:translateX(-2px);filter:drop-shadow(3px 0 var(--cyan))}
  35%,75%{transform:translateX(2px);filter:drop-shadow(-3px 0 var(--red))}
  90%{transform:translateX(-1px);filter:none}
}

/* nav */
.nav{position:sticky;top:0;z-index:100;height:var(--nav);display:flex;align-items:center;background:rgba(10,10,13,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.nav .bar{display:flex;align-items:center;justify-content:space-between}
.logo-mark{width:34px;height:auto;color:var(--red);flex:none}
.logo{display:flex;align-items:center;gap:10px;font:400 1.75rem/1 var(--pixel);color:var(--text)}
.links{display:flex;align-items:center;gap:2px}
.links a{position:relative;font:500 .98rem var(--sans);color:var(--muted);padding:8px 13px;transition:color .15s}
.links a:hover,.links a:focus-visible{color:var(--text)}
.links a[aria-current="page"]{color:var(--red)}
.links a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--red)}
.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger i{display:block;width:22px;height:3px;background:var(--text)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px)}

/* page header for inner pages */
.page-head{padding:56px 0 34px;border-bottom:2px dashed var(--line)}
.crumb{font:400 .9rem var(--mono);color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--red)}
.page-head h1{font:400 clamp(3.2rem,7vw,4.8rem)/.95 var(--pixel);color:var(--text)}
.lede{max-width:58ch;margin-top:16px;font-size:1.08rem}
.page-body{padding:44px 0 80px}
h2.h{font:400 2.3rem/1.1 var(--pixel);color:var(--text);margin:48px 0 18px}
h2.h:first-child{margin-top:0}

/* home hero */
.hero{padding:48px 0 56px}
.hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.emblem{position:relative;width:min(210px,56vw);margin-bottom:26px;color:var(--red)}
.emblem svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.emblem .ghost{opacity:0;pointer-events:none;mix-blend-mode:screen}
.emblem .ghost.r{color:#ff9aa5}
.emblem .ghost.c{color:var(--cyan)}
.emblem.on .ghost.r{opacity:.9;animation:s1 .5s steps(1,end) 1 forwards}
.emblem.on .ghost.c{opacity:.9;animation:s2 .5s steps(1,end) 1 forwards}
.emblem.on .base{animation:sb .5s steps(1,end) 1}
@keyframes s1{0%{clip-path:inset(8% 0 80% 0);transform:translate(-6px,0)}18%{clip-path:inset(38% 0 48% 0);transform:translate(5px,0)}36%{clip-path:inset(62% 0 22% 0);transform:translate(-5px,0)}54%{clip-path:inset(20% 0 66% 0);transform:translate(7px,0)}72%{clip-path:inset(50% 0 36% 0);transform:translate(-5px,0)}100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes s2{0%{clip-path:inset(56% 0 30% 0);transform:translate(6px,0)}18%{clip-path:inset(14% 0 74% 0);transform:translate(-5px,0)}36%{clip-path:inset(44% 0 42% 0);transform:translate(5px,0)}54%{clip-path:inset(72% 0 12% 0);transform:translate(-7px,0)}72%{clip-path:inset(26% 0 60% 0);transform:translate(5px,0)}100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes sb{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}100%{transform:none}}
.hero h1{font:400 clamp(4rem,8.5vw,6.2rem)/.88 var(--pixel);color:var(--text);margin-bottom:22px}
.roles{font:500 1.12rem/1.4 var(--sans);color:var(--red);margin-bottom:16px}
.tagline{max-width:40ch;color:var(--body);margin-bottom:28px}
.tagline strong{color:var(--text);font-weight:600}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.status{display:flex;align-items:center;gap:12px;font:500 .98rem var(--sans);color:var(--muted)}
.status i{width:10px;height:10px;background:var(--red);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.js .hero-grid>*{animation:pop .6s steps(6,end) both}
.js .hero-grid>*:nth-child(2){animation-delay:.2s}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* kali terminal */
.term{--n:8px;--fill:#08090b;--bc:#2c4f8f;padding:2px}
.term:focus-within{--bc:var(--kali)}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:2px solid rgba(74,144,255,.22);font:400 .8rem var(--mono);color:var(--muted)}
.term-bar i{width:10px;height:10px;background:var(--line-hi)}
.term-bar i:nth-child(1){background:var(--red)}
.term-title{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-hint{margin-left:auto;white-space:nowrap}
.term-hint b{color:var(--kali);font-weight:600}
.term-body{height:clamp(380px,56vh,520px);overflow:auto;padding:16px 20px;font:400 13px/1.6 var(--mono);white-space:pre-wrap;color:#d7dde3}
.term-body::-webkit-scrollbar{width:8px;height:8px}
.term-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}
.term-body::-webkit-scrollbar-track{background:transparent}
#termBody .trow{margin:0}
#termBody .cmd-echo{color:#f0f2f5}
#termBody .ps-min{color:var(--kali)}
#termBody .muted{color:#7d8794}
#termBody .blu{color:var(--kali);font-weight:600}
#termBody .grn{color:var(--ok)}
#termBody .red{color:var(--red)}
#termBody .resp{color:#d7dde3}
#termBody .hd{color:var(--kali);letter-spacing:1px}
#termBody a{color:var(--kali);text-decoration:underline;text-underline-offset:2px}
#termBody a:hover{color:#fff}
#termBody .trow.nf{white-space:pre;font-size:10.5px;line-height:1.5}
#termBody .drg{color:var(--kali)}
#termBody .nf-h{color:var(--kali);font-weight:700}
.term-inputline{border-top:2px solid rgba(74,144,255,.22);padding:11px 20px 15px;font:400 13px var(--mono)}
.term-inputline .ps1{display:block;white-space:nowrap;overflow:hidden;color:var(--kali)}
.term-inputline .user,.term-inputline .host{font-weight:700}
.term-inputline .at{color:var(--red)}
.term-inputline .ps2{display:flex;align-items:center;gap:8px;margin-top:2px;color:var(--kali)}
.term-entry{position:relative;flex:1;min-width:0;white-space:pre;overflow:hidden}
.term-typed{color:#f0f2f5}
.blockcur{display:inline-block;width:9px;height:1.02em;background:#c9d1d9;vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
#termInput{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;outline:0;color:transparent;caret-color:transparent;font:inherit;padding:0}

/* home index list */
.home-index{padding:8px 0 72px}
.idx li a{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:baseline;padding:20px 8px;border-top:2px dashed var(--line);transition:background-color .15s}
.idx li:last-child a{border-bottom:2px dashed var(--line)}
.idx .nm{font:400 2.1rem/1.1 var(--pixel);color:var(--text);transition:color .15s}
.idx a:hover,.idx a:focus-visible{background:var(--panel);outline:none}
.idx a:hover .nm,.idx a:focus-visible .nm{color:var(--red)}
.feature{--n:8px;display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px;margin-top:40px}
.feature h3{font:400 2.2rem/1.05 var(--pixel);color:var(--text);margin-bottom:8px}
.feature p{max-width:62ch;margin-bottom:16px}
.feature .more{font:600 .98rem var(--sans);color:var(--red)}
.feature:hover{--bc:var(--red)}
.icon-box{--n:5px;display:grid;place-items:center;width:52px;height:52px;color:var(--red);--fill:var(--panel-2)}
.icon-box .ico{width:26px;height:26px}

/* home projects */
.home-projects{padding:8px 0 56px}
.hp-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.hp-head h2{margin:0}
.hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.tile{--n:5px;display:flex;align-items:center;gap:14px;padding:16px 18px}
.tile:hover,.tile:focus-visible{--bc:var(--red);outline:none}
.tile .icon-box{width:40px;height:40px}
.tile .icon-box .ico{width:20px;height:20px}
.tile b{display:block;font:400 1.5rem/1.05 var(--pixel);color:var(--text)}
.tile small{display:block;font:500 .85rem var(--sans);color:var(--muted);margin-top:2px}

/* about */
.about-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:56px;align-items:start}
.prose p{max-width:62ch;margin-bottom:20px}
.prose strong{color:var(--text);font-weight:600}
.facts{--fill:var(--panel);padding:8px 22px;position:sticky;top:calc(var(--nav) + 24px)}
.facts div{padding:14px 0;border-bottom:2px dashed var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font:500 .88rem var(--sans);color:var(--muted);margin-bottom:2px}
.facts dd{color:var(--text);font-size:.96rem;line-height:1.5}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-top:2px dashed var(--line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:2px dashed var(--line)}
.tbl thead th{font:500 .88rem var(--sans);color:var(--muted);padding-top:0;border-top:0;padding-bottom:12px}
.tbl tbody th{width:170px;font:600 1rem var(--sans);color:var(--text)}
.tbl td{color:var(--body)}
.stack{display:flex;flex-wrap:wrap;gap:6px}
.stack li{font:400 .82rem/1 var(--mono);color:var(--muted);background:var(--panel-2);padding:6px 9px}

/* projects list */
.plist li a{display:grid;grid-template-columns:52px 1fr 190px;gap:22px;align-items:start;padding:24px 8px;border-top:2px dashed var(--line);transition:background-color .15s}
.plist li:last-child a{border-bottom:2px dashed var(--line)}
.plist a:hover,.plist a:focus-visible{background:var(--panel);outline:none}
.plist h3{font:400 1.95rem/1.05 var(--pixel);color:var(--text);margin-bottom:6px;transition:color .15s}
.plist a:hover h3,.plist a:focus-visible h3{color:var(--red)}
.plist p{font-size:.97rem;margin-bottom:12px;max-width:60ch}
.plist .side{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* project page */
.meta{margin-top:30px}
.d-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.d-note{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border:2px dashed var(--line-hi);font:500 .98rem var(--sans);color:var(--text)}
.d-note i{width:9px;height:9px;background:var(--red);animation:blink 1.6s steps(1) infinite}
.d-sub{margin-top:14px;color:var(--muted);font-size:.95rem}
.d-lead{max-width:66ch;font-size:1.04rem;line-height:1.75}
.feats li{position:relative;padding-left:22px;margin-bottom:12px;max-width:66ch}
.feats li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--red)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px}
.pn a{--n:6px;--fill:var(--panel);display:block;padding:18px 22px}
.pn a:hover,.pn a:focus-visible{--bc:var(--red);outline:none}
.pn small{display:block;font:400 .85rem var(--mono);color:var(--muted);margin-bottom:4px}
.pn b{font:400 1.65rem/1.1 var(--pixel);color:var(--text)}
.pn .next{text-align:right}
.pn .none{visibility:hidden}

/* ctf */
.ctf-tbl td.pl{font:400 2.9rem/1 var(--pixel);color:var(--text);white-space:nowrap}
.ctf-tbl tr.top td.pl{color:var(--red)}
.ctf-tbl td.ev{font:600 1.08rem/1.35 var(--sans);color:var(--text)}
.ctf-tbl td.sp{width:70px;padding-right:12px}
.ctf-tbl td{vertical-align:middle}

/* contact */
.clist li a{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:center;padding:20px 8px;border-top:2px dashed var(--line);transition:background-color .15s}
.clist li:last-child a{border-bottom:2px dashed var(--line)}
.clist a:hover,.clist a:focus-visible{background:var(--panel);outline:none}
.clist b{display:block;font:500 .88rem var(--sans);color:var(--muted)}
.clist .v{color:var(--text);overflow-wrap:anywhere}
.clist li{position:relative}
.copy{margin-top:20px}

/* 404 */
.nf404{padding:96px 0 120px}
.nf404 pre{font:400 1rem/1.7 var(--mono);color:var(--body);white-space:pre-wrap;margin-bottom:28px}
.nf404 .p{color:var(--kali)}
.nf404 .e{color:var(--red)}

/* footer */
.footer{border-top:2px solid var(--line);padding:28px 0 40px}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.footer p{font:500 .95rem var(--sans);color:var(--muted)}
.footer nav{display:flex;gap:18px;flex-wrap:wrap}
.footer nav a{font:500 .95rem var(--sans);color:var(--muted)}
.footer nav a:hover{color:var(--red)}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .tagline{max-width:52ch}
}
@media (max-width:900px){
  .hp-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .facts{position:static}
  .feature{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
  .hp-grid{grid-template-columns:1fr}
  .burger{display:flex}
  .links{position:absolute;top:var(--nav);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:2px solid var(--line);padding:8px clamp(20px,5vw,40px) 16px;transform:translateY(-130%);transition:transform .25s steps(4);z-index:-1}
  .links.open{transform:none}
  .links a{padding:12px 4px;font-size:1.1rem}
  .links a[aria-current="page"]::after{left:4px;right:auto;width:36px}
  .idx li a{grid-template-columns:1fr;gap:4px}
  .plist li a{grid-template-columns:52px 1fr;gap:16px}
  .plist .side{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center}
  .tbl tbody th{width:auto;display:block;padding-bottom:0;border-bottom:0}
  .tbl tbody td{display:block;border-top:0;padding-top:4px}
  .tbl tbody tr{display:block;border-top:2px dashed var(--line)}
  .tbl tbody tr:last-child{border-bottom:2px dashed var(--line)}
  .tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
  .tbl tbody th,.tbl tbody td{border-top:0}
  .tbl thead{display:none}
  .ctf-tbl td.sp{display:none}
  .pn{grid-template-columns:1fr}
  .pn .none{display:none}
  .pn .next{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}