/* ============================================================
   Aizuddin Asman — portfolio stylesheet
   Palette and layout tokens live in :root. Change them there.
   ============================================================ */

:root{
  --bg:        #0a0e0a;
  --bg-2:      #0e130e;
  --panel:     #0c110c;
  --line:      #1e3a24;
  --line-soft: #16281a;

  --green:     #97C459;
  --green-hi:  #b6e07a;
  --green-dim: #4d7a2a;
  --cyan:      #5DCAA5;
  --blue:      #85B7EB;
  --amber:     #EF9F27;
  --red:       #F09595;

  --text:      #cfe4c2;
  --text-soft: #8fae7e;
  --text-dim:  #5c7350;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1080px;
  --radius: 10px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- background layers ---------- */
#matrix{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; opacity:.28; pointer-events:none;
}
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px,
    rgba(0,0,0,.22) 4px);
  opacity:.45;
}
main, .nav, .foot{ position:relative; z-index:2; }

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:1rem 1.5rem;
  max-width:var(--wrap); margin:0 auto;
  font-family:var(--mono); font-size:13px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(10,14,10,.82);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:20;
}
.nav-brand{ color:var(--cyan); text-decoration:none; font-weight:500; letter-spacing:.4px; }
.nav-links{ display:flex; gap:1.35rem; flex-wrap:wrap; }
.nav-links a{
  color:var(--text-soft); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav-links a:hover,.nav-links a:focus-visible{ color:var(--green-hi); border-bottom-color:var(--green); }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line);
  color:var(--green); font-family:var(--mono); font-size:12px;
  padding:6px 12px; border-radius:6px; cursor:pointer;
}

/* ---------- terminal window shell ---------- */
.term{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(151,196,89,.05), 0 18px 50px rgba(0,0,0,.55);
}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot-r{ background:var(--red); } .dot-y{ background:var(--amber); } .dot-g{ background:var(--cyan); }
.term-title{
  margin-left:8px; font-family:var(--mono); font-size:12px; color:var(--cyan); opacity:.8;
}

/* ---------- hero ---------- */
.hero{ max-width:var(--wrap); margin:0 auto; padding:3.5rem 1.5rem 2rem; }
.term-body{ padding:1.75rem 1.5rem 2rem; font-family:var(--mono); line-height:1.7; }
/* hero split: text left, photo right */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:2.25rem;
  align-items:start;
}
.hero-text{ min-width:0; }

.hero-photo{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  animation:photoIn .7s ease .9s both;
}
@keyframes photoIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

.photo-frame{
  position:relative; width:100%; aspect-ratio:1/1;
  border:1px solid var(--green-dim);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-2);
  box-shadow:0 0 0 4px rgba(151,196,89,.06), 0 0 28px rgba(151,196,89,.16);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.photo-frame img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}

.photo-frame .photo-grid{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 2px 3px);
}

.hero-photo:hover .photo-frame{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(151,196,89,.1), 0 0 38px rgba(151,196,89,.3);
  transform:translateY(-3px);
}
.hero-photo:hover .photo-frame img{ transform:scale(1.03); }

.photo-cap{
  font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:.4px;
}

.login{ margin:0 0 .5rem; font-size:13px; color:var(--green-dim); }
.line{ margin:0 0 .35rem; font-size:15px; word-break:break-word; }
.ps1 .user{ color:var(--cyan); }
.ps1 .path{ color:var(--blue); }
.dim{ color:var(--text-dim); }
.cmd{ color:var(--green); }

