/* Hasan A. Al-Thamiri • althamiri.dev • Dark Portfolio Styles */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#000000;            /* pure black */
  --bg-2:#0a0a0a;          /* very dark gray */
  --surface:#1a1a1a;       /* dark panel */
  --text:#ffffff;          /* white text */
  --muted:#888888;         /* subdued gray */
  --accent:#801423;        /* deep red */
  --accent-2:#a01b2e;      /* lighter red variant */
  --danger:#ef4444;        /* red */
  --ring: 0 0 0 3px rgba(128,20,35,0.30);
  --radius:14px;
  --shadow-lg: 0 10px 30px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(128,20,35,.08), transparent 60%),
              radial-gradient(900px 700px at -10% 20%, rgba(160,27,46,.06), transparent 60%),
              linear-gradient(180deg, var(--bg), #050505 60%);
  color:var(--text); line-height:1.6;
}

.container{max-width:1100px; margin-inline:auto; padding-inline:22px}
section{padding:90px 0}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(20px);
  background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(10,10,10,.65));
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 20px rgba(0,0,0,.3);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand .logo{display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#000; font-weight:800}
.brand .name{font-weight:800; letter-spacing:.4px}

.nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.nav a{color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:600}
.nav a:hover,.nav a.active{color:var(--text); background:rgba(255,255,255,.06)}
.menu-btn{display:none}

@media (max-width:900px){
  .menu-btn{display:inline-flex; align-items:center; gap:8px; color:var(--muted); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px}
  .nav ul{display:none}
  .nav.open ul{display:flex; flex-direction:column; position:absolute; left:16px; right:16px; top:64px; padding:14px; border:1px solid rgba(255,255,255,.08); background:rgba(17,24,39,.95); border-radius:14px; box-shadow:var(--shadow-lg)}
}

/* Hero */
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
@media (max-width:900px){.hero{grid-template-columns:1fr; text-align:center}}

.kicker{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.kicker .dot{width:8px; height:8px; border-radius:999px; background:radial-gradient(circle at 35% 35%, #fff, var(--accent))}

h1{font-size:clamp(34px,6vw,56px); line-height:1.1; margin:10px 0 12px; font-weight:900}
.gradient{background:linear-gradient(90deg, #fff, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.subtitle{color:var(--muted); font-size:clamp(16px,2.5vw,19px)}

.cta{display:flex; gap:14px; margin-top:26px}
@media (max-width:900px){.cta{justify-content:center; flex-wrap:wrap}}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12); text-decoration:none; font-weight:700; letter-spacing:.2px; transition:transform .15s ease, box-shadow .15s ease}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0f17; border-color:transparent}
.btn.ghost{background:rgba(255,255,255,.04); color:var(--text)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(128,20,35,.25)}

.hero-visual{position:relative}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-lg)
}
.avatar{
  width:min(100%,420px); aspect-ratio:1/1; border-radius:24px; margin-inline:auto; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(220px 220px at 70% 20%, rgba(128,20,35,.25), transparent 60%),
    radial-gradient(250px 250px at 10% 80%, rgba(160,27,46,.20), transparent 60%),
    linear-gradient(135deg, #111111, #000000);
  border:1px solid rgba(255,255,255,.12)
}
.avatar svg{width:72%; height:auto; filter:drop-shadow(0 20px 40px rgba(34,211,238,.2))}

/* Sections */
.section-title{font-size:28px; font-weight:800; margin:0 0 16px}
.section-desc{color:var(--muted); margin-bottom:22px}

.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}

.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.08); font-weight:600}
.tag{display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(128,20,35,.15); border:1px solid rgba(128,20,35,.35); color:#ff9999; font-weight:700; letter-spacing:.2px; text-transform:uppercase; font-size:12px}

.skill-card .title{font-weight:800}
.skill-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.skill-list .skill{padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--text); font-weight:600}

