/* Mahmood Ali Khan — portfolio. Shared stylesheet. */
:root{
  --bg:#0A0C10; --panel:#14171E; --ink:#EDEFF4; --muted:#9BA3B4; --line:#262B36;
  --link:#8AB4FF; --url:#6FD3A0; --accent:#3EE6B4; --mark:#3A320F;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;line-height:1.15;margin:0}
img{max-width:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
svg.ic{width:16px;height:16px;vertical-align:-3px;fill:currentColor;margin-right:6px;flex:none}

nav.site{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.cv-btn{margin-left:12px;background:var(--accent);color:#04140F;padding:8px 16px;border-radius:999px;
  font-weight:700;font-size:13px;text-decoration:none;transition:transform .2s ease;white-space:nowrap}
.cv-btn:hover{transform:translateY(-2px)}

.icon-row{display:inline-flex;gap:8px;margin-left:12px;vertical-align:middle}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;
  align-items:center;justify-content:center;color:var(--ink);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,background .2s ease;
  animation:iconBob 2.6s ease-in-out infinite}
.icon-btn:nth-child(1){animation-delay:0s}
.icon-btn:nth-child(2){animation-delay:.2s}
.icon-btn:nth-child(3){animation-delay:.4s}
.icon-btn:nth-child(4){animation-delay:.6s}
.icon-btn:hover{transform:translateY(-4px) scale(1.12) rotate(-6deg);border-color:var(--link);background:var(--panel);
  animation-play-state:paused}
.icon-btn svg{width:15px;height:15px;margin:0}
@keyframes iconBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Same bounce treatment for the LinkedIn/GitHub/Behance/Email buttons in the hero card */
.sitelinks a{animation:iconBob 2.6s ease-in-out infinite}
.sitelinks a:nth-child(1){animation-delay:0s}
.sitelinks a:nth-child(2){animation-delay:.15s}
.sitelinks a:nth-child(3){animation-delay:.3s}
.sitelinks a:nth-child(4){animation-delay:.45s}
.sitelinks a:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .icon-btn,.sitelinks a{animation:none}
}
nav.site .wrap{display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap;padding:12px 20px}
nav.site b{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;margin-right:auto}
nav.site b a{color:var(--ink);text-decoration:none}
nav.site a.navlink{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;position:relative;margin-right:18px}
nav.site a.navlink:hover{text-decoration:underline}
nav.site a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav.site a.navlink:hover::after{transform:scaleX(1)}
#nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;
  cursor:pointer;position:relative;flex:none}
#nav-toggle span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
#nav-toggle span:nth-child(1){top:12px}
#nav-toggle span:nth-child(2){top:18px}
#nav-toggle span:nth-child(3){top:24px}
#nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#nav-toggle.open span:nth-child(2){opacity:0}
#nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:640px){
  #nav-toggle{display:block}
  #nav-links{display:none;flex-basis:100%;flex-direction:column;gap:2px;padding-top:8px}
  #nav-links.open{display:flex}
  nav.site a.navlink{padding:8px 4px;margin-right:0}
  nav.site a.navlink::after{display:none}
  .cv-btn{margin:8px 0 0;text-align:center}
  .icon-row{margin:10px 0 0 0}
}

