/* =========================
   Darkman Portfolio — CSS
   ========================= */

:root{
  --bg0:#07070c;
  --bg1:#0b0b10;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --text:#f2f3ff;
  --muted:rgba(242,243,255,.70);
  --muted2:rgba(242,243,255,.52);
  --shadow: rgba(0,0,0,.45);
  --a1:#7c4dff;
  --a2:#00e5ff;
  --a3:#00ffa8;
  --radius:18px;
  --container: 1120px;

  --sx: 50vw;
  --sy: 18vh;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden; width:100%}
body{
  margin:0;
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(124,77,255,.18), transparent 60%),
              radial-gradient(900px 700px at 80% 0%, rgba(0,229,255,.16), transparent 55%),
              radial-gradient(1000px 800px at 70% 85%, rgba(0,255,168,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  overflow-x:hidden;
  scroll-behavior:smooth;
}

a{color:inherit}
img{max-width:100%; display:block}
pre{margin:0}
button, input, textarea{font:inherit}
::selection{background: rgba(0,229,255,.25)}

/* Focus styles (accessibility) */
:focus-visible{
  outline: 2px solid rgba(0,229,255,.55);
  outline-offset: 3px;
}

/* Utilities */
.container{
  width:min(var(--container), calc(100% - 44px));
  margin-inline:auto;
}
.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.grad{
  background: linear-gradient(90deg, var(--a2), var(--a1) 45%, var(--a3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.noscript{
  padding: 12px 16px;
  text-align:center;
  background: rgba(255,195,0,.10);
  border-bottom: 1px solid rgba(255,195,0,.22);
  color: rgba(255,255,255,.9);
}

/* Visual layers */
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.12;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.spotlight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background: radial-gradient(760px 620px at var(--sx) var(--sy), rgba(0,229,255,.13), transparent 60%),
              radial-gradient(980px 780px at calc(var(--sx) + 180px) calc(var(--sy) + 120px), rgba(124,77,255,.10), transparent 58%);
  filter: blur(6px);
  transform: translate3d(0,0,0);
}


/* Scroll progress */
.scrollProgress{
  position:fixed;
  top: env(safe-area-inset-top);
  left:0;
  right:0;
  height: 3px;
  z-index: 60;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
#scrollBar{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--a2), var(--a1), var(--a3));
  box-shadow: 0 0 18px rgba(0,229,255,.35);
}

/* Back to top */
.toTop{
  position:fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  inset-inline-start: calc(18px + env(safe-area-inset-left));
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: rgba(242,243,255,.9);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 60;
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease, background .2s ease, border-color .2s ease;
}
.toTop.isShow{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.toTop:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(0,229,255,.28);
  transform: translateY(-2px);
}
.toTop:active{transform: translateY(0)}


/* Topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: calc(14px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 14px calc(20px + env(safe-area-inset-left));
  background: rgba(11,11,16,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand__text strong{font-size:1.02rem; letter-spacing:.2px}
.brand__text em{font-style:normal; font-size:.85rem; color:var(--muted2)}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav__menu a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.nav__menu a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.nav__toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.nav__toggleBars{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(242,243,255,.85);
  margin-inline:auto;
  position:relative;
}
.nav__toggleBars::before,
.nav__toggleBars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: rgba(242,243,255,.85);
}
.nav__toggleBars::before{top:-6px}
.nav__toggleBars::after{top:6px}

@media (max-width: 860px){
  .nav__toggle{display:inline-grid; place-items:center}
  .nav__menu{
    position: absolute;
    top: 68px;
    inset-inline: 14px;
    background: rgba(11,11,16,.78);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
    backdrop-filter: blur(14px);
  }
  .nav__menu a{padding: 12px 14px}
  .nav__menu.isOpen{display:flex}
}

/* Hero */
.hero{
  position:relative;
  min-height: 100svh;
  padding-top: calc(86px + env(safe-area-inset-top));
  display:grid;
  align-items:center;
  overflow:hidden;
}
#particles{
  position:absolute;
  pointer-events:none;
  touch-action: pan-y;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.82;
}
.hero__content{
  position:relative;
  z-index:3;
  padding-block: 64px 34px;
}
.kicker{
  color: var(--muted);
  margin:0 0 12px;
  font-size: 1.05rem;
}
.title{
  margin:0 0 14px;
  font-size: clamp(2.1rem, 3.9vw, 4rem);
  line-height: 1.12;
  letter-spacing: .2px;
  max-width: 15ch;
}
.subtitle{
  margin:0 0 22px;
  color: var(--muted);
  font-size: 1.07rem;
  max-width: 60ch;
}
.cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 22px;
}
.badge{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(242,243,255,.82);
  font-size: .92rem;
}

.hero__art{
  position:absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: min(620px, 54vw);
  z-index:2;
  transform: translateY(8px);
  opacity: .98;
  pointer-events:none;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
.hero__art img{
  width:100%;
  height:auto;
  animation: floaty 8s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform: translateY(0px)}
  50%{transform: translateY(-10px)}
}

/* Glitch headline (subtle) */
.glitch{
  position:relative;
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode: screen;
}
.glitch::before{
  transform: translate(2px, -1px);
  color: rgba(0,229,255,.55);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 52%);
}
.glitch::after{
  transform: translate(-2px, 1px);
  color: rgba(124,77,255,.55);
  clip-path: polygon(0 60%, 100% 46%, 100% 100%, 0 100%);
}

