/* ====================================================
   components.css
   UI components — nav, hero, cards, pillars, lang-switcher…
   ==================================================== */

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(10,13,18,0.85), transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
nav.scrolled{border-color:var(--line);background:rgba(10,13,18,0.92);}
.nav-mark{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.18em;
  display:flex;align-items:center;gap:10px;color:var(--parchment);
}
.nav-mark .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 2px rgba(62,123,250,.6);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
.nav-links{display:flex;gap:30px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;}
.nav-links a{color:var(--parchment-dim);position:relative;padding-bottom:4px;transition:color .25s;}
.nav-links a:hover{color:var(--accent-bright);}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .3s;}
.nav-links a:hover::after{width:100%;}
@media (max-width:860px){.nav-links{display:none;}}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:120px;border-bottom:1px solid var(--line-soft);
}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;}
.badge{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  border:1px solid var(--line);padding:7px 13px;border-radius:30px;
  color:var(--parchment-dim);display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.015);white-space:nowrap;
}
.badge svg{width:13px;height:13px;stroke:var(--accent);}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;}
h1.name{
  font-size:clamp(48px,9vw,118px);
  line-height:0.96;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:6px 0 18px -3px;
  background:linear-gradient(100deg, var(--parchment) 30%, var(--accent-bright) 45%, var(--accent) 50%, var(--parchment) 65%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.role-line{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(13px,1.6vw,17px);
  letter-spacing:.06em;
  color:var(--teal-bright);
  margin-bottom:30px;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
.role-line .sep{color:var(--accent-dim);}
.hero-tagline{
  font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:400;
  font-size:clamp(19px,2.4vw,27px);
  color:var(--parchment-dim);max-width:640px;margin-bottom:46px;
  line-height:1.5;
}
.hero-tagline .ar-inline{font-family:'Cairo','Tajawal',sans-serif;font-style:normal;color:var(--accent-bright);}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.btn{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;
  padding:16px 30px;border-radius:1px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .25s, box-shadow .25s, background .25s;
  cursor:pointer;border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(120deg,var(--accent-dim),var(--accent) 50%,var(--accent-bright));
  background-size:200% 100%;
  color:#0A1530;font-weight:600;
  box-shadow:0 12px 30px -10px rgba(62,123,250,0.5);
}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(62,123,250,0.65);}
.btn-ghost{
  border-color:var(--line);color:var(--parchment);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-bright);transform:translateY(-2px);}
.btn svg{width:15px;height:15px;}
.hero-meta-row{
  margin-top:80px;display:flex;gap:54px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;
}
.hero-stat .num{font-family:'Space Grotesk',sans-serif;font-size:34px;color:var(--accent-bright);font-weight:700;}
.hero-stat .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--parchment-faint);margin-top:4px;}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:80px;align-items:start;}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px;}}
.about-grid h2{font-size:clamp(32px,4vw,46px);margin-bottom:18px;}
.about-lead{font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:500;font-size:20px;color:var(--accent-bright);margin-bottom:8px;}
.about-body p{color:var(--parchment-dim);font-size:16.5px;margin-bottom:22px;max-width:60ch;}
.about-body strong{color:var(--parchment);font-weight:600;}
.about-side{
  border:1px solid var(--line);padding:32px;background:linear-gradient(160deg,var(--ink-2),var(--ink-3));
  position:relative;
}
.about-side::before{
  content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;
  border-top:2px solid var(--accent);border-left:2px solid var(--accent);
}
.about-side::after{
  content:"";position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;
  border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);
}
.about-side h3{font-size:14px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);margin-bottom:20px;font-weight:600;}
.fact-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px;}
.fact-row:last-child{border-bottom:none;}
.fact-row .k{color:var(--parchment-faint);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;}
.fact-row .v{color:var(--parchment);text-align:right;}

