/* =========================================================
   Ali Hamza — Portfolio
   Concept: an annotated design-spec file. Dark canvas,
   redline accent, ruler + measurement motifs.
   ========================================================= */

:root{
  --canvas: #14161B;
  --panel:  #1C1F26;
  --panel-2:#20232B;
  --line:   rgba(255,255,255,0.08);
  --ink:    #ECEAE3;
  --muted:  #9297A1;
  --red:    #FF4F64;
  --blue:   #4F9DFF;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-w: 220px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  cursor:none;
}

@media (max-width:900px){
  body{ cursor:auto; }
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0 0 1em; color:var(--muted); max-width:60ch; }
button, input, textarea{ font-family:var(--font-body); }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--red); }
.cursor-ring{
  width:32px; height:32px; border:1px solid rgba(255,79,100,0.5);
  transition:width .2s, height .2s, border-color .2s, opacity .2s;
}
.cursor-ring.grow{ width:56px; height:56px; border-color:var(--blue); }
@media (max-width:900px){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ---------- scroll progress ruler ---------- */
.scroll-ruler{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:var(--line); z-index:1000;
}
.scroll-ruler span{
  display:block; height:100%; width:0%;
  background:var(--red);
  transition:width .1s linear;
}

/* ---------- mobile bar ---------- */
.mobile-bar{
  display:none;
  position:fixed; top:0; left:0; right:0; height:56px;
  align-items:center; justify-content:space-between;
  padding:0 20px; background:rgba(20,22,27,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  z-index:900;
}
.mobile-logo{ font-family:var(--font-display); font-weight:600; }
.menu-btn{
  width:32px; height:24px; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; padding:0;
}
.menu-btn span{ height:2px; background:var(--ink); border-radius:2px; }

/* ---------- side nav ---------- */
.side-nav{
  position:fixed; top:0; left:0; width:var(--nav-w); height:100%;
  border-right:1px solid var(--line);
  padding:36px 28px;
  display:flex; flex-direction:column; justify-content:space-between;
  z-index:800;
}
.side-logo{
  font-family:var(--font-display); font-weight:700; font-size:1.2rem;
}
.side-logo span{ color:var(--red); }
.side-links{ list-style:none; margin:0; padding:0; }
.side-links li{ margin-bottom:18px; }
.side-links a{
  display:flex; align-items:center; gap:10px;
  color:var(--muted); font-size:.92rem; letter-spacing:.02em;
  transition:color .2s;
  position:relative;
}
.side-links a .dot{
  width:6px; height:6px; border-radius:50%; background:var(--line);
  transition:background .2s, box-shadow .2s;
}
.side-links a:hover, .side-links a.active{ color:var(--ink); }
.side-links a.active .dot{
  background:var(--red);
  box-shadow:0 0 0 3px rgba(255,79,100,0.18);
}
.side-foot{ display:flex; gap:8px; }
.social-chip{
  width:32px; height:32px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:var(--muted);
  transition:border-color .2s, color .2s, transform .2s;
}
.social-chip:hover{ border-color:var(--red); color:var(--ink); transform:translateY(-2px); }

main{ margin-left:var(--nav-w); }
@media (max-width:900px){
  .side-nav{
    transform:translateX(-100%);
    transition:transform .3s ease;
    background:var(--canvas);
    width:240px;
  }
  .side-nav.open{ transform:translateX(0); }
  main{ margin-left:0; padding-top:56px; }
  .mobile-bar{ display:flex; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  align-items:center;
  padding:0 64px;
  overflow:hidden;
}
.hero-grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 30% 40%, black, transparent 70%);
  opacity:.5;
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; }
.hero-kicker{
  font-size:.85rem; color:var(--red); margin-bottom:18px;
  font-weight:500;
}
.hero-name{
  font-size:clamp(3rem, 8vw, 6rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-0.02em;
  margin-bottom:24px;
}
.hero-desc{ font-size:1.15rem; max-width:44ch; color:var(--muted); margin-bottom:36px; }
.hero-cta{ display:inline-block; }
.cta-wrap{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  font-size:.95rem; font-weight:500;
  transition:transform .2s, background .2s, border-color .2s;
}
.btn-primary{ background:var(--red); color:#14161B; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--red); transform:translateY(-2px); }

/* hero reveal animation (single orchestrated entrance) */
.reveal-line{ display:block; overflow:hidden; }
.reveal-inner{
  display:inline-block;
  transform:translateY(110%);
  opacity:0;
  animation:revealUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-name .reveal-line:nth-child(1) .reveal-inner{ animation-delay:.1s; }
.hero-name .reveal-line:nth-child(2) .reveal-inner{ animation-delay:.22s; }
.hero-desc .reveal-inner{ animation-delay:.36s; }
.hero-cta .reveal-inner{ animation-delay:.48s; }
@keyframes revealUp{
  to{ transform:translateY(0); opacity:1; }
}

/* hero spec panel */
.hero-panel{ position:relative; z-index:2; display:flex; justify-content:center; }
.panel-card{
  width:280px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow:0 30px 60px rgba(0,0,0,.35);
  animation:floatY 6s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.panel-topbar{ display:flex; gap:6px; margin-bottom:14px; }
.panel-topbar span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.panel-frame{
  position:relative; height:200px; border:1px dashed var(--line); border-radius:10px;
  padding:20px;
}
.frame-box{ position:relative; border-radius:8px; }
.box-a{
  height:70px; background:var(--panel-2); border:1px solid var(--line); margin-bottom:16px;
}
.box-b{
  height:34px; width:70%; background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
}
.measure{
  position:absolute; font-size:.62rem; color:var(--red); font-family:var(--font-display);
}
.measure-top{ top:-16px; left:0; }
.measure-side{ top:10px; right:-46px; }
.frame-line{
  position:absolute; left:20px; right:20px; top:96px; height:1px;
  background:linear-gradient(to right, transparent, var(--red), transparent);
}
.panel-caption{ margin-top:14px; font-size:.7rem; color:var(--muted); font-family:var(--font-display); }

.scroll-cue{
  position:absolute; bottom:36px; left:64px; z-index:2;
  display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.78rem;
}
.scroll-cue i{
  width:1px; height:34px; background:var(--line); position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--red); animation:scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding:120px 24px 60px; text-align:left; }
  .hero-panel{ display:none; }
  .scroll-cue{ left:24px; }
}

/* ---------- generic section ---------- */
.section{ padding:120px 64px; border-top:1px solid var(--line); }
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:56px; }
.section-index{ font-family:var(--font-display); color:var(--red); font-size:.9rem; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); }

@media (max-width:900px){
  .section{ padding:80px 24px; }
}

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:60px; }
.about-facts{ display:flex; flex-direction:column; gap:32px; }
.fact{ border-left:2px solid var(--red); padding-left:18px; }
.fact-num{ display:block; font-family:var(--font-display); font-size:2.6rem; font-weight:700; }
.fact-label{ color:var(--muted); font-size:.88rem; }
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ---------- skills ---------- */
.marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; margin-bottom:56px;
}
.marquee-track{
  display:flex; gap:48px; white-space:nowrap; width:max-content;
  animation:scrollX 22s linear infinite;
  font-family:var(--font-display); font-size:1.4rem; color:var(--muted);
}
.marquee-track span:nth-child(odd){ color:var(--ink); }
@keyframes scrollX{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.skills-grid{ display:flex; flex-direction:column; gap:22px; max-width:640px; }
.skill-row{ display:grid; grid-template-columns:160px 1fr; align-items:center; gap:20px; }
.skill-name{ font-size:.92rem; }
.skill-bar{ height:6px; background:var(--panel); border-radius:6px; overflow:hidden; }
.skill-bar span{
  display:block; height:100%; width:0; background:linear-gradient(to right, var(--red), var(--blue));
  border-radius:6px;
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.skill-bar span.filled{ width:var(--w); }
@media (max-width:600px){
  .skill-row{ grid-template-columns:1fr; gap:8px; }
}

/* ---------- experience timeline ---------- */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);
}
.tl-item{ position:relative; margin-bottom:48px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-dot{
  position:absolute; left:-28px; top:6px; width:11px; height:11px; border-radius:50%;
  background:var(--canvas); border:2px solid var(--red);
}
.tl-date{ font-size:.8rem; color:var(--red); font-family:var(--font-display); }
.tl-content h3{ font-size:1.15rem; margin:8px 0 8px; font-weight:600; }
.tl-content h3 em{ color:var(--muted); font-style:normal; font-weight:400; }
.edit-note{ margin-top:36px; font-size:.82rem; color:var(--muted); border-left:2px solid var(--line); padding-left:14px; }

.edu-block{ margin-top:56px; padding-top:36px; border-top:1px solid var(--line); max-width:520px; }
.edu-label{ display:block; font-family:var(--font-display); color:var(--red); font-size:.85rem; margin-bottom:16px; }
.edu-row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.edu-row:last-child{ border-bottom:none; }
.edu-year{ color:var(--muted); font-family:var(--font-display); }

/* ---------- work ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.work-card{
  display:block;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--panel);
  transition:transform .3s, border-color .3s;
}
.work-card:hover{ transform:translateY(-6px); border-color:rgba(255,79,100,0.4); }

/* screenshot-style visual: browser chrome + mock UI blocks, like a still image of the site */
.work-visual{
  height:190px; position:relative;
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
.work-visual{
  position: relative;
  overflow: hidden; /* image ke corners visual ke border-radius se bahar na nikle */
}

.work-img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.4em;
  object-fit: cover; /* image crop ho jayegi bina stretch/distort hue */
}
.wv-1{ background:linear-gradient(160deg,#2a2140,#1c1f26); }
.wv-2{ background:linear-gradient(160deg,#132a3a,#1c1f26); }
.wv-3{ background:linear-gradient(160deg,#133a2f,#1c1f26); }
.wv-4{ background:linear-gradient(160deg,#303a13,#1c1f26); }
.wv-5{ background:linear-gradient(160deg,#3a132e,#1c1f26); }
.wv-6{ background:linear-gradient(160deg,#3a1c22,#1c1f26); }
.browser-chrome{ display:flex; gap:6px; }
.browser-chrome span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); }
.mock-blocks{ flex:1; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.mock-line{ height:8px; border-radius:4px; background:rgba(255,255,255,0.18); }
.mock-line.w70{ width:70%; }
.mock-line.w40{ width:40%; }
.mock-card{ height:52px; border-radius:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); }

.work-info{ padding:22px; }
.work-info h3{ font-size:1.15rem; margin-bottom:8px; font-weight:600; }
.work-tags{ font-size:.78rem; color:var(--red); font-family:var(--font-display); }
@media (max-width:900px){
  .work-grid{ grid-template-columns:1fr; }
}

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-text h3{ font-size:1.8rem; margin-bottom:16px; max-width:16ch; }
.contact-email{
  display:inline-block; margin-top:12px; font-family:var(--font-display);
  font-size:1.2rem; color:var(--red); border-bottom:1px solid var(--red);
}
.contact-meta{ display:flex; gap:20px; margin-top:14px; font-size:.85rem; color:var(--muted); flex-wrap:wrap; }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:.8rem; color:var(--muted); }
.form-row input, .form-row textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--ink); resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{ outline:2px solid var(--red); outline-offset:1px; }
.form-note{ margin-top:14px; font-size:.85rem; color:var(--blue); min-height:1.2em; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- footer ---------- */
.footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:32px 64px; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted);
}
.footer-links{ display:flex; gap:20px; }
.footer-links a:hover{ color:var(--ink); }
@media (max-width:900px){
  .footer{ padding:28px 24px; }
}

/* ---------- scroll reveal (sparing use) ---------- */
.section-head, .about-text, .about-facts, .tl-item, .work-card, .contact-grid > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.section-head.in-view, .about-text.in-view, .about-facts.in-view,
.tl-item.in-view, .work-card.in-view, .contact-grid > *.in-view{
  opacity:1; transform:translateY(0);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }
}