/* ═══════════════════════════════════════════
   PORTFOLIO_OS v2.4.1  —  Terminal / CRT Theme
   ═══════════════════════════════════════════ */
:root {
  --bg:       #080808;
  --bg-card:  #0D0D0D;
  --green:    #00FF41;
  --green-dim:#00FF4166;
  --green-glow: 0 0 8px #00FF4188;
  --amber:    #FFB347;
  --red:      #FF4444;
  --text:     #00FF41;
  --dim:      #00FF4166;
  --font:     'JetBrains Mono', monospace;
  --vt:       'VT323', monospace;
}

/* ── Reset ─────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--green);
  overflow-x:hidden;
  cursor:none;
}
a{color:var(--green);text-decoration:none;}
ul{list-style:none;}
img{display:block;max-width:100%;}

/* ── CRT scanlines ──────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 3px
  );
  pointer-events:none;
  z-index:9000;
}
/* ── Vignette ───────────────────────────── */
body::after{
  content:'';
  position:fixed;inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.72) 100%);
  pointer-events:none;
  z-index:9001;
}

/* ── Noise grain ────────────────────────── */
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-2px,1px)}
  20%{transform:translate(2px,-2px)}
  30%{transform:translate(-1px,3px)}
  40%{transform:translate(3px,-1px)}
  50%{transform:translate(-2px,2px)}
  60%{transform:translate(1px,-3px)}
  70%{transform:translate(-3px,1px)}
  80%{transform:translate(2px,2px)}
  90%{transform:translate(-1px,-1px)}
}

/* ── Boot splash ────────────────────────── */
#boot-splash{
  position:fixed;inset:0;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  transition:opacity 0.6s ease;
}
#boot-splash.fade{opacity:0;pointer-events:none;}
.boot-content{text-align:center;width:min(500px,90vw);}
.boot-logo{
  font-family:var(--vt);font-size:clamp(2rem,6vw,3.5rem);
  color:var(--green);text-shadow:var(--green-glow);
  margin-bottom:2rem;letter-spacing:0.1em;
}
.boot-lines p{
  font-size:0.8rem;color:var(--dim);text-align:left;line-height:1.8;
}
.boot-bar-wrap{
  margin-top:1.5rem;
  display:flex;align-items:center;gap:1rem;
  border:1px solid var(--green-dim);padding:6px 10px;
}
#boot-bar{
  flex:1;height:10px;
  background:linear-gradient(90deg,var(--green),#00cc33);
  width:0%;transition:width 0.05s linear;
  box-shadow:var(--green-glow);
}
#boot-pct{font-size:0.75rem;color:var(--green);min-width:3ch;}

/* ── Scroll bar ─────────────────────────── */
#scroll-bar{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:var(--green);box-shadow:var(--green-glow);
  z-index:8999;transition:width 0.1s linear;
}

/* ── Custom cursor ──────────────────────── */
#cursor-dot{
  position:fixed;width:14px;height:14px;
  border:1.5px solid var(--green);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  box-shadow:var(--green-glow);
  transition:transform 0.06s ease;
}
.cursor-trail{
  position:fixed;width:5px;height:5px;
  background:var(--green);border-radius:50%;
  pointer-events:none;z-index:9997;
  transform:translate(-50%,-50%);
  animation:trail-fade 0.45s forwards;
}
@keyframes trail-fade{to{opacity:0;transform:translate(-50%,-50%) scale(0);}}

/* ── Navbar ─────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;height:52px;
  background:rgba(8,8,8,0.96);
  border-bottom:1px solid var(--green-dim);
  z-index:8990;
  backdrop-filter:blur(4px);
}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-blink{
  display:inline-block;width:8px;height:8px;
  background:var(--green);border-radius:50%;
  animation:blink 1s step-end infinite;
  box-shadow:var(--green-glow);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.nav-title{font-size:0.72rem;letter-spacing:0.1em;color:var(--green);text-transform:uppercase;}
.nav-links{display:flex;gap:0.2rem;align-items:center;}
.nav-link{
  font-size:0.75rem;padding:4px 10px;
  color:var(--dim);letter-spacing:0.05em;
  transition:color 0.2s,text-shadow 0.2s;
  border-radius:2px;
}
.nav-link:hover,.nav-link.active{
  color:var(--green);
  text-shadow:var(--green-glow);
}
.nav-link.active::before{content:'> ';}
.nav-ham{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:none;padding:6px;
}
.nav-ham span{
  display:block;width:22px;height:1.5px;
  background:var(--green);
  transition:transform 0.3s,opacity 0.3s;
}
/* Mobile overlay */
#nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:var(--bg);
  z-index:9990;
  flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  border:1px solid var(--green-dim);
}
#nav-overlay.open{display:flex;}
#nav-overlay-close{
  position:absolute;top:1.5rem;right:1.5rem;
  background:none;border:1px solid var(--green-dim);
  color:var(--green);font-family:var(--font);font-size:0.8rem;
  padding:6px 12px;cursor:none;
  transition:background 0.2s;
}
#nav-overlay-close:hover{background:var(--green-dim);}
#nav-overlay ul{display:flex;flex-direction:column;gap:1.5rem;text-align:center;}
#nav-overlay .nav-link{font-size:1.4rem;font-family:var(--vt);letter-spacing:0.1em;color:var(--green);}