/* ---------- languages ---------- */
.lang-intro{max-width:680px;margin-bottom:64px;}
.lang-intro p{color:var(--parchment-dim);font-size:16.5px;margin-top:16px;max-width:62ch;}
.lang-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
@media (max-width:980px){.lang-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.lang-grid{grid-template-columns:1fr;}}
.lang-card{
  border:1px solid var(--line);padding:26px 20px;position:relative;overflow:hidden;
  transition:transform .35s, border-color .35s;
  background:rgba(255,255,255,0.012);
}
.lang-card:hover{transform:translateY(-6px);border-color:var(--accent);}
.lang-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(160px 120px at 50% 0%, rgba(62,123,250,0.18), transparent 70%);
}
.lang-card:hover::before{opacity:1;}
.lang-code{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--accent);margin-bottom:14px;}
.lang-name{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:560;margin-bottom:4px;}
.lang-native{font-family:'Cairo','Tajawal',sans-serif;color:var(--parchment-dim);font-size:14px;margin-bottom:18px;direction:rtl;text-align:left;}
.lang-native.ltr{direction:ltr;font-family:'IBM Plex Mono',monospace;}
.lang-bar-track{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:8px;}
.lang-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal-dim),var(--teal-bright));width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1);}
.lang-level{font-size:11px;letter-spacing:.06em;color:var(--parchment-faint);font-family:'IBM Plex Mono',monospace;}
.translation-panel{
  margin-top:54px;border:1px solid var(--line);padding:40px;
  background:linear-gradient(135deg, rgba(47,144,136,0.06), rgba(62,123,250,0.04));
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:flex-start;
}
@media (max-width:700px){.translation-panel{grid-template-columns:1fr;}}
.translation-panel svg{width:44px;height:44px;stroke:var(--accent-bright);flex-shrink:0;}
.translation-panel h3{font-size:21px;margin-bottom:10px;}
.translation-panel p{color:var(--parchment-dim);font-size:15.5px;max-width:64ch;}
.translation-panel .langs-out{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
.mini-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;border:1px solid var(--line);padding:5px 11px;color:var(--teal-bright);border-radius:20px;}

/* ---------- focus / pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pillars{grid-template-columns:1fr;}}
.pillar{background:var(--ink);padding:40px 30px;transition:background .3s;position:relative;}
.pillar:hover{background:var(--ink-2);}
.pillar .pnum{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent-dim);margin-bottom:24px;letter-spacing:.1em;}
.pillar svg{width:30px;height:30px;stroke:var(--accent);margin-bottom:22px;transition:transform .35s;}
.pillar:hover svg{transform:translateY(-4px) rotate(-4deg);stroke:var(--accent-bright);}
.pillar h3{font-size:19px;margin-bottom:12px;}
.pillar p{font-size:14.5px;color:var(--parchment-dim);}

/* ---------- projects ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:980px){.project-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.project-grid{grid-template-columns:1fr;}}
.pcard{
  border:1px solid var(--line);padding:28px;position:relative;overflow:hidden;
  background:linear-gradient(170deg, rgba(255,255,255,0.018), transparent);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
  transform-style:preserve-3d;
}
.pcard:hover{border-color:var(--accent);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.pcard svg.picon{width:26px;height:26px;stroke:var(--teal-bright);}
.pcard .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;border:1px solid var(--line);padding:4px 9px;color:var(--accent);text-transform:uppercase;}
.pcard h3{font-size:20px;margin-bottom:6px;}
.pcard .sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--parchment-faint);margin-bottom:14px;letter-spacing:.04em;}
.pcard p{font-size:14px;color:var(--parchment-dim);margin-bottom:16px;}
.pcard .stack-row{display:flex;gap:7px;flex-wrap:wrap;}
.pcard .stack-row span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--teal-bright);background:rgba(47,144,136,0.08);padding:4px 8px;border-radius:20px;}
.pcard.featured{grid-column:span 1;background:linear-gradient(170deg, rgba(62,123,250,0.06), transparent);}

.more-repos{margin-top:36px;border:1px solid var(--line);}
.repo-row{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line-soft);font-size:14px;transition:background .25s;}
.repo-row:last-child{border-bottom:none;}
.repo-row:hover{background:rgba(255,255,255,0.02);}
.repo-row .rname{font-family:'IBM Plex Mono',monospace;color:var(--parchment);font-size:13.5px;}
.repo-row .rdesc{color:var(--parchment-faint);font-size:12.5px;flex:1;margin:0 18px;}
.repo-row .rlang{font-size:11px;color:var(--accent);font-family:'IBM Plex Mono',monospace;display:flex;align-items:center;gap:6px;}
.repo-row .rlang .ldot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
@media (max-width:700px){.repo-row .rdesc{display:none;}}

/* ---------- stack ---------- */
.stack-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
@media (max-width:900px){.stack-cols{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.stack-cols{grid-template-columns:1fr;}}
.stack-col h3{display:flex;align-items:center;gap:10px;font-size:15px;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-bright);margin-bottom:22px;}
.stack-col svg{width:18px;height:18px;stroke:var(--teal-bright);}
.tag-list{display:flex;flex-wrap:wrap;gap:9px;}
.pill{
  font-family:'IBM Plex Mono',monospace;font-size:12px;padding:8px 14px;
  border:1px solid var(--line);color:var(--parchment-dim);
  transition:all .25s;cursor:default;
}
.pill:hover{border-color:var(--accent);color:var(--accent-bright);background:rgba(62,123,250,0.07);transform:translateY(-2px);}

