/* ============================================================
   zakfarrington.com  —  rev.3  "disassembly / top-nav"
   a personal site, reverse-engineered
   ============================================================ */

:root {
  --bg:        #0b0d0f;
  --bg-2:      #0e1113;
  --panel:     #14181c;
  --panel-2:   #181d22;
  --line:      #232b32;
  --line-lit:  #36424c;
  --accent:    #5ed6c8;
  --accent-2:  #8ee9de;
  --amber:     #e0a458;
  --red:       #e0625a;
  --green:     #7bd88f;
  --text:      #c2cad1;
  --muted:     #79838d;
  --dim:       #4d565e;
  --heading:   #eef2f5;
  --mono:      'JetBrains Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;
  --disp:      'Space Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --body:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --navh:      60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(680px 420px at 88% -160px, rgba(94,214,200,0.09), transparent 72%),
    radial-gradient(520px 380px at 0% 4%, rgba(224,164,88,0.05), transparent 72%);
  background-attachment: fixed;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,0.045) 3px 5px);
  mix-blend-mode: multiply;
}

a { color: var(--accent); text-decoration: none; transition: color .14s ease; }
a:hover { color: var(--accent-2); }
strong { color: var(--heading); font-weight: 600; }
em { color: var(--text); }
ul, ol { list-style: none; }

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,13,15,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.tn-inner {
  max-width: 1160px;
  margin: 0 auto;
  height: var(--navh);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
}
.tn-brand { display: flex; align-items: center; gap: 10px; }
.tn-brand img { width: 28px; height: 28px; }
.tn-brand .bt { display: flex; flex-direction: column; line-height: 1.15; }
.tn-brand .bt b { font-family: var(--mono); font-size: .9rem; color: var(--heading); font-weight: 500; }
.tn-brand .bt span { font-family: var(--mono); font-size: .54rem; color: var(--amber); letter-spacing: 1.5px; }


.tn-links { margin-left: auto; display: flex; align-items: center; gap: 1px; }
.tn-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--text);
  padding: 7px 9px;
  border-radius: 5px;
}
.tn-links a .ad { color: var(--dim); font-size: .68rem; }
.tn-links a:hover { background: var(--panel); color: var(--accent); }
.tn-links a:hover .ad { color: var(--accent); }
.tn-links a.active { color: var(--accent); background: var(--panel); }
.tn-links a.active .ad { color: var(--amber); }

.tn-social { display: flex; align-items: center; gap: 5px; }
.tn-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 33px; height: 33px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
}
.tn-social a:hover { color: var(--accent); border-color: var(--line-lit); background: var(--panel); }
.tn-social svg { width: 15px; height: 15px; fill: currentColor; }

.tn-toggle {
  display: none;
  background: var(--bg-2);
  border: 1px solid var(--line-lit);
  color: var(--accent);
  width: 33px; height: 33px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  align-items: center; justify-content: center;
}

/* ============================================================
   MAIN
   ============================================================ */
.main { width: 100%; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 46px; }

section { padding: 30px 0; }
section[id] { scroll-margin-top: calc(var(--navh) + 14px); }
section:first-of-type { padding-top: 46px; }

/* segment header */
.seg {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  margin: 26px 0 22px;
  color: var(--accent);
  font-size: .8rem;
}
.seg .a0 { color: var(--dim); }
.seg h2 {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}
.seg .fill { flex: 1; height: 0; border-top: 1px dashed var(--line-lit); }
.seg .tail { color: var(--dim); white-space: nowrap; }

h3 { font-family: var(--disp); color: var(--heading); font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   HERO  /  ENTRY
   ============================================================ */
.hero { padding-top: 46px; }
.hero .ptr {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--muted);
  margin-bottom: 18px;
  cursor: pointer;
  width: fit-content;
}
.hero .ptr:hover { color: var(--text); }
.hero .ptr .c { color: var(--accent); }

