/* ============================================================
   Srinivas Karnati — portfolio
   Modern dark engineering theme with terminal traces
   ============================================================ */

:root{
  --bg:#050506;
  --bg-soft:#0a0a0d;
  --panel:#0d0d11;
  --border:#1c1c22;
  --border-hi:#2a2a33;
  --text:#e8e8ec;
  --text-soft:#9a9aa6;
  --text-dim:#5c5c68;
  --green:#3ef58a;
  --green-dim:#14532d;
  --amber:#fbbf24;
  --cyan:#38bdf8;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --px:'Press Start 2P',monospace;
  --max:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--green);color:#000;}
.mono{font-family:var(--mono);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.accent{color:var(--green);}
.dim{color:var(--text-dim);}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* subtle pixel-grid background */
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
}

/* status dot */
.dot{display:inline-block;width:8px;height:8px;border-radius:0;margin-right:7px;vertical-align:middle;}
.dot.ok{background:var(--green);box-shadow:0 0 8px rgba(62,245,138,.7);animation:pulse-dot 2.4s infinite;}
@keyframes pulse-dot{50%{opacity:.4;}}

/* ============ NAV ============ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(5,5,6,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;gap:32px;height:64px;}
.logo{display:flex;align-items:center;text-decoration:none;}
.logo-mark{
  font-family:var(--px);font-size:13px;color:#000;background:var(--green);
  padding:8px 9px;line-height:1;
}
.logo-cursor{width:9px;height:26px;background:var(--green);margin-left:6px;animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.nav-links{display:flex;gap:28px;}
.nav-links a{
  color:var(--text-soft);text-decoration:none;font-size:15px;font-weight:500;
  padding:4px 0;border-bottom:2px solid transparent;transition:color .15s;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--green);border-bottom-color:var(--green);}
.nav-status{margin-left:auto;font-size:12.5px;color:var(--text-dim);white-space:nowrap;}
#nav-toggle{display:none;background:none;border:1px solid var(--border);padding:9px;cursor:pointer;margin-left:auto;}
#nav-toggle span{display:block;width:18px;height:2px;background:var(--text);margin:4px 0;}

/* ============ SECTIONS ============ */
section{padding:110px 0 30px;}
.sec-label{
  color:var(--green);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:14px;
}
.sec-label::before{content:"▮ ";color:var(--green);}
h2{
  font-size:clamp(30px,4.5vw,46px);font-weight:700;letter-spacing:-1px;
  line-height:1.12;margin-bottom:40px;
}

/* ============ HERO ============ */
.hero{padding:150px 0 0;}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.kicker{color:var(--text-dim);font-size:14px;margin-bottom:18px;}
.kicker .prompt{color:var(--green);}
h1{
  font-size:clamp(48px,7.5vw,84px);font-weight:700;letter-spacing:-2.5px;line-height:1.02;
  margin-bottom:20px;
}
.role{font-size:17px;color:var(--cyan);margin-bottom:22px;min-height:1.6em;}
.type-cursor{
  display:inline-block;width:10px;height:1.05em;background:var(--green);
  vertical-align:text-bottom;margin-left:2px;animation:blink 1s steps(1) infinite;
}
.lede{color:var(--text-soft);font-size:18px;max-width:560px;margin-bottom:32px;}
.lede strong{color:var(--text);font-weight:600;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  padding:13px 26px;border:1px solid transparent;transition:all .15s;
  position:relative;
}
.btn.primary{
  background:var(--green);color:#000;
  box-shadow:5px 5px 0 var(--green-dim);
}
.btn.primary:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--green-dim);}
.btn.ghost{border-color:var(--border-hi);color:var(--text);}
.btn.ghost:hover{border-color:var(--green);color:var(--green);}
.social-row{display:flex;gap:22px;font-size:13.5px;}
.social-row a{color:var(--text-dim);text-decoration:none;}
.social-row a:hover{color:var(--green);}