.out{ opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.out.show{ opacity:1; transform:none; }

.name{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(2.1rem, 7vw, 4rem);
  line-height:1.05; letter-spacing:-1px;
  color:var(--green-hi); margin:.6rem 0 .25rem;
  text-shadow:0 0 22px rgba(151,196,89,.35);
}
.tagline{ margin:0 0 1.4rem; font-size:14px; color:var(--green-dim); letter-spacing:2px; text-transform:uppercase; }
.cred{ margin:0 0 .25rem; font-size:13.5px; color:var(--cyan); }
.cred:last-child{ margin-bottom:1.4rem; }
.wip{ color:var(--amber); }

.cursor{
  display:inline-block; width:9px; height:1.05em;
  background:var(--green); vertical-align:-3px;
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem; }
.btn{
  font-family:var(--mono); font-size:13.5px; text-decoration:none;
  padding:11px 22px; border-radius:6px; cursor:pointer;
  display:inline-block; transition:transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn-solid{ background:var(--green); color:#0a0e0a; border:1px solid var(--green); font-weight:500; }
.btn-solid:hover{ box-shadow:0 0 22px rgba(151,196,89,.5); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--green); border:1px solid var(--green-dim); }
.btn-ghost:hover{ border-color:var(--green); box-shadow:0 0 18px rgba(151,196,89,.25); transform:translateY(-2px); }

/* ---------- sections ---------- */
.section{ max-width:var(--wrap); margin:0 auto; padding:3.5rem 1.5rem; }
.sec-head{
  font-family:var(--mono); font-size:clamp(1.1rem,2.6vw,1.45rem);
  font-weight:500; color:var(--green);
  margin:0 0 1.75rem; letter-spacing:.3px;
}
.sec-head .dim{ margin-right:.4rem; }

.prose p{ margin:0 0 1.15rem; color:var(--text-soft); max-width:78ch; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0 0 0 1.65rem; border-left:1px solid var(--line); }
.timeline li{ position:relative; padding:0 0 2rem; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:''; position:absolute; left:calc(-1.65rem - 5px); top:.55rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--green-dim);
}
.timeline li.active::before{ background:var(--green); border-color:var(--green); box-shadow:0 0 12px var(--green); }
.tl-date{ font-family:var(--mono); font-size:12px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.timeline h3{ font-family:var(--mono); font-size:1.02rem; font-weight:500; color:var(--green-hi); margin:.2rem 0 .15rem; }
.timeline p{ margin:0; font-size:14.5px; color:var(--text-soft); }

/* ---------- skills ---------- */
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.15rem 1.75rem; }
.skill{ display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; align-items:baseline; }
.s-name{ font-family:var(--mono); font-size:14.5px; color:var(--text); }
.s-tag{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:.5px; }
.bar{ grid-column:1/-1; height:5px; background:var(--line-soft); border-radius:3px; overflow:hidden; }
.bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  border-radius:3px; transition:width 1.1s cubic-bezier(.22,.9,.3,1);
}

/* ---------- project cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; }
.card{ transition:transform .22s, border-color .22s, box-shadow .22s; }
.card:hover{ transform:translateY(-5px); border-color:var(--green-dim); box-shadow:0 0 0 1px rgba(151,196,89,.14), 0 22px 46px rgba(0,0,0,.6); }
.card-body{ padding:1.35rem 1.4rem 1.5rem; }
.card-body h3{ font-family:var(--mono); font-size:1.05rem; font-weight:500; color:var(--green-hi); margin:0 0 .6rem; line-height:1.4; }
.card-body p{ margin:0 0 1rem; font-size:14.5px; color:var(--text-soft); }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; }
.tags li{
  font-family:var(--mono); font-size:11.5px; color:var(--cyan);
  border:1px solid var(--line); border-radius:4px; padding:3px 9px;
}

/* ---------- experience ---------- */
.role-meta{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); margin:-.35rem 0 1rem !important; letter-spacing:.5px; }
.bullets{ margin:0; padding:0; list-style:none; }
.bullets li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem; font-size:14.5px; color:var(--text-soft); }
.bullets li:last-child{ margin-bottom:0; }
.bullets li::before{ content:'>'; position:absolute; left:0; color:var(--green); font-family:var(--mono); }

