/* =========================================================
   YOUSUF ANSARI — PORTFOLIO
   Theme: "The IDE" — dark editor / terminal / git-log motif
   ========================================================= */

:root{
  --bg:            #0a0e14;
  --surface:       #111722;
  --surface-2:     #171f2e;
  --border:        #232c3d;
  --text:          #e6edf3;
  --muted:         #8b96a8;

  --accent-cs:     #8b5cf6;   /* C# / ASP.NET purple  */
  --accent-flutter:#29b6f6;   /* Flutter blue          */
  --accent-green:  #3fb950;   /* git / success green    */
  --accent-yellow: #e3b341;

  --font-display:  'JetBrains Mono', monospace;
  --font-body:     'Inter', sans-serif;

  --radius: 10px;
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  margin:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent-cs); color:#fff; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-flutter); }

a{ color:inherit; text-decoration:none; }

.text-gradient{
  background:linear-gradient(90deg,var(--accent-flutter),var(--accent-cs));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ================= Scroll progress ================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent-flutter),var(--accent-cs));
  z-index:2000;
  transition:width .1s linear;
}

/* ================= IDE Top bar ================= */
.ide-topbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; gap:1.25rem;
  padding:.65rem 1.5rem;
  background:rgba(10,14,20,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.ide-window-dots{ display:flex; gap:7px; flex-shrink:0; }
.dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot-red{ background:#ff5f57; }
.dot-yellow{ background:#febc2e; }
.dot-green{ background:#28c840; }

.tab-nav{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  font-family:var(--font-display);
  font-size:.78rem;
}
.tab-nav::-webkit-scrollbar{ display:none; }

.tab-item{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem;
  color:var(--muted);
  border-radius:6px 6px 0 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.tab-icon{ font-size:.75rem; opacity:.7; }
.tab-item:hover{ color:var(--text); background:var(--surface); }
.tab-item.active{ color:var(--accent-flutter); border-bottom-color:var(--accent-flutter); background:var(--surface); }

.hamburger{
  display:none; margin-left:auto; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:6px;
}
.hamburger span{ width:22px; height:2px; background:var(--text); display:block; transition:.3s; }

/* ================= Hero ================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:7rem 0 3rem;
  overflow:hidden;
}

.hero-bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
  z-index:0;
}

.hero-inner{ position:relative; z-index:1; }

.eyebrow{
  font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.12em;
  color:var(--accent-green);
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:1rem;
}
.blink-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent-green);
  box-shadow:0 0 0 0 rgba(63,185,80,.6);
  animation:blinkPulse 1.8s infinite;
}
@keyframes blinkPulse{
  0%{ box-shadow:0 0 0 0 rgba(63,185,80,.55); }
  70%{ box-shadow:0 0 0 8px rgba(63,185,80,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,185,80,0); }
}

.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.02;
  margin:0 0 1.2rem;
  letter-spacing:-.02em;
}

.hero-sub{
  font-size:1.08rem;
  color:var(--muted);
  max-width:460px;
  line-height:1.7;
  margin-bottom:2rem;
}
.hero-sub strong{ color:var(--text); }

.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2rem; }

.btn-terminal{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--accent-flutter);
  color:#04121c;
  font-weight:700; font-family:var(--font-display); font-size:.85rem;
  padding:.85rem 1.5rem;
  border-radius:8px;
  border:1px solid var(--accent-flutter);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-terminal:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px -8px rgba(41,182,246,.55);
  color:#04121c;
}
.btn-terminal.full{ width:100%; justify-content:center; }

.btn-outline-term{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--font-display); font-size:.85rem; font-weight:600;
  padding:.85rem 1.5rem;
  border-radius:8px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.btn-outline-term:hover{
  border-color:var(--accent-cs);
  background:rgba(139,92,246,.08);
  transform:translateY(-3px);
  color:var(--text);
}

.hero-socials{ display:flex; gap:.9rem; }
.hero-socials a{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  color:var(--muted);
  transition:all .25s ease;
}
.hero-socials a:hover{
  color:#fff; border-color:var(--accent-flutter);
  background:var(--accent-flutter);
  transform:translateY(-4px);
}

/* --- Editor window (hero code block) --- */
.editor-window, .terminal-window{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.editor-header{
  display:flex; align-items:center; gap:1rem;
  padding:.7rem 1rem;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.editor-filename{
  font-family:var(--font-display);
  font-size:.75rem;
  color:var(--muted);
  margin:0 auto;
}
.editor-body{
  padding:1.6rem 1.4rem;
  font-family:var(--font-display);
  font-size:.86rem;
  line-height:1.85;
  overflow-x:auto;
}
.editor-body pre{ margin:0; }
.editor-body code{ font-family:var(--font-display); }

.c-comment{ color:#6b7280; font-style:italic; }
.c-key{ color:var(--accent-cs); }
.c-class{ color:var(--accent-flutter); }
.c-str{ color:var(--accent-yellow); }
.c-fn{ color:#f78166; }

.type-cursor{
  border-right:2px solid var(--accent-green);
  padding-right:2px;
  animation:caretBlink 1s steps(1) infinite;
}
.type-cursor-static{ color:var(--accent-flutter); }

@keyframes caretBlink{ 50%{ border-color:transparent; } }

.scroll-hint{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.1em;
  color:var(--muted);
  animation:bounceHint 2.2s ease-in-out infinite;
}
@keyframes bounceHint{
  0%,100%{ transform:translate(-50%,0); opacity:.6; }
  50%{ transform:translate(-50%,6px); opacity:1; }
}

/* ================= Sections generic ================= */
.section{ padding:6.5rem 0; position:relative; }
.section-alt{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.file-tag{
  font-family:var(--font-display);
  font-size:.75rem;
  color:var(--accent-flutter);
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.6rem;
}

.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom:.6rem;
}

.section-sub{ color:var(--muted); font-size:1rem; max-width:560px; }

/* ================= About ================= */
.about-text{ color:var(--muted); font-size:1.02rem; line-height:1.8; margin-bottom:1.1rem; }
.about-text strong{ color:var(--text); }

.edu-cards{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.6rem; }
.edu-card{
  display:flex; align-items:flex-start; gap:1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  transition:border-color .25s ease, transform .25s ease;
}
.edu-card:hover{ border-color:var(--accent-cs); transform:translateX(6px); }
.edu-card i{ font-size:1.3rem; color:var(--accent-cs); margin-top:.15rem; }
.edu-card h4{ margin:0 0 .2rem; font-size:.98rem; }
.edu-card span{ color:var(--muted); font-size:.85rem; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.2rem;
  text-align:left;
  transition:transform .25s ease, border-color .25s ease;
}
.stat-card:hover{ transform:translateY(-6px); border-color:var(--accent-flutter); }
.stat-num{
  font-family:var(--font-display);
  font-size:2.1rem; font-weight:800;
  color:var(--accent-flutter);
}
.stat-plus{ font-family:var(--font-display); font-size:1.4rem; color:var(--accent-flutter); font-weight:800; }
.stat-card p{ margin:.35rem 0 0; color:var(--muted); font-size:.85rem; line-height:1.4; }

/* ================= Skills ================= */
.skill-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  height:100%;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.skill-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent-flutter);
  box-shadow:0 16px 40px -18px rgba(41,182,246,.35);
}
.skill-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.skill-head i{ font-size:1.15rem; color:var(--accent-cs); }
.skill-head h3{ margin:0; font-size:1.02rem; font-family:var(--font-display); }

.tag-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{
  font-family:var(--font-display);
  font-size:.72rem;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:.35rem .7rem;
  border-radius:100px;
  transition:all .2s ease;
}
.tag:hover{ border-color:var(--accent-flutter); color:var(--accent-flutter); }
.tag-list.sm .tag{ font-size:.68rem; padding:.3rem .6rem; }

/* ================= Experience / git log ================= */
.git-log{ position:relative; }

.log-entry{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:1.4rem;
  padding-bottom:2.2rem;
}
.log-line{ position:relative; display:flex; justify-content:center; }
.log-branch{
  position:absolute; top:22px; bottom:-22px; width:2px;
  background:var(--border);
}
.log-entry:last-child .log-branch{ display:none; }
.log-dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--surface-2);
  border:2px solid var(--accent-flutter);
  z-index:1;
}
.log-dot.current{ background:var(--accent-green); border-color:var(--accent-green); box-shadow:0 0 0 4px rgba(63,185,80,.18); }
.log-dot.end{ border-color:var(--muted); }

.log-content h3{
  font-size:1.08rem; margin:.2rem 0 .5rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
}
.log-date{
  font-family:var(--font-display); font-size:.72rem;
  color:var(--accent-flutter);
  letter-spacing:.05em;
}
.log-tag{
  font-family:var(--font-display); font-size:.65rem;
  background:var(--surface-2); border:1px solid var(--border);
  padding:.15rem .55rem; border-radius:100px; color:var(--muted);
}
.log-content p{ color:var(--muted); margin:0; line-height:1.7; max-width:640px; }

/* ================= Projects ================= */
.project-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.6rem;
  height:100%;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.project-link {
  margin-top: auto;
  padding-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6c63ff;      /* apni theme ka accent color yahan daal do */
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.project-link i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.project-link:hover {
  color: #4b42d6;
  gap: 10px;
}

.project-link:hover i {
  transform: translate(2px, -2px);
}

.project-link {
  position: relative;
  z-index: 2;
}



.project-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(41,182,246,.08), rgba(139,92,246,.08));
  opacity:0; transition:opacity .3s ease;
}
.project-card:hover::before{ opacity:1; }
.project-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent-cs);
  box-shadow:0 20px 45px -20px rgba(139,92,246,.4);
}
.project-icon{
  width:46px; height:46px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2);
  color:var(--accent-flutter);
  font-size:1.15rem;
  margin-bottom:1rem;
  position:relative; z-index:1;
}
.project-card h3{ font-size:1.02rem; margin:0 0 .5rem; position:relative; z-index:1; }
.project-card p{ color:var(--muted); font-size:.88rem; line-height:1.6; margin-bottom:1rem; position:relative; z-index:1; }
.project-card .tag-list{ position:relative; z-index:1; }

/* ================= Contact ================= */
.terminal-body{
  padding:1.5rem 1.4rem;
  font-family:var(--font-display);
  font-size:.85rem;
  line-height:2.1;
}
.prompt{ color:var(--accent-green); }
.path{ color:var(--accent-flutter); }
.term-line{ color:var(--muted); display:flex; align-items:center; gap:.6rem; }
.term-line i{ width:16px; color:var(--accent-cs); }
.term-line a:hover{ color:var(--accent-flutter); }

.contact-form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.8rem;
}
.form-row{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.form-row label{
  font-family:var(--font-display); font-size:.78rem; color:var(--muted);
}
.cmt{ color:#6b7280; }
.form-row input, .form-row textarea{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem .9rem;
  color:var(--text);
  font-family:var(--font-body);
  font-size:.92rem;
  resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none;
  border-color:var(--accent-flutter);
  box-shadow:0 0 0 3px rgba(41,182,246,.15);
}
.form-status{
  margin:.9rem 0 0; font-family:var(--font-display); font-size:.8rem; color:var(--accent-green); min-height:1.2em;
}

/* ================= Footer ================= */
.footer{ padding:2.2rem 0; border-top:1px solid var(--border); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-inner p{ color:var(--muted); font-size:.85rem; margin:0; }
.footer-socials{ display:flex; gap:.9rem; }
.footer-socials a{ color:var(--muted); font-size:1.05rem; transition:color .2s ease, transform .2s ease; }
.footer-socials a:hover{ color:var(--accent-flutter); transform:translateY(-3px); }

.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent-flutter);
  color:#04121c;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease;
  z-index:900;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-4px); }

/* ================= Reveal animations ================= */
.reveal-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal-up.in-view{ opacity:1; transform:translateY(0); }
.delay-1.in-view{ transition-delay:.08s; }
.delay-2.in-view{ transition-delay:.16s; }
.delay-3.in-view{ transition-delay:.24s; }
.delay-4.in-view{ transition-delay:.32s; }
.delay-5.in-view{ transition-delay:.4s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal-up{ opacity:1; transform:none; }
}

/* ================= Responsive ================= */
@media (max-width: 991px){
  .ide-topbar{ flex-wrap:wrap; }
  .tab-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:.5rem 0;
  }
  .tab-nav.open{ display:flex; }
  .tab-item{ border-radius:0; padding:.85rem 1.5rem; border-bottom:1px solid var(--border); }
  .hamburger{ display:flex; }
  .stat-grid{ margin-top:2rem; }
}

@media (max-width: 575px){
  .hero{ padding-top:8rem; }
  .hero-cta{ flex-direction:column; }
  .btn-terminal, .btn-outline-term{ justify-content:center; }
  .editor-body{ font-size:.74rem; }
}