.hero h1 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -1px;
  color: var(--heading);
  margin-bottom: 8px;
}
.hero h1 .sub {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(.85rem, 2vw, 1.05rem);
  letter-spacing: 0;
  color: var(--accent);
  margin-top: 12px;
}
.hero .lede {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 600px;
  margin: 20px 0 26px;
}
.hero .lede strong { color: var(--heading); }

/* glitch on the name — brief flicker every ~6s */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
.glitch::before { color: var(--accent); animation: g-a 6s infinite steps(1); }
.glitch::after  { color: var(--amber);  animation: g-b 6s infinite steps(1); }
@keyframes g-a {
  0%,86%,100% { opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); }
  87%   { opacity:.9;  transform:translate(-3px,-1px); clip-path:inset(10% 0 60% 0); }
  90%   { opacity:.8;  transform:translate(3px,1px);   clip-path:inset(46% 0 26% 0); }
  93%   { opacity:.85; transform:translate(-2px,1px);  clip-path:inset(70% 0 8% 0); }
  94.5% { opacity:0;   transform:translate(0); }
}
@keyframes g-b {
  0%,86%,100% { opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); }
  88%   { opacity:.75; transform:translate(3px,1px);   clip-path:inset(28% 0 46% 0); }
  91%   { opacity:.7;  transform:translate(-3px,-1px); clip-path:inset(58% 0 20% 0); }
  93.5% { opacity:.7;  transform:translate(2px,-1px);  clip-path:inset(6% 0 72% 0); }
  95%   { opacity:0;   transform:translate(0); }
}

/* ============================================================
   CONSOLE  —  hidden drop-down terminal (press ~ or click the nyan cat)
   ============================================================ */
.console {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  transform: translateY(-110%);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.console.open { transform: translateY(0); pointer-events: auto; }
.console.max .term { max-width: 1040px; }
.console.max .term-screen { height: min(72vh, 620px); }
.console.min .term-screen,
.console.min .term-input { display: none; }
.console.min .tt { cursor: pointer; }

.term {
  width: 100%;
  max-width: 680px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,0.62);
}
.term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.tdot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 9px/1 var(--mono);
  color: rgba(0,0,0,0.55);
}
.tdot-close { background: #e0625a; }
.tdot-min   { background: var(--amber); }
.tdot-max   { background: var(--green); }
.tdot::before { content: ""; }
.term-bar:hover .tdot-close::before { content: "\00d7"; }
.term-bar:hover .tdot-min::before   { content: "\2013"; }
.term-bar:hover .tdot-max::before   { content: "+"; }
.term-bar .tt { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-left: 8px; }
.term-x {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  font-family: var(--mono);
  font-size: .62rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.term-x:hover { color: var(--accent); border-color: var(--line-lit); }

.term-screen {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
  padding: 14px 16px 6px;
  height: 252px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-lit) transparent;
}
.term-screen::-webkit-scrollbar { width: 8px; }
.term-screen::-webkit-scrollbar-thumb { background: var(--line-lit); border-radius: 4px; }

.term-screen .ln { white-space: pre-wrap; word-break: break-word; }
.term-screen .echo { color: var(--muted); }
.term-screen .echo .p { color: var(--accent); }
.term-screen .ok { color: var(--text); }
.term-screen .ac { color: var(--accent); }
.term-screen .am { color: var(--amber); }
.term-screen .er { color: var(--red); }
.term-screen .dm { color: var(--dim); }
.term-screen a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.term-screen .sp { height: .55rem; }

.term-input {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 13px;
  font-family: var(--mono);
  font-size: .82rem;
}
.term-input .p { color: var(--accent); }
.term-input input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: .82rem;
  caret-color: var(--accent);
}
.term-input input::placeholder { color: var(--dim); }

/* ============================================================
   ABOUT
   ============================================================ */