.project{display:flex; flex-direction:column; gap:12px}
.project .thumb{height:160px; border-radius:12px; background:
  linear-gradient(135deg, rgba(128,20,35,.20), rgba(160,27,46,.15)),
  url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22 viewBox=%220 0 400 300%22><defs><linearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22><stop offset=%220%25%22 stop-color=%22%23222222%22/><stop offset=%22100%25%22 stop-color=%22%23000000%22/></linearGradient></defs><rect width=%22400%22 height=%22300%22 fill=%22url(%23g)%22/><g fill=%22%23ffffff15%22><circle cx=%2280%22 cy=%2230%22 r=%2212%22/><circle cx=%2250%22 cy=%2280%22 r=%228%22/><circle cx=%2220%22 cy=%2240%22 r=%225%22/></g></svg>') center/cover;
  border:1px solid rgba(255,255,255,.15)
}
.project .meta{display:flex; align-items:center; gap:10px; justify-content:space-between}
.project a{color:var(--text); text-decoration:none}
.project a:hover{color:#ff9999}

/* Contact */
.contact-info-card{
  width:100%; 
  margin:0; 
  padding:30px; 
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
@media (max-width:600px){
  .contact-info-card{padding:20px}
}
.input{background:#111111; border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:12px 14px; color:var(--text)}
.input:focus{outline:none; box-shadow:var(--ring); border-color:rgba(128,20,35,.6)}
.textarea{min-height:120px; resize:vertical}
.contact-links{display:flex; flex-direction:column; gap:18px; padding:10px 0}
.contact-item{display:flex; align-items:flex-start; gap:16px; padding:18px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); transition:all .3s ease}
.contact-item:hover{background:rgba(128,20,35,.08); border-color:rgba(128,20,35,.25); transform:translateY(-2px); box-shadow:0 8px 25px rgba(128,20,35,.15)}
.contact-icon{font-size:22px; min-width:26px; text-align:center; color:var(--accent); margin-top:2px}
.contact-info{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0}
.contact-label{font-weight:700; color:var(--text); font-size:15px; text-transform:uppercase; letter-spacing:.5px}
.contact-item a{color:var(--muted); text-decoration:none; font-weight:500; word-break:break-all; transition:color .2s ease; font-size:15px}
.contact-item:hover a{color:#ff9999}
@media (max-width:600px){
  .contact-links{gap:16px}
  .contact-item{padding:16px; gap:14px}
  .contact-icon{font-size:20px; min-width:24px}
  .contact-info{gap:4px}
  .contact-label{font-size:14px}
  .contact-item a{font-size:14px}
}

/* Footer */
footer{padding:26px 0 40px; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)}
footer .foot{display:flex; align-items:center; justify-content:space-between}
@media (max-width:900px){footer .foot{flex-direction:column; gap:12px; text-align:center}}
footer a{color:#ff9999; text-decoration:none}

/* Custom Scrollbar */
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:#000000; border-radius:0}
::-webkit-scrollbar-thumb{background:#801423; border-radius:0; border:2px solid #000000}
::-webkit-scrollbar-thumb:hover{background:#a01b2e}
::-webkit-scrollbar-thumb:active{background:#601018}
::-webkit-scrollbar-corner{background:#000000}
/* Firefox scrollbar */
html{scrollbar-width:thin; scrollbar-color:#801423 #000000}

/* Utilities */
.muted{color:var(--muted)}
.divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); margin:40px 0}
.hidden{display:none}

/* Back to top button */
.back-to-top{
  position:fixed; 
  bottom:30px; 
  right:30px; 
  width:50px; 
  height:50px; 
  border-radius:50%; 
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); 
  border:none; 
  color:#ffffff; 
  font-size:18px; 
  cursor:pointer; 
  opacity:0; 
  visibility:hidden; 
  transform:translateY(20px); 
  transition:all .3s ease; 
  z-index:100; 
  box-shadow:0 8px 25px rgba(128,20,35,.25);
  display:flex; 
  align-items:center; 
  justify-content:center;
}
.back-to-top.show{
  opacity:1; 
  visibility:visible; 
  transform:translateY(0);
}
.back-to-top:hover{
  transform:translateY(-3px); 
  box-shadow:0 12px 30px rgba(128,20,35,.4);
}
@media (max-width:600px){
  .back-to-top{
    bottom:20px; 
    right:20px; 
    width:45px; 
    height:45px; 
    font-size:16px;
  }
}

/* Mobile Sidebar */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:80}
.sidebar{position:fixed; top:0; right:0; bottom:0; width:min(86vw, 360px); background:linear-gradient(180deg, #111111, #000000); border-left:1px solid rgba(255,255,255,.12); transform:translateX(100%); transition:transform .25s ease; z-index:90; display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
.sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.06)}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); font-weight:800}
.sidebar-nav{list-style:none; margin:0; padding:12px}
.sidebar-nav a{display:block; padding:12px 14px; border-radius:10px; color:var(--text); text-decoration:none}
.sidebar-nav a:hover{background:rgba(255,255,255,.06)}
.sidebar-nav a.active{background:rgba(255,255,255,.12); color:#ff9999}
body.menu-open{overflow:hidden}
body.menu-open .overlay{opacity:1; pointer-events:auto}
body.menu-open .sidebar{transform:none}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px) scale(.98); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}

/* Stagger for projects */
.projects-grid > .reveal{will-change:transform,opacity}
.projects-grid > .reveal:nth-child(1){transition-delay:.0s}
.projects-grid > .reveal:nth-child(2){transition-delay:.06s}
.projects-grid > .reveal:nth-child(3){transition-delay:.12s}
.projects-grid > .reveal:nth-child(4){transition-delay:.18s}
.projects-grid > .reveal:nth-child(5){transition-delay:.24s}
.projects-grid > .reveal:nth-child(6){transition-delay:.30s}

/* Preloader */
.preloader{position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(800px 600px at 80% -10%, rgba(128,20,35,.08), transparent 60%), radial-gradient(700px 600px at -10% 20%, rgba(160,27,46,.06), transparent 60%), linear-gradient(180deg, var(--bg), #050505 60%); z-index:200; transition:opacity .35s ease, visibility .35s ease}
.preloader.hidden{opacity:0; visibility:hidden}
.preloader-inner{display:flex; flex-direction:column; align-items:center; gap:16px}
.preloader-logo{display:grid; place-items:center; width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0f17; font-weight:900; letter-spacing:.5px}
.preloader-spinner{width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#ff9999; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Form status + loading button */
.form-status{min-height:22px; margin-top:10px; font-weight:600}
.form-status.success{color:#86efac}
.form-status.error{color:#fca5a5}
.btn.loading{position:relative; pointer-events:none; opacity:.85}
.btn.loading::after{content:""; width:16px; height:16px; border-radius:50%; border:3px solid rgba(0,0,0,.25); border-top-color:#0b0f17; animation:spin .8s linear infinite; display:inline-block}
.btn.primary.loading::after{border-color:rgba(0,0,0,.25); border-top-color:#0b0f17}