.hero{padding:56px 0 40px;display:grid;gap:36px;grid-template-columns:auto 1.05fr .95fr;align-items:center}
.avatar{width:112px;height:112px;border-radius:50%;flex:none;overflow:hidden;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hero h1{font-size:clamp(36px,6vw,60px);font-weight:800;letter-spacing:-.02em}
.hero p.lede{font-size:18px;color:var(--muted);max-width:44ch;margin:16px 0 0}
.serp{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.serp .url{color:var(--url);font-size:13px;margin:0 0 4px;word-break:break-all}
.serp .t{font:500 20px/1.3 Arial,sans-serif;color:var(--link);margin:0 0 6px}
.serp .d{font-size:14px;color:var(--muted);margin:0}
.serp mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:2px}
.sitelinks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.sitelinks a{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-decoration:none;font-size:14px;font-weight:600}
.sitelinks a:hover{border-color:var(--link)}

section{padding:44px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:22px;letter-spacing:-.01em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.stat strong{display:block;font:800 28px/1.1 "Bricolage Grotesque",sans-serif}
.stat span{display:block;font-size:14px;margin-top:6px}
.stat small{display:block;color:var(--muted);font-size:12px;margin-top:8px}
.note{color:var(--muted);font-size:13px;margin-top:14px}

.job{display:grid;grid-template-columns:170px 1fr;gap:8px 28px;padding:0 0 28px}
.job .when{color:var(--muted);font-size:14px}
.job h3{font-size:22px;font-weight:700}
.job .org{color:var(--muted);margin:2px 0 8px}
.job ul{margin:0;padding-left:18px}
.job li{margin-bottom:6px}

.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px}
.skills h3{font-size:17px;margin-bottom:6px}
.skills p{margin:0;color:var(--muted);font-size:15px}

.work{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--link)}
.card h3{font-size:22px;margin-bottom:6px}
.card p{margin:0 0 10px;color:var(--muted);font-size:15px}
.card em{font-style:normal;color:var(--link);font-size:14px;text-decoration:underline;text-underline-offset:3px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.two .m{color:var(--muted);font-size:14px}

.contact a{display:inline-flex;align-items:center;font-size:19px;font-weight:600;margin:0 22px 8px 0}

footer.site{padding:28px 0 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
footer.site a{color:var(--muted)}

.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.post-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.post-card:hover{border-color:var(--link)}
.post-card .when{color:var(--muted);font-size:13px;margin-bottom:6px}
.post-card h2{font-size:19px;margin-bottom:8px}
.post-card p{color:var(--muted);font-size:14px;margin:0 0 12px;flex:1}
.post-card em{font-style:normal;color:var(--link);font-size:13px;font-weight:600}

/* Single post */
.post-header{padding:44px 0 8px}
.post-header .back{font-size:14px;font-weight:600;display:inline-block;margin-bottom:18px}
.post-header .when{color:var(--muted);font-size:14px;margin:10px 0 0}
.post-header h1{font-size:clamp(28px,5vw,42px)}
.post-body{padding:20px 0 10px;font-size:18px;max-width:70ch;white-space:pre-line}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px 0;border-top:1px solid var(--line)}
.post-nav a{display:block;border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.post-nav a:hover{border-color:var(--link)}
.post-nav .lbl{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.post-nav .next{text-align:right}

#back-to-top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#04140F;border:none;
  font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4)}
#back-to-top.show{display:flex}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:36px;text-align:left}
  .avatar{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .job,.skills,.work,.two,.post-grid,.post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
}
@media (max-width:420px){.stats{grid-template-columns:1fr}}

/* Custom cursor (desktop, fine-pointer only) */
.cursor-dot{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0;
  transition:width .2s ease,height .2s ease,opacity .2s ease;mix-blend-mode:difference}
.cursor-dot.active{opacity:1}
.cursor-dot.hovering{width:34px;height:34px}
@media (pointer:coarse){.cursor-dot{display:none}}

/* Staggered hero heading reveal */
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(28px);animation:riseWord .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes riseWord{to{opacity:1;transform:translateY(0)}}

/* Magnetic hover targets */
.magnetic{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* Scrolling marquee strip */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);padding:14px 0;margin-top:8px}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 26s linear infinite}
.marquee-track span{font:600 13px "Bricolage Grotesque",sans-serif;letter-spacing:.03em;color:var(--muted);white-space:nowrap;text-transform:uppercase}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .hero h1 .word{opacity:1;transform:none;animation:none}
  .marquee-track{animation:none}
  .cursor-dot{display:none}
  .magnetic{transition:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Script-style eyebrow labels above section headings */
.script-label{display:block;font-family:"Caveat",cursive;font-size:26px;color:var(--muted);
  text-align:center;margin-bottom:-6px;transform:rotate(-2deg)}

/* Directional scroll-in for the Design work cards */
.work .card.reveal{transition:opacity .6s ease,transform .6s ease}
.work .card:nth-child(1).reveal{transform:translateX(-50px)}
.work .card:nth-child(2).reveal{transform:translateX(50px)}
.work .card.reveal.visible{opacity:1;transform:translateX(0)}

/* New headline style */
.eyebrow{font:600 15px "Public Sans",sans-serif;color:var(--muted);margin:0 0 6px}
.headline{font-size:clamp(28px,4.3vw,46px);font-weight:800;letter-spacing:-.015em;line-height:1.3}
.role{display:inline-block}
.role-a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:6px}
.role-b{background:var(--panel);border:1px solid var(--line);padding:2px 12px;border-radius:10px;white-space:nowrap}



/* Dock-style quick links */
.dock{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:18px 20px 30px;border-top:1px solid var(--line)}
.dock a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;
  text-decoration:none;color:var(--ink);font:600 13px "Public Sans",sans-serif;transition:transform .2s ease,border-color .2s ease}
.dock a:hover{transform:translateY(-6px) scale(1.08);border-color:var(--link)}

@media (prefers-reduced-motion:reduce){
  .fb{animation:none}
  .dock a{transition:none}
}

/* Mouse-follow glow in the hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,20%), rgba(62,230,180,.14), transparent 60%);
  transition:background .1s ease-out}
.hero > *{position:relative;z-index:1}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Hover lift */
.card,.stat,.post-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover,.stat:hover,.post-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.sitelinks a{transition:transform .15s ease,border-color .15s ease}
.sitelinks a:hover{transform:translateY(-2px)}
.avatar{transition:transform .3s ease}
.avatar:hover{transform:scale(1.04) rotate(-1deg)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card,.stat,.post-card,.sitelinks a,.avatar{transition:none}
  .hero::before{display:none}
}

/* ===== Cinematic refinement layer ===== */