.about { display: grid; grid-template-columns: 1fr 188px; gap: 34px; align-items: start; }
.about .lead { font-size: 1.08rem; color: var(--text); }
.about .lead strong { color: var(--accent); }
.portrait {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.portrait img {
  display: block; width: 100%;
  aspect-ratio: 4/5; object-fit: cover;
  border-radius: 6px;
}

/* glitch on the photo — one brief flicker the first time it scrolls into view */
.portrait::before,
.portrait::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  background: url('../assets/zak.jpg') center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
}
.portrait.seen::before { animation: pg-a 1.5s steps(1) 1; }
.portrait.seen::after  { animation: pg-b 1.5s steps(1) 1; }
@keyframes pg-a {
  0%,86%,100% { opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); filter:none; }
  87%   { opacity:.85; transform:translate(-6px,0); clip-path:inset(14% 0 62% 0); filter:hue-rotate(150deg) saturate(1.5); }
  90%   { opacity:.8;  transform:translate(6px,0);  clip-path:inset(50% 0 30% 0); filter:hue-rotate(150deg) saturate(1.5); }
  93%   { opacity:.8;  transform:translate(-4px,0); clip-path:inset(74% 0 10% 0); filter:hue-rotate(150deg) saturate(1.5); }
  94.5% { opacity:0; }
}
@keyframes pg-b {
  0%,86%,100% { opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); filter:none; }
  88%   { opacity:.7;  transform:translate(6px,0);  clip-path:inset(30% 0 52% 0); filter:hue-rotate(-25deg) saturate(1.7); }
  91%   { opacity:.65; transform:translate(-6px,0); clip-path:inset(60% 0 24% 0); filter:hue-rotate(-25deg) saturate(1.7); }
  93.5% { opacity:.65; transform:translate(4px,0);  clip-path:inset(10% 0 76% 0); filter:hue-rotate(-25deg) saturate(1.7); }
  95%   { opacity:0; }
}

/* certifications & awards strip */
.creds { margin-top: 22px; }
.creds-h {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin: 0 0 6px;
}
.creds ul { margin: 0; }
.creds li {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.55;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.creds li:last-child { border-bottom: none; }
.creds .yr { color: var(--amber); flex: none; }
.creds .t { color: var(--text); }
.creds .t a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line-lit);
}
.creds .t a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.cap { background: var(--panel); padding: 17px 19px; }
.cap:hover { background: var(--panel-2); }
.cap.wide { grid-column: 1 / -1; }
.cap .k {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--accent);
  letter-spacing: .5px;
  margin-bottom: 5px;
}
.cap .k .hx { color: var(--dim); }
.cap h3 { font-size: 1.05rem; margin-bottom: 4px; }
.cap p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ============================================================
   BUILD LOG
   ============================================================ */
.log { font-family: var(--mono); font-size: .86rem; }
.log li {
  display: grid;
  grid-template-columns: 78px 70px 1fr;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.log li:last-child { border-bottom: none; }
.log .date { color: var(--dim); }
.log .st {
  font-size: .62rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 0;
}
.log .st.wip { color: var(--amber); }
.log .st.live { color: var(--green); }
.log .st.archived { color: var(--dim); }
.log .what { font-family: var(--body); }
.log .what .nm { font-family: var(--mono); color: var(--heading); font-size: .86rem; }
.log .what a.nm:hover { color: var(--accent); }
.log .what .ds { color: var(--muted); font-size: .9rem; }

/* ============================================================
   MRA  feature
   ============================================================ */
.mra { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.mra-shot {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px;
  background: var(--bg-2);
  position: relative;
}
.mra-shot img {
  display: block; width: 100%;
  border-radius: 5px;
  image-rendering: pixelated;
}
.mra-shot .scan {
  position: absolute; inset: 8px;
  border-radius: 5px;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.16) 2px 4px);
}
.mra-shot .cap {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--dim);
  padding: 7px 2px 1px;
}
.mra-body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.mra-body p { font-size: .96rem; margin: 12px 0; }
.mra-body .mra-note {
  font-size: .72rem;
  color: var(--dim);
  line-height: 1.5;
  margin-top: 14px;
}