/* ── Terminal window component ──────────── */
.term-window{
  background:var(--bg-card);
  border:1px solid var(--green-dim);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 0 20px rgba(0,255,65,0.08);
}
.term-bar{
  display:flex;align-items:center;gap:8px;
  background:#0a0a0a;
  padding:8px 14px;
  border-bottom:1px solid var(--green-dim);
}
.td{display:inline-block;width:10px;height:10px;border-radius:50%;}
.td-r{background:#ff5f56;} .td-y{background:#ffbd2e;} .td-g{background:#27c93f;}
.term-bar-title{font-size:0.7rem;color:var(--dim);margin-left:6px;letter-spacing:0.05em;}
.term-body{
  padding:1.2rem 1.4rem;
  font-size:0.82rem;line-height:1.8;
  color:var(--green);
}
.term-body p{margin-bottom:0.2rem;}
.dim{color:var(--dim);}
.green{color:var(--green);}

/* ── Hero ───────────────────────────────── */
.s-hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:80px 2rem 2rem;
  overflow:hidden;
}
#bin-rain{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0.22;pointer-events:none;
}
.hero-term{
  position:relative;z-index:2;
  width:min(680px,95vw);
}
.hero-term .term-body{min-height:280px;}
.ty-line{color:var(--green);}
.ty-line .ty-cursor{
  display:inline-block;width:8px;height:1em;
  background:var(--green);vertical-align:text-bottom;
  animation:blink 0.7s step-end infinite;
}
.hero-cta{
  display:none;
  padding:1rem 1.4rem 1.4rem;
  display:flex;gap:1rem;flex-wrap:wrap;
  opacity:0;
  animation:fade-in 0.6s ease 0.2s forwards;
}
@keyframes fade-in{to{opacity:1;}}
.term-btn{
  display:inline-block;
  border:1px solid var(--green);
  padding:8px 18px;font-size:0.8rem;
  color:var(--green);letter-spacing:0.06em;
  transition:background 0.2s,box-shadow 0.2s;
}
.term-btn:hover{background:rgba(0,255,65,0.1);box-shadow:var(--green-glow);}
.term-btn.sm{font-size:0.72rem;padding:5px 12px;}

/* ── About ──────────────────────────────── */
.s-about{padding:7rem 2rem;}
.about-grid{
  display:grid;grid-template-columns:280px 1fr;gap:3rem;
  max-width:1100px;margin:0 auto;align-items:start;
}
.id-card{
  background:var(--bg-card);
  border:1px solid var(--green-dim);
  padding:1.5rem;
  position:relative;overflow:hidden;
}
.id-avatar-box{
  width:100%;aspect-ratio:1;
  background:#0a0a0a;
  border:1px solid var(--green-dim);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;margin-bottom:1rem;
}
.id-initials{font-family:var(--vt);font-size:5rem;color:var(--green-dim);text-shadow:var(--green-glow);}
.id-scan{
  position:absolute;top:-100%;left:0;right:0;height:40%;
  background:linear-gradient(to bottom,transparent,rgba(0,255,65,0.12),transparent);
  animation:scan 3s linear infinite;
}
@keyframes scan{to{top:200%;}}
.id-clearance{
  font-size:0.68rem;letter-spacing:0.1em;
  color:var(--red);border:1px solid var(--red);
  padding:3px 8px;margin-bottom:1rem;text-align:center;
  animation:blink 2s step-end infinite;
}
.id-table{width:100%;border-collapse:collapse;}
.id-k{font-size:0.65rem;color:var(--dim);padding:4px 0;letter-spacing:0.08em;}
.id-v{font-size:0.72rem;color:var(--green);padding:4px 0;text-align:right;}
.blink-green{animation:blink 1.5s step-end infinite;}

.about-right{display:flex;flex-direction:column;gap:1.5rem;}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.stat-box{
  background:var(--bg-card);border:1px solid var(--green-dim);
  padding:1.2rem;text-align:center;
}
.stat-n{
  display:block;font-family:var(--vt);font-size:2.5rem;
  color:var(--green);text-shadow:var(--green-glow);
}
.stat-l{font-size:0.62rem;color:var(--dim);letter-spacing:0.1em;display:block;margin-top:4px;}

