/* ── hlixli · terminal portfolio ─────────────────────────── */

/* ── web font (self-hosted) — identical rendering on every device ─ */
/* JetBrains Mono, variable weight axis. Local files, no third-party CDN. */
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2");
  font-weight:100 800;
  font-style:italic;
  font-display:swap;
}

:root{
  /* GitHub Light — terminal ANSI palette on white */
  --bg:     #ffffff;   /* page                          */
  --ink:    #1f2328;   /* default text  (fg.default)    */
  --ink-hi: #24292f;   /* bold / emphasis               */
  --dim:    #6e7781;   /* comments / muted (ansi white) */
  --prompt: #cf222e;   /* shell prompt  (ansi red)      */
  --cmd:    #0969da;   /* typed command (blue)          */
  --accent: #8250df;   /* ## headers    (magenta)       */
  --key:    #1b7c83;   /* table keys    (cyan)          */
  --tag:    #6e7781;   /* [tags] / // notes (grey)      */
  --link:   #0969da;   /* links         (blue)          */
  --caret:  #cf222e;   /* expand caret  (ansi red)      */
  --rule:   #d0d7de;   /* faint separators (border)     */
  --glow:   none;      /* flat, no glow                 */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono",
               Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:15px;
  line-height:1.65;
  min-height:100vh;
  padding:48px 32px;
}

/* content column — just margins, no window chrome */
.term{ max-width:760px; margin:0 auto; }
.screen{ padding:0; }

/* ── blocks / prompts ────────────────────────────────────── */
.block{ margin-bottom:26px; }

/* command line: prompt = green, typed command = blue */
.cmd{
  color:var(--cmd);
  font-weight:600;
  word-break:break-word;
}
.prompt{
  color:var(--prompt);
  text-shadow:var(--glow);
  font-weight:600;
  margin-right:8px;
  user-select:none;
}

/* command output */
.out{
  margin:7px 0 0;
  padding:0 0 0 16px;
  border-left:2px solid var(--rule);
  color:var(--ink);
}
.out p{ margin:0 0 5px; }
.out p:last-child{ margin-bottom:0; }
.out b{ font-weight:700; color:var(--ink-hi); }
.out i{ font-style:italic; }
.dim{ color:var(--dim); }

/* project title  (# Name) */
.h{ font-weight:700; font-size:1.05em; color:var(--ink-hi); margin-bottom:8px !important; }
/* sub-headers   (## section) */
.sub{ color:var(--accent); margin-top:14px !important; font-weight:700; }
/* markdown blockquote (>) */
.quote{ margin:2px 0 0 !important; padding-left:12px; border-left:3px solid var(--rule); color:var(--dim); font-style:italic; }
/* markdown rule (---) */
hr.rule{ border:0; border-top:1px solid var(--rule); margin:12px 0; }
/* [tags] and // inline notes */
.tag{ color:var(--tag); font-weight:600; font-size:.9em; }

/* lists */
.out ul{ list-style:none; margin:5px 0; }
.out li{ position:relative; padding-left:18px; }
.out li::before{ content:"-"; position:absolute; left:2px; color:var(--dim); }

/* ── tables (skills / contact) ───────────────────────────── */
table.skills{ border-collapse:collapse; width:100%; }
table.skills td{ padding:3px 0; vertical-align:top; }
table.skills .key{
  color:var(--key);
  font-weight:700;
  white-space:nowrap;
  padding-right:18px;
  width:1%;
}

/* ── links ───────────────────────────────────────────────── */
a{
  color:var(--link);
  text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1px;
  padding-bottom:2px;
  transition:background-size .28s ease;
}
a:hover, a:focus-visible{ background-size:100% 1px; }
@media (prefers-reduced-motion: reduce){
  a{ transition:none; }
  a:hover, a:focus-visible{ background-size:100% 1px; }
}

/* ── live prompt + cursor ────────────────────────────────── */
.live{ margin-top:6px; }
.cursor{
  display:inline-block;
  margin-left:1px;
  color:var(--prompt);
  text-shadow:var(--glow);
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cursor{ animation:none; } }

/* ── collapsible sections (skills / projects) ────────────── */
.toggle{ cursor:pointer; }
.toggle:hover .caret{ color:var(--cmd); }
.toggle:focus-visible{ outline:2px solid var(--cmd); outline-offset:3px; border-radius:2px; }

.caret{
  display:inline-block;
  margin-left:8px;
  color:var(--caret);
  font-size:.85em;
  transition:transform .3s cubic-bezier(.4,0,.2,1), color .2s ease;
}
.fold-block.open .caret{ transform:rotate(90deg); }
.caret-hint{ color:var(--caret); }

/* grid-rows height animation — collapsed by default */
.fold{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1);
}
.fold > .out{
  overflow:hidden;
  min-height:0;
  margin:0;
  padding:0 0 0 16px;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s ease, transform .3s ease;
}
.fold-block.open .fold{ grid-template-rows:1fr; }
.fold-block.open .fold > .out{
  opacity:1;
  transform:none;
  padding-top:7px;
  padding-bottom:2px;
}

/* ── load entrance (subtle staggered fade-up) ────────────── */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.block, .live{ animation:fadeUp .5s ease both; }
.block:nth-of-type(1){ animation-delay:.05s; }
.block:nth-of-type(2){ animation-delay:.11s; }
.block:nth-of-type(3){ animation-delay:.17s; }
.block:nth-of-type(4){ animation-delay:.23s; }
.block:nth-of-type(5){ animation-delay:.29s; }
.block:nth-of-type(6){ animation-delay:.35s; }
.block:nth-of-type(7){ animation-delay:.41s; }
.live{ animation-delay:.47s; }

@media (prefers-reduced-motion: reduce){
  .block, .live{ animation:none; }
  .caret, .fold, .fold > .out{ transition:none; }
}

/* ── small screens ───────────────────────────────────────── */
@media (max-width:480px){
  body{ padding:24px 16px; font-size:14px; }
}