/* ─── TOKENS ────────────────────────────────────────────── */
:root{
  --bg:#0d1117;
  --fg:#e6e6e6;
  --accent:#00f1a3;
  --matrix:#8bffb2;
  --section-gap:6rem;
  --font:"JetBrains Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.5}
h1,h2{margin:0;font-weight:600}
a{color:var(--accent);text-decoration:none}

/* ─── HERO ─────────────────────────────────────────────── */
.hero{
  position:relative;height:100vh;display:flex;
  flex-direction:column;justify-content:center;align-items:center;
  text-align:center;overflow:hidden;padding:0 1.5rem;
}
#matrix{position:absolute;inset:0;z-index:-1;opacity:.55}
.hero h1{font-size:clamp(2.5rem,8vw,4.5rem);color:#fff;letter-spacing:1.5px}
.hero .subtitle{font-size:clamp(1rem,2.5vw,1.5rem);margin-top:1rem;
                color:var(--accent);opacity:.85}
.portrait{
  width:160px;

}

/* social icon row */
.social{
  margin-top:1rem;display:flex;gap:1.25rem;justify-content:center;
  font-size:1.75rem;
}
.social a{color:var(--accent);transition:opacity .25s}
.social a:hover{opacity:.7}

/* ─── SECTIONS ─────────────────────────────────────────── */
section{padding:var(--section-gap) 1.5rem;max-width:900px;margin:auto}
section:nth-of-type(even){background:#161b22}
section h2{font-size:1.6rem;margin-bottom:1.25rem;color:var(--accent)}

/* ─── TIMELINE LIST ───────────────────────────────────── */
.timeline{margin:0;padding:0;list-style:none;border-left:2px solid var(--accent)}
.timeline li{padding:1rem 0 1rem 1.25rem;position:relative}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:1rem;width:12px;height:12px;
  border-radius:50%;background:var(--accent)
}

/* ─── CURSOR ─────────────────────────────────────────── */
.cursor{display:inline-block;width:1ch;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ─── FOOTER ─────────────────────────────────────────── */
.footer{text-align:center;padding:2rem 1.5rem;font-size:.9rem;
        border-top:1px solid #21262d}
.footer a{color:var(--accent)}


/* neon app bar ---------------------------------------------------------- */
.appBar{
  margin-top:3.5rem;
  display:flex;
  gap:1.5rem;
  padding:.6rem 1.2rem;

  border-radius:8px;

}
.appBar img{
  display:block;
  transition:transform .25s;
}
.appBar a:hover img{transform:scale(1.1);}


/* scrolling hint image -------------------------------------------------- */
.scrollHint{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.scrollHint img{
  animation:pulse 2s infinite;
}

/* subtle size pulse */
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.6}
  50%    {transform:scale(1.2);opacity:1}
}