/* ── Section headers ────────────────────── */
.s-head{
  font-family:var(--vt);font-size:clamp(1.4rem,3.5vw,2rem);
  letter-spacing:0.08em;color:var(--green);
  text-shadow:var(--green-glow);
  margin-bottom:2.5rem;
  border-left:3px solid var(--green);
  padding-left:1rem;
}
.s-head .dim{font-size:0.7em;}
.prompt{color:var(--amber);}
.tag-red{color:var(--red);}

section{padding:6rem 2rem;}
section > *:not(.s-head){max-width:1100px;margin-left:auto;margin-right:auto;}
.s-head{max-width:1100px;margin-left:auto;margin-right:auto;margin-bottom:2.5rem;}

/* ── Projects ───────────────────────────── */
.proj-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.proj-card{
  background:var(--bg-card);
  border:1px solid var(--green-dim);
  padding:0;overflow:hidden;
  transition:border-color 0.3s,box-shadow 0.3s;
  position:relative;
}
.proj-card:hover{
  border-color:var(--green);
  box-shadow:0 0 20px rgba(0,255,65,0.12);
}
.card-top-bar{
  background:#0a0a0a;
  border-bottom:1px solid var(--green-dim);
  padding:6px 12px;
}
.classif{font-size:0.68rem;color:var(--red);letter-spacing:0.1em;}
.proj-card:hover .classif::before{content:''}
.proj-card:hover .classif{color:var(--green);}
.proj-card:hover .classif::after{content:' [DECLASSIFIED]';color:var(--green);}
.proj-card:hover .classif{font-size:0.68px;color:transparent;}/* hide original */
.proj-card .inner-pad{padding:1.2rem;}

/* simpler approach */
.proj-card .classif{transition:color 0.2s;}
.proj-card:hover .classif{color:var(--green);}

.proj-num{font-family:var(--vt);font-size:2.5rem;color:var(--green-dim);padding:1rem 1.2rem 0;line-height:1;}
.proj-title{
  font-family:var(--vt);font-size:1.5rem;letter-spacing:0.08em;
  padding:0.3rem 1.2rem;color:var(--green);text-shadow:var(--green-glow);
}
.proj-type{
  font-size:0.67rem;color:var(--amber);letter-spacing:0.1em;
  padding:0 1.2rem 0.8rem;
}
.proj-desc{padding:0 1.2rem 0.8rem;position:relative;}
.redacted{
  background:var(--green);color:var(--green);
  font-size:0.75rem;line-height:1.6;
  transition:background 0.3s,color 0.3s;
  display:block;padding:2px 4px;
}
.proj-card:hover .redacted{background:transparent;color:var(--dim);}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 1.2rem 0.8rem;}
.pill{
  font-size:0.62rem;border:1px solid var(--green-dim);
  padding:2px 8px;color:var(--dim);letter-spacing:0.05em;
}
.proj-links{padding:0.8rem 1.2rem 1.2rem;}

/* Glitch on hover */
.proj-card:hover{animation:glitch 0.3s steps(2) 1;}
@keyframes glitch{
  0%  {transform:translate(0);}
  20% {transform:translate(-2px,1px);filter:hue-rotate(90deg);}
  40% {transform:translate(2px,-1px);filter:hue-rotate(-90deg);}
  60% {transform:translate(-1px,2px);}
  80% {transform:translate(1px,-1px);}
  100%{transform:translate(0);filter:none;}
}

/* ── Interactive Terminal ───────────────── */
.s-terminal{padding:6rem 2rem;}
.iterm-wrap{max-width:760px;margin:0 auto;}
.iterm-out{
  height:320px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--green-dim) transparent;
}
.iterm-out p{font-size:0.8rem;line-height:1.8;white-space:pre-wrap;}
.iterm-row{
  display:flex;align-items:center;
  border-top:1px solid var(--green-dim);
  padding:8px 14px;
}
.iterm-ps{font-size:0.75rem;color:var(--amber);white-space:nowrap;flex-shrink:0;}
.iterm-in{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font);font-size:0.8rem;
  color:var(--green);padding:0 0 0 8px;
  caret-color:var(--green);
}
.iterm-in::placeholder{color:var(--green-dim);}

/* ── Skills ─────────────────────────────── */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.skills-cat{
  font-size:0.75rem;color:var(--amber);
  letter-spacing:0.1em;margin-bottom:1.2rem;
}
.skill-row{
  display:grid;grid-template-columns:110px 1fr 40px;
  align-items:center;gap:10px;margin-bottom:1rem;
}
.sk-name{font-size:0.72rem;color:var(--green);}
.sk-track{
  height:8px;background:#111;
  border:1px solid var(--green-dim);overflow:hidden;
}
.sk-fill{height:100%;background:var(--green);width:0%;transition:width 1.2s ease;box-shadow:var(--green-glow);}
.sk-pct{font-size:0.65rem;color:var(--dim);text-align:right;}