/* terminal trace card */
.term-card{
  background:var(--panel);border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(62,245,138,.05);
  min-width:0;
}
.term-head{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-soft);border-bottom:1px solid var(--border);padding:11px 14px;
}
.term-dots{display:flex;gap:7px;}
.term-dots i{width:11px;height:11px;border-radius:50%;background:#2f2f38;}
.term-dots i:first-child{background:#ff5f57;}
.term-dots i:nth-child(2){background:#febc2e;}
.term-dots i:nth-child(3){background:#28c840;}
.term-title{font-size:12px;color:var(--text-dim);}
.term-body{
  padding:18px;font-size:13px;line-height:1.75;min-height:300px;
  white-space:pre-wrap;word-break:break-word;color:var(--text-soft);
}
.term-body .g{color:var(--green);}
.term-body .c{color:var(--cyan);}
.term-body .a{color:var(--amber);}
.term-body .d{color:var(--text-dim);}

/* metrics */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);background:var(--panel);
  margin-top:72px;
}
.metric{
  padding:28px 20px;text-align:center;border-right:1px solid var(--border);
}
.metric:last-child{border-right:none;}
.metric .num{
  display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(26px,3.5vw,40px);color:var(--green);letter-spacing:-1px;
}
.metric .lbl{color:var(--text-dim);font-size:13.5px;}

/* pipeline divider */
.pipeline{margin-top:72px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-soft);overflow:hidden;}
.pipeline-track{
  display:flex;align-items:center;gap:0;padding:16px 24px;position:relative;
  font-family:var(--mono);font-size:12.5px;overflow-x:auto;scrollbar-width:none;
}
.pipeline-track::-webkit-scrollbar{display:none;}
.stage{
  color:var(--text-dim);border:1px solid var(--border);padding:6px 14px;white-space:nowrap;
  background:var(--bg);flex-shrink:0;
}
.stage.done{color:var(--green);border-color:var(--green-dim);}
.stage.done::before{content:"✓ ";}
.stage.active{color:#000;background:var(--green);border-color:var(--green);animation:stage-pulse 1.6s infinite;}
.stage.active::before{content:"▸ ";}
@keyframes stage-pulse{50%{box-shadow:0 0 18px rgba(62,245,138,.5);}}
.pipe{flex:1;min-width:24px;height:1px;background:var(--border-hi);position:relative;flex-shrink:1;}
.pulse{
  position:absolute;top:50%;left:0;width:26px;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,var(--green));
  animation:travel 3.2s linear infinite;pointer-events:none;
}
@keyframes travel{from{left:0;}to{left:100%;}}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start;}
.about-text p{color:var(--text-soft);margin-bottom:20px;font-size:17.5px;}
.about-text strong{color:var(--text);font-weight:600;}
.facts-card{
  background:var(--panel);border:1px solid var(--border);position:relative;
}
.facts-card::before{content:"";position:absolute;top:-1px;left:-1px;width:8px;height:8px;background:var(--green);}
.facts-head{
  padding:12px 18px;border-bottom:1px solid var(--border);
  color:var(--text-dim);font-size:12.5px;
}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:20px 18px;font-size:13.5px;}
.facts dt{color:var(--green);}
.facts dt::after{content:":";}
.facts dd{color:var(--text-soft);}

/* ============ SKILLS ============ */
.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.skill-card{
  background:var(--panel);border:1px solid var(--border);padding:26px 24px;
  transition:border-color .15s,transform .15s;position:relative;
}
.skill-card:hover{border-color:var(--green);transform:translateY(-3px);}
.skill-card:hover .skill-glyph{background:var(--green);color:#000;}
.skill-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.skill-glyph{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-hi);color:var(--green);font-size:17px;flex-shrink:0;
  transition:all .15s;
}
.skill-card h3{font-size:17px;font-weight:600;letter-spacing:-.3px;}
.skill-card p{color:var(--text-dim);font-size:14.5px;margin-top:14px;}
.tags{display:flex;flex-wrap:wrap;gap:7px;}
.tags span{
  font-family:var(--mono);font-size:12px;color:var(--text-soft);
  border:1px solid var(--border-hi);padding:3px 9px;background:var(--bg);
}
.tags.sm span{font-size:11px;padding:2px 8px;}

/* ============ EXPERIENCE / TIMELINE ============ */
.timeline{position:relative;padding-left:34px;}
.timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:repeating-linear-gradient(180deg,var(--border-hi) 0 6px,transparent 6px 12px);
}
.tl-item{position:relative;margin-bottom:36px;}
.tl-node{
  position:absolute;left:-34px;top:26px;width:18px;height:18px;
  background:var(--bg);border:2px solid var(--green);
  box-shadow:0 0 0 4px var(--bg);
}
.tl-item:first-child .tl-node{background:var(--green);box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(62,245,138,.6);}
.tl-card{
  background:var(--panel);border:1px solid var(--border);padding:26px 28px;
  transition:border-color .15s;
}
.tl-card:hover{border-color:var(--border-hi);}
.tl-meta{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:12.5px;margin-bottom:12px;
}
.tl-meta .hash{color:var(--amber);}
.tl-meta .hash::before{content:"commit ";color:var(--text-dim);}
.tl-meta .when{color:var(--green);}
.tl-card h3{font-size:20px;font-weight:600;letter-spacing:-.4px;margin-bottom:2px;}
.org{color:var(--cyan);font-size:15px;margin-bottom:16px;}
.tl-card ul{list-style:none;margin-bottom:18px;}
.tl-card li{
  color:var(--text-soft);font-size:15px;padding-left:20px;position:relative;margin-bottom:9px;
}
.tl-card li::before{content:"+";position:absolute;left:0;color:var(--green);font-family:var(--mono);}
.tl-card li strong{color:var(--text);font-weight:600;}