/* Hero name/title entrance (runs once on load, not scroll-triggered) */
.hero-name{font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.015em;margin:0;
  animation:heroUp .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.05s}
.hero-title{font-size:clamp(15px,1.8vw,18px);color:var(--muted);font-weight:600;margin:6px 0 14px;
  animation:heroUp .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.22s}
.hero .lede{animation:heroUp .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.36s}
.hero .avatar{animation:avatarIn .6s cubic-bezier(.2,.8,.2,1) both}
.hero .serp{animation:slideInRight .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s}
@keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes avatarIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

/* Results: hover glow + count-up support */
.stat{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.stat:hover{border-color:var(--link);box-shadow:0 0 0 1px var(--link),0 10px 28px rgba(0,0,0,.4)}

/* Experience: timeline line + staggered reveal of each job's parts */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line);
  transform-origin:top;transform:scaleY(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.timeline.visible::before{transform:scaleY(1)}
.job{position:relative}
.job::before{content:"";position:absolute;left:-22px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.job.reveal h3,.job.reveal .org,.job.reveal ul li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.job.reveal.visible h3{opacity:1;transform:translateY(0);transition-delay:.05s}
.job.reveal.visible .org{opacity:1;transform:translateY(0);transition-delay:.15s}
.job.reveal.visible ul li{opacity:1;transform:translateY(0)}
.job.reveal.visible ul li:nth-child(1){transition-delay:.25s}
.job.reveal.visible ul li:nth-child(2){transition-delay:.33s}
.job.reveal.visible ul li:nth-child(3){transition-delay:.41s}
.job.reveal.visible ul li:nth-child(4){transition-delay:.49s}
.job.reveal.visible ul li:nth-child(5){transition-delay:.57s}

/* Skills: staggered block reveal + hover lift */
.skills > div{transition:opacity .5s ease,transform .5s ease,border-color .2s ease,transform .2s ease;
  border:1px solid transparent;border-radius:10px;padding:4px 6px;margin:-4px -6px}
.skills > div.reveal{opacity:0;transform:translateY(14px)}
.skills > div.reveal.visible{opacity:1;transform:translateY(0)}
.skills > div.reveal.visible:nth-child(1){transition-delay:0s}
.skills > div.reveal.visible:nth-child(2){transition-delay:.08s}
.skills > div.reveal.visible:nth-child(3){transition-delay:.16s}
.skills > div.reveal.visible:nth-child(4){transition-delay:.24s}
.skills > div:hover{border-color:var(--line);transform:translateY(-3px)}

/* Design work: scale-in + arrow nudge on hover */
.work .card.reveal{transform:translateX(-50px) scale(.98)}
.work .card:nth-child(2).reveal{transform:translateX(50px) scale(.98)}
.work .card.reveal.visible{transform:translateX(0) scale(1)}
.work .card em{display:inline-flex;align-items:center;gap:4px;transition:gap .2s ease}
.work .card em::after{content:"\2192";transition:transform .2s ease}
.work .card:hover em::after{transform:translateX(4px)}

/* Education: column reveal + divider */
#education .two > div{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
#education .two > div.visible{opacity:1;transform:translateY(0)}
#education .two > div:nth-child(2){transition-delay:.15s;border-left:1px solid var(--line);padding-left:28px}
@media (max-width:760px){#education .two > div:nth-child(2){border-left:none;padding-left:0}}

/* Contact: closing statement + CTA */
.contact-statement{font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-.01em;margin-bottom:22px;max-width:18ch}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#04140F;font-weight:700;
  padding:13px 24px;border-radius:999px;text-decoration:none;margin:22px 0 28px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s ease}
.cta-btn span{transition:transform .2s ease}
.cta-btn:hover{transform:scale(1.04)}
.cta-btn:hover span{transform:translateX(4px)}

/* Nav: nearly invisible until scrolled */
nav.site{background:transparent;border-bottom-color:transparent;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
nav.site.scrolled{background:rgba(10,12,16,.85);backdrop-filter:blur(8px);border-bottom-color:var(--line)}

@media (prefers-reduced-motion:reduce){
  .hero-name,.hero-title,.hero .lede,.hero .avatar,.hero .serp{animation:none;opacity:1;transform:none}
  .timeline::before{transform:scaleY(1);transition:none}
  .job h3,.job .org,.job ul li,.skills > div.reveal,.work .card.reveal,#education .two > div{opacity:1;transform:none;transition:none}
  .cta-btn,.cta-btn:hover{transform:none}
}

/* Auto-sliding quick-links strip */
.dock{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dock .dock-track{display:flex;width:max-content;padding:8px 0;animation:dockSlide 30s linear infinite}
.dock .dock-track a{flex:0 0 auto;margin-right:10px}
.dock:hover .dock-track,.dock:focus-within .dock-track{animation-play-state:paused}
@keyframes dockSlide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dock{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.dock .dock-track{animation:none}.dock .dock-track a[aria-hidden]{display:none}}