/* Buttons */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
  background: rgba(255,255,255,.05);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}

.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 35%, transparent 70%);
  transform: translateX(-140%);
  opacity: 0;
  transition: transform .75s ease, opacity .75s ease;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.btn:hover::before{
  transform: translateX(140%);
  opacity: 1;
}

.btn--primary{
  background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(124,77,255,.18));
  border-color: rgba(0,229,255,.28);
  box-shadow: 0 18px 60px rgba(0,229,255,.06);
}
.btn--ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
.btn--tiny{
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .92rem;
}

/* Scroll hint */
.scrollHint{
  position:absolute;
  bottom: 18px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 36px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  text-decoration:none;
}
.scrollHint span{
  width: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(242,243,255,.85);
  animation: wheel 1.35s ease-in-out infinite;
}
@keyframes wheel{
  0%{transform: translateY(-10px); opacity:0}
  35%{opacity:1}
  100%{transform: translateY(12px); opacity:0}
}

/* Sections */
.section{
  padding: 90px 0;
  position:relative;
  z-index: 5;
}
.section--alt{
  background: radial-gradient(1200px 900px at 20% 20%, rgba(255,255,255,.04), transparent 55%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.section__title{
  margin:0 0 10px;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing:.2px;
}
.section__text{
  margin:0 0 24px;
  color: var(--muted);
  line-height: 1.9;
}

/* Grid */
.grid{
  display:grid;
  gap: 24px;
  align-items:center;
}
.grid--2{
  grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 980px){
  .grid--2{grid-template-columns: 1fr}
  .hero__art{position:relative; width:min(680px, 92vw); margin-inline:auto; inset:auto; order:2}
}

/* Terminal */
.terminal{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.terminal__bar{
  display:flex;
  gap:8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.terminal__bar span{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(242,243,255,.22);
}
.terminal__bar span:nth-child(1){background: rgba(255,80,80,.55)}
.terminal__bar span:nth-child(2){background: rgba(255,200,80,.55)}
.terminal__bar span:nth-child(3){background: rgba(80,255,160,.55)}
.terminal__body{
  padding: 16px 16px 18px;
  color: rgba(242,243,255,.84);
  line-height: 1.7;
  font-size: .96rem;
  overflow:auto;
}

/* Quick stats */
.quick{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}
.stat{
  flex:1;
  min-width: 160px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px;
}
.stat strong{
  font-size: 1.6rem;
}
.stat span{
  display:block;
  color: var(--muted2);
  margin-top: 4px;
}

/* About art */
.about__art img{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Skills */
.skills{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.skillCard{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.skillCard h3{margin: 0 0 10px; font-size:1.1rem}
.skillCard ul{margin:0; padding:0 18px 0 0; color: var(--muted); line-height: 1.9}
.skillCard li{margin: 6px 0}

@media (max-width: 980px){
  .skills{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .skills{grid-template-columns: 1fr}
}

/* Progress bars */
.progresses{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px){
  .progresses{grid-template-columns: 1fr}
}
.progress{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.progress span{position:relative; z-index:2; color: rgba(242,243,255,.86)}
.progress i{
  position:absolute;
  inset:0;
  width:0%;
  background: linear-gradient(90deg, rgba(0,229,255,.25), rgba(124,77,255,.22));
  opacity:.32;
  transition: width 1.25s cubic-bezier(.2,.8,.2,1);
}
.progress.in i{
  width: calc(var(--v) * 1%);
}

/* Projects */
.projects{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.projectCard{
  background: var(--card2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
.projectCard__img{
  width:100%;
  height: 170px;
  object-fit:cover;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.projectCard__body{
  padding: 16px 16px 18px;
}
.projectCard h3{margin: 0 0 8px}
.projectCard p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.85;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tags span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,255,.75);
  font-size: .9rem;
}
.actions{
  display:flex;
  gap: 12px;
}
.link{
  color: rgba(0,229,255,.92);
  text-decoration:none;
  border-bottom: 1px dashed rgba(0,229,255,.38);
  padding-bottom: 2px;
}
.link:hover{opacity:.9}

@media (max-width: 980px){
  .projects{grid-template-columns: repeat(2, 1fr)}
  .projectCard__img{height: 190px}
}
@media (max-width: 640px){
  .projects{grid-template-columns: 1fr}
}

/* Timeline */
.timeline{
  margin-top: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px 16px 12px;
}
.timeline h3{margin: 0 0 10px}
.timeline ol{
  margin:0;
  padding: 0 18px 0 0;
  color: var(--muted);
  line-height: 1.9;
}
.timeline li{margin: 10px 0}
.timeline span{
  display:inline-block;
  min-width: 64px;
  color: rgba(242,243,255,.88);
}

/* Contact */
.contactCards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.contactCard{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:center;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  transition: transform .18s ease, background .2s ease;
}
.contactCard:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}
.contactCard strong{font-weight:700}
.contactCard span{color: var(--muted2)}

.form{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 18px;
}
.form label{
  display:block;
  margin-bottom: 12px;
}
.form span{
  display:block;
  margin-bottom: 6px;
  color: rgba(242,243,255,.85);
}
.form input,
.form textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, transform .18s ease;
}
.form input:focus,
.form textarea:focus{
  border-color: rgba(0,229,255,.35);
}
.mini{
  color: var(--muted2);
  line-height: 1.85;
  margin: 12px 0 0;
}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  color: rgba(242,243,255,.86);
}

/* Footer */
.footer{
  padding: 40px 0 50px;
  border-top: 1px solid rgba(255,255,255,.06);
  position:relative;
  z-index: 5;
}
.footer .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.footer p{
  margin:0;
  color: var(--muted2);
}
.footer__links{
  display:flex;
  gap: 12px;
}
.footer__links a{
  color: rgba(242,243,255,.82);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.footer__links a:hover{background: rgba(255,255,255,.05)}

/* Reveal animation */
.reveal{opacity:1; transform:none}
.js .reveal{
  --revealY: 14px;
  --revealS: .98;
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  opacity:0;
  transform:
    translateY(var(--revealY))
    scale(var(--revealS))
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateZ(var(--tz));
  transform-style: preserve-3d;
  transition:
    opacity .75s ease,
    transform 1s cubic-bezier(.18,.9,.2,1);
  will-change: transform, opacity;
}
.js .reveal.in{
  opacity:1;
  --revealY: 0px;
  --revealS: 1;
}

/* Reduced motion */

@media (max-width: 480px){
  .btn::before{display:none}

  .container{width: calc(100% - 28px);}
  .topbar{padding-inline: 14px;}
  .brand__text em{display:none;}
  .hero__content{padding-block: 52px 28px;}
  .section{padding: 72px 0;}
  .quick .stat{min-width: 140px;}
}
@media (max-width: 360px){
  .btn{width:100%;}
  .cta{align-items:stretch;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero__art img{animation:none}
  .scrollHint span{animation:none}
  .js .reveal{transition:none; opacity:1; transform:none}
}