/* ============ OPTIONAL SECTIONS: projects / blog / talks ============ */
section[hidden]{display:none;}

/* continuous carousel — 3 cards in view, marquee loop */
.carousel{
  --car-gap:20px;
  --car-per-view:3;
  overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  padding:4px 0;
}
.car-track{
  display:flex;gap:var(--car-gap);will-change:transform;
}
.car-track>*{
  flex:0 0 calc((100% - (var(--car-per-view) - 1)*var(--car-gap))/var(--car-per-view));
  min-width:0;
}
/* when few items — no marquee, just a static row */
.car-track.static{flex-wrap:wrap;}
.carousel:has(.car-track.static){mask-image:none;-webkit-mask-image:none;}

.item-card{
  background:var(--panel);border:1px solid var(--border);padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s;
}
.item-card:hover{border-color:var(--green);}
.item-card h3{font-size:17px;font-weight:600;letter-spacing:-.3px;line-height:1.4;}
.item-card h3 a{color:var(--text);text-decoration:none;}
.item-card h3 a:hover{color:var(--green);}
.item-card p{color:var(--text-dim);font-size:14.5px;flex:1;}
.item-date{font-size:12px;color:var(--green);}
.item-links{display:flex;gap:18px;font-size:12.5px;}
.item-links a{color:var(--text-dim);text-decoration:none;}
.item-links a:hover{color:var(--green);}
.talk-type{
  align-self:flex-start;font-size:11px;color:var(--green);border:1px solid var(--green-dim);
  padding:3px 10px;text-transform:uppercase;letter-spacing:1.5px;
}
.talk-meta{color:var(--cyan);font-size:14px;}

/* ============ EDUCATION ============ */
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.edu-card{
  background:var(--panel);border:1px solid var(--border);padding:26px 28px;position:relative;
  transition:border-color .15s;
}
.edu-card:hover{border-color:var(--border-hi);}
.edu-card.cert{grid-column:1/-1;border-color:var(--green-dim);}
.edu-card.cert:hover{border-color:var(--green);}
.edu-kind{
  display:inline-block;font-size:11px;color:var(--green);border:1px solid var(--green-dim);
  padding:3px 10px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1.5px;
}
.edu-card h3{font-size:18px;font-weight:600;margin-bottom:4px;letter-spacing:-.3px;}
.edu-card .meta{color:var(--text-dim);font-size:14px;margin-top:6px;}
.cert-seal{
  position:absolute;top:26px;right:28px;color:#000;background:var(--green);
  font-size:12px;font-weight:700;padding:8px 12px;
  box-shadow:4px 4px 0 var(--green-dim);
}

/* ============ CONTACT ============ */
.contact-wrap{text-align:center;}
.contact-wrap .sec-label{text-align:center;}
.contact-wrap .lede{max-width:520px;margin:0 auto 44px;}
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;text-align:left;
}
.contact-card{
  display:block;text-decoration:none;background:var(--panel);
  border:1px solid var(--border);padding:20px 22px;transition:all .15s;
}
.contact-card:hover{border-color:var(--green);transform:translateY(-3px);}
.contact-card .proto{
  display:block;font-size:11px;color:var(--green);text-transform:uppercase;
  letter-spacing:2px;margin-bottom:8px;
}
.contact-card .proto::before{content:"→ ";}
.contact-card .val{color:var(--text);font-size:15px;word-break:break-all;}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);margin-top:110px;padding:30px 0;}
.foot-inner{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:13.5px;
}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;}
.rv.on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *{animation:none!important;}
}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .term-card{max-width:560px;}
  .skill-grid{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
  .carousel{--car-per-view:2;}
  .metrics{grid-template-columns:1fr 1fr;}
  .metric:nth-child(2){border-right:none;}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--border);}
}
@media(max-width:680px){
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg-soft);
    border-bottom:1px solid var(--border);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:15px 24px;border-bottom:1px solid var(--border);}
  .nav-status{display:none;}
  #nav-toggle{display:block;}
  .skill-grid{grid-template-columns:1fr;}
  .edu-grid{grid-template-columns:1fr;}
  section{padding:80px 0 20px;}
  .hero{padding:120px 0 0;}
  .timeline{padding-left:26px;}
  .tl-node{left:-26px;}
  .carousel{--car-per-view:1;}
  .foot-inner{flex-direction:column;text-align:center;}
}