/* ============================================================
   OLD SCHOOL
   ============================================================ */
.retro {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(94,214,200,0.04) 46px 48px),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 30px;
}
.retro p { font-size: .98rem; }
.retro .lbl { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
.retro .tape { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.retro .chip {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 11px;
}
.retro .chip b { color: var(--amber); font-weight: 600; margin-right: 5px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-box {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 30px 32px;
}
.contact-box h3 { font-size: 1.6rem; margin-bottom: 8px; }
.contact-box p { color: var(--muted); max-width: 460px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: .82rem;
  padding: 11px 18px;
  border-radius: 6px;
  border: 1px solid var(--line-lit);
  transition: transform .12s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #06231f; border-color: var(--accent-2);
  box-shadow: 0 4px 18px rgba(94,214,200,0.2);
}
.btn-primary:hover { color: #06231f; box-shadow: 0 7px 24px rgba(94,214,200,0.32); }
.btn-ghost { background: var(--panel); color: var(--accent); }
.btn-ghost:hover { color: var(--accent-2); border-color: var(--accent); }
.btn-disabled { opacity: .45; pointer-events: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding: 22px 0 60px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  justify-content: space-between;
}
.foot .blink { color: var(--accent); animation: blink 1.2s steps(1) infinite; cursor: pointer; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   NYAN CAT  —  a wink at hax-studios.net
   ============================================================ */
.nyan-wrap {
  background: none; border: none; padding: 0; margin: 0;
  display: inline-flex; align-items: center;
  cursor: pointer; line-height: 0;
}
.nyan-wrap .rainbow {
  width: 22px; height: 14px;
  border-radius: 2px 0 0 2px;
}
.rainbow, .nyan-fly .trail {
  background: linear-gradient(180deg,
    #ff5b5b 0 16.66%, #ffae4d 16.66% 33.33%, #ffe24d 33.33% 50%,
    #5fd76a 50% 66.66%, #5aa9ff 66.66% 83.33%, #b07cff 83.33% 100%);
}
.nyan-wrap .cat { height: 22px; width: auto; display: block; margin-left: -1px; }
.nyan-wrap:hover .cat { filter: brightness(1.18); }
.nyan-bob { animation: nyanbob .42s steps(2) infinite; }
@keyframes nyanbob { 50% { transform: translateY(-2px); } }

.nyan-fly {
  position: fixed; top: 36%; left: 0;
  z-index: 9998; pointer-events: none;
  display: flex; align-items: center;
  animation: nyanfly 3.6s linear forwards;
}
@keyframes nyanfly {
  from { transform: translateX(-46vw); }
  to   { transform: translateX(112vw); }
}
.nyan-fly .trail { width: 44vw; height: 30px; }
.nyan-fly .cat { height: 46px; width: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .tn-toggle { display: inline-flex; }
  .tn-links {
    position: absolute;
    top: var(--navh); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 8px;
    margin-left: 0;
    display: none;
  }
  .topnav.open .tn-links { display: flex; }
  .tn-links a { padding: 11px; }
  .tn-social { margin-left: auto; }
}

@media (max-width: 920px) {
  .about { grid-template-columns: 1fr; gap: 22px; }
  .portrait { max-width: 200px; }
  .mra { grid-template-columns: 1fr; gap: 20px; }
  .caps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  .tn-inner { padding: 0 18px; }
  .seg .tail { display: none; }
  .about .portrait { max-width: 170px; }
  .log li { display: block; padding: 12px 4px; }
  .log .date { color: var(--dim); }
  .log .st { display: inline-block; margin-left: 10px; }
  .log .what { display: block; margin-top: 3px; }
  .term { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after,
  .portrait::before, .portrait::after { animation: none !important; opacity: 0; }
  .foot .blink, .nyan-bob { animation: none; }
  .console { transition: none; }
  html { scroll-behavior: auto; }
}