/* ---------- horizon ---------- */
.horizon-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px;}
@media (max-width:640px){.horizon-list{grid-template-columns:1fr;}}
.h-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft);}
.h-item svg{width:16px;height:16px;stroke:var(--accent);flex-shrink:0;}
.h-item span{font-size:14.5px;color:var(--parchment-dim);}

/* ---------- contact ---------- */
.contact-wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:40px;}
.contact-wrap h2{font-size:clamp(34px,5vw,64px);max-width:560px;}
.contact-links{display:flex;flex-direction:column;gap:4px;}
.clink{
  display:flex;align-items:center;gap:14px;font-family:'IBM Plex Mono',monospace;
  font-size:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--parchment-dim);
  transition:color .25s,padding-left .25s;width:100%;
}
.clink:hover{color:var(--accent-bright);padding-left:8px;}
.clink svg{width:16px;height:16px;stroke:var(--teal-bright);}
footer{
  position:relative;z-index:2;padding:36px 0;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--parchment-faint);letter-spacing:.05em;
}
footer .quote{font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:500;font-size:16px;color:var(--parchment-dim);margin-bottom:18px;}

/* ---------- title block stamp (signature element) ---------- */
.stamp{
  position:fixed;bottom:22px;right:22px;z-index:60;
  border:1px solid var(--accent-dim);background:rgba(10,13,18,0.88);backdrop-filter:blur(8px);
  padding:14px 18px;width:222px;font-family:'IBM Plex Mono',monospace;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
}
.stamp-row{display:flex;justify-content:space-between;font-size:9.5px;color:var(--parchment-faint);letter-spacing:.08em;margin-bottom:9px;text-transform:uppercase;}
.stamp-lang{font-size:18px;color:var(--accent-bright);min-height:24px;font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:600;}
.stamp-lang.is-ar{font-family:'Cairo','Tajawal',sans-serif;direction:rtl;font-style:normal;}
.stamp-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.stamp-code{font-size:9.5px;color:var(--teal-bright);letter-spacing:.1em;}
.stamp-dots{display:flex;gap:4px;}
.stamp-dots span{width:5px;height:5px;border-radius:50%;background:var(--line);}
.stamp-dots span.active{background:var(--accent);}
@media (max-width:700px){.stamp{display:none;}}
/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-bright));
  z-index: 999;
  transition: width .08s linear;
  box-shadow: 0 0 8px 1px var(--accent);
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
body:has(#cursor-ring) { cursor: none; }
body:has(#cursor-ring) a,
body:has(#cursor-ring) button { cursor: none; }

#cursor-ring {
  position: fixed;
  top: -18px; left: -18px;
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .3s, width .25s cubic-bezier(.2,.7,.2,1),
              height .25s cubic-bezier(.2,.7,.2,1),
              top .25s cubic-bezier(.2,.7,.2,1),
              left .25s cubic-bezier(.2,.7,.2,1),
              border-color .25s;
  box-shadow: 0 0 10px 1px rgba(62,123,250,0.25);
  will-change: transform;
  transform: translate(-100px,-100px);
}
#cursor-dot {
  position: fixed;
  top: -3px; left: -3px;
  width: 6px; height: 6px;
  background: var(--accent-bright);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 0 6px 2px var(--accent);
  will-change: transform;
  transform: translate(-100px,-100px);
}
#cursor-ring.cursor-hover {
  width: 56px; height: 56px;
  top: -28px; left: -28px;
  border-color: var(--accent-bright);
  background: rgba(62,123,250,0.06);
  box-shadow: 0 0 20px 4px rgba(62,123,250,0.2);
}

/* ============================================================
   COUNTER — pulse when done
   ============================================================ */
.hero-stat .num.counted {
  animation: countPop .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); color: var(--accent-bright); }
  100% { transform: scale(1); }
}

/* ============================================================
   TYPEWRITER — blinking caret on active item
   ============================================================ */
.role-line [data-i18n]:not(:empty)::after {
  content: '|';
  opacity: 1;
  animation: caretBlink .7s step-end infinite;
  color: var(--accent-bright);
  font-weight: 300;
}
.role-line [data-i18n]:last-child::after { display: none; }
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}