/* ── Timeline ───────────────────────────── */
.s-experience{padding:6rem 2rem;}
.timeline{
  position:relative;
  max-width:900px;margin:0 auto;
  padding:1rem 0;
}
.timeline::before{
  content:'';position:absolute;
  left:50%;top:0;bottom:0;width:1px;
  background:var(--green-dim);
  transform:translateX(-50%);
}
.tl-entry{
  display:flex;width:50%;padding-bottom:3rem;
  position:relative;
}
.tl-entry.tl-right{margin-left:50%;padding-left:2.5rem;justify-content:flex-start;}
.tl-entry.tl-left{padding-right:2.5rem;justify-content:flex-end;}
.tl-dot{
  position:absolute;
  width:12px;height:12px;
  background:var(--green);border-radius:50%;
  box-shadow:var(--green-glow);
  top:4px;
}
.tl-right .tl-dot{left:-6px;}
.tl-left  .tl-dot{right:-6px;}
.tl-card{
  background:var(--bg-card);
  border:1px solid var(--green-dim);
  padding:1rem 1.2rem;width:100%;
  transition:border-color 0.3s;
}
.tl-card:hover{border-color:var(--green);}
.tl-hash{font-size:0.62rem;letter-spacing:0.05em;margin-bottom:4px;}
.tl-date{font-size:0.68rem;color:var(--amber);letter-spacing:0.1em;margin-bottom:6px;}
.tl-role{font-family:var(--vt);font-size:1.1rem;color:var(--green);letter-spacing:0.06em;margin-bottom:2px;}
.tl-org{font-size:0.7rem;color:var(--dim);margin-bottom:8px;}
.tl-card ul{padding-left:1rem;}
.tl-card li{font-size:0.72rem;color:var(--dim);line-height:1.7;list-style:disc;}
.tl-card li::marker{color:var(--green);}

/* ── Contact ────────────────────────────── */
.s-contact{padding:6rem 2rem;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1000px;margin:0 auto;}
.f-field{margin-bottom:1.2rem;}
.f-lbl{display:block;font-size:0.7rem;color:var(--amber);margin-bottom:6px;letter-spacing:0.05em;}
.f-input{
  display:block;width:100%;
  background:transparent;border:none;border-bottom:1px solid var(--green-dim);
  outline:none;font-family:var(--font);font-size:0.82rem;
  color:var(--green);padding:4px 0;
  transition:border-color 0.2s;
  caret-color:var(--green);
}
.f-input:focus{border-bottom-color:var(--green);box-shadow:0 2px 8px rgba(0,255,65,0.1);}
.f-ta{resize:vertical;min-height:80px;}
.send-btn{margin-top:1rem;width:100%;display:block;text-align:center;}
#f-status{margin-top:1rem;font-size:0.75rem;min-height:1.5em;}
.f-ok{color:var(--green);}
.f-err{color:var(--red);}

/* ── Footer ─────────────────────────────── */
footer{
  border-top:1px solid var(--green-dim);
  padding:2rem;text-align:center;
  font-size:0.75rem;color:var(--dim);
}
.blink-cur{animation:blink 1s step-end infinite;color:var(--green);}
.foot-links{display:flex;justify-content:center;gap:1.5rem;margin-top:0.8rem;}
.foot-links a{font-size:0.8rem;color:var(--dim);transition:color 0.2s;}
.foot-links a:hover{color:var(--green);text-shadow:var(--green-glow);}

/* ── Scroll-reveal animations ───────────── */
.reveal-up,.reveal-left,.reveal-right{
  opacity:0;transition:opacity 0.7s ease,transform 0.7s ease;
}
.reveal-up{transform:translateY(40px);}
.reveal-left{transform:translateX(-50px);}
.reveal-right{transform:translateX(50px);}
.reveal-up.visible,.reveal-left.visible,.reveal-right.visible{
  opacity:1;transform:translate(0);
}

/* ── Responsive ─────────────────────────── */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;max-width:560px;}
  .proj-grid{grid-template-columns:repeat(2,1fr);}
  .skills-grid{grid-template-columns:1fr 1fr;}
  .timeline::before{left:16px;}
  .tl-entry{width:100%;margin-left:0;padding-left:44px;padding-right:0;}
  .tl-entry.tl-left{justify-content:flex-start;padding-right:0;}
  .tl-right .tl-dot,.tl-left .tl-dot{left:10px;right:auto;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .nav-links{display:none;}
  .nav-ham{display:flex;}
  .proj-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(3,1fr);}
  .skill-row{grid-template-columns:90px 1fr 36px;}
}

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