/* v3 — Terminal (retro mono, CRT) */
:root {
  --bg: #050805;
  --green: #33ff99;
  --green-dim: #1f9a5f;
  --green-faint: #14643d;
  --amber: #ffcc66;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 50px; }
body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--green);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 0 6px rgba(51, 255, 153, 0.35);
}
::selection { background: var(--green); color: #000; }
a { color: inherit; text-decoration: none; }

/* CRT layers */
.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.crt-vignette {
  position: fixed; inset: 0; z-index: 51; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%);
}
#rain { position: fixed; inset: 0; z-index: -1; opacity: 0.5; }

/* status bar */
.statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; font-size: 12px;
  background: #020402; border-bottom: 1px solid var(--green-faint);
  color: var(--green-dim);
}
.statusbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.statusbar__right { margin-left: auto; }

/* terminal */
.term {
  max-width: 880px; margin-inline: auto;
  padding: 70px 22px 60px;
}
.block { padding: 28px 0; border-top: 1px dashed var(--green-faint); }
.block:first-child { border-top: none; }

.ascii {
  font-size: clamp(0.55rem, 1.6vw, 0.95rem);
  line-height: 1.15; color: var(--green);
  margin: 10px 0 26px;
  white-space: pre; overflow-x: auto;
  text-shadow: 0 0 10px rgba(51,255,153,0.6);
}

.line { margin: 10px 0; }
.prompt { color: var(--amber); }
.cmd { color: var(--green); }
.out { color: var(--green-dim); margin: 4px 0 18px; max-width: 720px; }
.out.type { min-height: 1.6em; }
.caret { animation: blink 1s step-end infinite; }

.hdr { color: var(--green-faint); margin: 22px 0 16px; white-space: pre; overflow-x: auto; }

.contact-out { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 20px; }
.contact-out a { color: var(--green); border-bottom: 1px dashed var(--green-faint); transition: color 0.2s, text-shadow 0.2s; }
.contact-out a:hover { color: #fff; text-shadow: 0 0 12px var(--green); }

.navline { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; }
.navline a { color: var(--green-dim); transition: color 0.2s; }
.navline a:hover { color: var(--green); }

/* skills grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; }
.cell { padding: 8px 0; }
.key { color: var(--amber); font-size: 14px; }
.val { color: var(--green-dim); font-size: 14px; }

/* entries */
.entry { margin: 18px 0; }
.meta { color: var(--green-faint); font-size: 13px; }
.role { color: var(--green); font-weight: 600; margin: 4px 0; }
.txt { color: var(--green-dim); max-width: 720px; }
.tags { color: var(--green-faint); font-size: 13px; margin-top: 6px; }

/* projects */
.projects { display: flex; flex-direction: column; }
.proj {
  display: grid; grid-template-columns: 220px 1fr auto; gap: 14px; align-items: baseline;
  padding: 12px 4px; border-bottom: 1px solid var(--green-faint); transition: background 0.2s, padding-left 0.2s;
}
.proj:hover { background: rgba(51,255,153,0.06); padding-left: 12px; }
.proj__name { color: var(--green); font-weight: 600; }
.proj__desc { color: var(--green-dim); font-size: 14px; }
.proj__tag { color: var(--green-faint); font-size: 12px; }

.certs { list-style: none; margin: 6px 0; }
.certs li { color: var(--green-dim); padding: 3px 0; }
.certs li::before { content: "> "; color: var(--green-faint); }

.footer { border-top: 1px dashed var(--green-faint); }
.footer .prompt a { color: var(--amber); }

/* boot sequence hidden by default */
.boot { display: none; }

/* reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s, transform 0.6s; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .proj { grid-template-columns: 1fr; gap: 2px; }
  .statusbar__right.hide-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}