/* ---------- contact ---------- */
.contact-intro{ color:var(--text-soft); max-width:70ch; margin:-.75rem 0 1.75rem; }
form{ display:flex; flex-direction:column; }
form label{ font-family:var(--mono); font-size:12.5px; color:var(--green); margin:0 0 .35rem; letter-spacing:.5px; }
form input, form textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  color:var(--text); font-family:var(--mono); font-size:14px;
  padding:11px 13px; margin:0 0 1.1rem; width:100%; resize:vertical;
  transition:border-color .18s, box-shadow .18s;
}
form input::placeholder, form textarea::placeholder{ color:var(--text-dim); }
form input:focus, form textarea:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(151,196,89,.14);
}
form button{ align-self:flex-start; }
.form-error{ min-height:1.2em; margin:-.6rem 0 .9rem; font-family:var(--mono); font-size:12.5px; color:var(--red); }
.form-error.ok{ color:var(--cyan); }
.direct{ display:flex; gap:1.25rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line-soft); }
.direct a{ font-family:var(--mono); font-size:13px; color:var(--cyan); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .18s, color .18s; }
.direct a:hover{ color:var(--green-hi); border-bottom-color:var(--green); }

/* ---------- footer ---------- */
.foot{
  max-width:var(--wrap); margin:0 auto; padding:2.5rem 1.5rem 3.5rem;
  font-family:var(--mono); font-size:12.5px; color:var(--text-dim);
  border-top:1px solid var(--line-soft);
}

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

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:3px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:1.75rem; }
  .hero-photo{ order:-1; align-items:flex-start; }
  .photo-frame{ width:132px; aspect-ratio:1/1; }
  .photo-cap{ align-self:flex-start; }
}

@media (max-width:720px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; width:100%; flex-direction:column; gap:.85rem; padding-top:.85rem;
  }
  .nav-links.open{ display:flex; }
  .hero{ padding:2.25rem 1rem 1rem; }
  .section{ padding:2.75rem 1rem; }
  .term-body{ padding:1.35rem 1.1rem 1.6rem; }
  .line{ font-size:13.5px; }
  .cred{ font-size:12.5px; }
  .scanlines{ display:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .section, .out{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  #matrix{ display:none; }
}

.orgs{ display:flex; flex-direction:column; gap:1rem; }

.org{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:1.25rem;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.15rem 1.35rem;
  transition:transform .22s, border-color .22s;
}
.org:hover{ transform:translateX(4px); border-color:var(--green-dim); }

.org-logo{
  width:78px; height:78px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-radius:8px;
  padding:9px;
  overflow:hidden;
}
.org-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

.org-head{
  display:flex; align-items:center; gap:.85rem;
  flex-wrap:wrap; margin-bottom:.3rem;
}
.org-head h3{
  font-family:var(--mono); font-size:1.12rem; font-weight:500;
  color:var(--green-hi); margin:0; letter-spacing:-.2px;
}

.status{
  font-family:var(--mono); font-size:11px; letter-spacing:.6px;
  padding:3px 10px; border-radius:3px; border:1px solid;
}
.status::before{ content:'['; } .status::after{ content:']'; }

.org[data-status="past"]{ border-left-color:var(--text-dim); }
.org[data-status="past"] .status{ color:var(--text-dim); border-color:var(--line); }
.org[data-status="now"]{ border-left-color:var(--green); }
.org[data-status="now"] .status{ color:var(--green); border-color:var(--green-dim); }
.org[data-status="next"]{ border-left-color:var(--amber); }
.org[data-status="next"] .status{ color:var(--amber); border-color:rgba(239,159,39,.4); }

.org-role{ font-family:var(--mono); font-size:13.5px; color:var(--cyan); margin:0 0 .15rem; }
.org-date{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); margin:0; letter-spacing:.4px; }

@media (max-width:600px){
  .org{ grid-template-columns:56px minmax(0,1fr); gap:1rem; padding:1rem; }
  .org-logo{ width:56px; height:56px; padding:6px; }
  .org-head h3{ font-size:1rem; }
}