/* ============================================================
   KERNZ PORTFOLIO — style.css
   ============================================================ */

/* ── RESET & BASE ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;cursor:none;}

:root {
  --bg:       #060810;
  --bg2:      #0c0f1a;
  --panel:    #0f1322;
  --cyan:     #00e5ff;
  --cyan2:    #00b8d4;
  --green:    #39ff14;
  --amber:    #ffaa00;
  --red:      #ff3b5c;
  --dim:      rgba(0,229,255,0.18);
  --dimtxt:   rgba(0,229,255,0.45);
  --ink:      #cdd6f4;
  --ink2:     #6272a4;
  --mono:     'JetBrains Mono', monospace;
  --display:  'Bebas Neue', sans-serif;
  --scanline: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.18) 2px,rgba(0,0,0,0.18) 4px);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle, rgba(0,229,255,0.09) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: none;
  user-select: none;
}
.cr-link, .modal-url { user-select: text; }

/* ── SCANLINES overlay ── */
body::before {
  content:''; position:fixed; inset:0;
  background: var(--scanline);
  pointer-events:none; z-index:1000;
  opacity:.35;
}

/* ── CRT vignette ── */
body::after {
  content:''; position:fixed; inset:0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.85) 100%);
  pointer-events:none; z-index:999;
}

/* ── CURSOR ── */
#cur { position:fixed; width:12px; height:12px; background:var(--cyan); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:screen; transition:width .15s,height .15s; }
#cur2 { position:fixed; width:40px; height:40px; border:1px solid var(--dimtxt); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:all .3s cubic-bezier(.16,1,.3,1); }
body:has(a:hover) #cur { width:20px; height:20px; }
body:has(a:hover) #cur2 { width:60px; height:60px; border-color:var(--cyan2); }

/* ── PARTICLES canvas ── */
#particles { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ── KEYFRAMES ── */
@keyframes glitch1 {
  0%,94%,100%{clip-path:inset(0 0 100% 0);}
  95%{clip-path:inset(20% 0 60% 0); transform:translateX(-4px);}
  97%{clip-path:inset(50% 0 30% 0); transform:translateX(4px);}
  99%{clip-path:inset(70% 0 10% 0); transform:translateX(-2px);}
}
@keyframes glitch2 {
  0%,92%,100%{clip-path:inset(0 0 100% 0);}
  93%{clip-path:inset(60% 0 10% 0); transform:translateX(3px);}
  96%{clip-path:inset(10% 0 70% 0); transform:translateX(-3px);}
  98%{clip-path:inset(40% 0 40% 0); transform:translateX(2px);}
}
@keyframes blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes scanH {
  0%{transform:translateY(-100%);}
  100%{transform:translateY(100vh);}
}
@keyframes flicker {
  0%,97%,100%{opacity:1;}
  98%{opacity:.85;}
  99%{opacity:.95;}
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}
@keyframes typeIn {
  from{max-width:0;}
  to{max-width:100%;}
}
@keyframes pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0);}
  50%{box-shadow:0 0 16px 2px rgba(0,229,255,0.25);}
}
@keyframes noise {
  0%{transform:translate(0,0);}
  10%{transform:translate(-2px,1px);}
  20%{transform:translate(2px,-1px);}
  30%{transform:translate(-1px,2px);}
  40%{transform:translate(1px,-2px);}
  50%{transform:translate(-2px,0);}
  60%{transform:translate(2px,1px);}
  70%{transform:translate(0,-1px);}
  80%{transform:translate(-1px,2px);}
  90%{transform:translate(1px,0);}
  100%{transform:translate(0,0);}
}
@keyframes scroll-pulse {
  0%,100%{ opacity:.25; transform:scaleY(1);   transform-origin:top; }
  50%    { opacity:1;   transform:scaleY(.55); transform-origin:top; }
}
@keyframes fab-intro {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:none; }
}
@keyframes fab-pulse {
  0%,100% { box-shadow:0 0 24px rgba(0,229,255,0.15); }
  50%     { box-shadow:0 0 40px rgba(0,229,255,0.35); }
}
@keyframes kglitch1 {
  0%,88%,100%{ clip-path:inset(0 0 100% 0); transform:translate(0,0); }
  89%{ clip-path:inset(10% 0 60% 0); transform:translate(-4px,0); }
  91%{ clip-path:inset(55% 0 15% 0); transform:translate( 4px,0); }
  93%{ clip-path:inset(28% 0 42% 0); transform:translate(-2px,0); }
  95%{ clip-path:inset(0  0 100% 0); transform:translate(0,0); }
}
@keyframes kglitch2 {
  0%,86%,100%{ clip-path:inset(0 0 100% 0); transform:translate(0,0); }
  87%{ clip-path:inset(45% 0 18% 0); transform:translate( 3px,0); }
  90%{ clip-path:inset(5%  0 68% 0); transform:translate(-3px,0); }
  92%{ clip-path:inset(70% 0 5%  0); transform:translate( 2px,0); }
  94%{ clip-path:inset(0   0 100% 0); transform:translate(0,0); }
}

/* ── SCAN BEAM ── */
.scan-beam {
  position:fixed; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.12; pointer-events:none; z-index:998;
  animation: scanH 8s linear infinite;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--dim);
  background:rgba(6,8,16,0.85);
  backdrop-filter:blur(12px);
  animation:flicker 8s infinite;
}
.nav-logo {
  display:inline-block; position:relative;
  width:40px; height:40px;
  text-decoration:none;
}
.nav-logo-img {
  display:block; width:40px; height:40px;
  object-fit:contain;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.55));
  position:relative; z-index:1;
}
.nav-logo::before,.nav-logo::after {
  content:''; position:absolute; inset:0;
  background:url('images/K.png') center/contain no-repeat;
  mix-blend-mode:screen;
  pointer-events:none;
}
.nav-logo::before {
  filter:hue-rotate(165deg) saturate(6) brightness(1.4);
  animation:kglitch1 5s infinite;
}
.nav-logo::after {
  filter:hue-rotate(300deg) saturate(6) brightness(1.4);
  animation:kglitch2 5s infinite 0.07s;
}
.nav-status {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  font-size:10px; color:var(--dimtxt); letter-spacing:.1em;
}
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
.nav-links { display:flex; gap:28px; }
.nav-links a {
  font-size:11px; color:var(--ink2); text-decoration:none;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .2s;
  position:relative;
}
.nav-links a::before { content:'./'; color:var(--cyan); opacity:0; transition:opacity .2s; }
.nav-links a:hover { color:var(--cyan); }
.nav-links a:hover::before { opacity:1; }

/* ── HERO ── */
#hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:100px 48px 80px;
  position:relative; z-index:10;
}
.hero-prompt {
  font-size:11px; color:var(--dimtxt); letter-spacing:.12em;
  margin-bottom:24px;
  opacity:0; animation:fadeUp .6s .3s forwards;
}
.hero-prompt span { color:var(--green); }
.hero-ascii {
  font-family:var(--display);
  font-size:clamp(80px,14vw,180px);
  line-height:.88; letter-spacing:.04em;
  color:var(--ink);
  position:relative;
  opacity:0; animation:fadeUp .7s .5s forwards;
  will-change:transform;
}
.hero-ascii .line-cyan { color:var(--cyan); text-shadow:0 0 40px rgba(0,229,255,0.4); }
.hero-ascii .line-dim  { color:var(--ink2); }
.hero-glitch-wrap { position:relative; display:inline-block; }
.hero-glitch-wrap::before,.hero-glitch-wrap::after {
  content:attr(data-text); position:absolute; inset:0;
  font-family:var(--display);
}
.hero-glitch-wrap::before { color:var(--red); animation:glitch1 4s infinite 1s; }
.hero-glitch-wrap::after  { color:var(--green); animation:glitch2 4s infinite 1.2s; }
.hero-typing {
  margin-top:40px;
  font-size:13px; color:var(--dimtxt); line-height:1.9;
  max-width:520px;
  opacity:0; animation:fadeUp .7s .9s forwards;
}
.hero-typing .prompt-line { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.hero-typing .p { color:var(--green); }
.hero-typing .cmd { color:var(--cyan); }
.hero-typing .out { color:var(--ink2); padding-left:16px; }
.caret { display:inline-block; width:8px; height:14px; background:var(--cyan); animation:blink .9s infinite; vertical-align:middle; margin-left:2px; }
.hero-cta {
  margin-top:48px;
  display:inline-flex; align-items:center; gap:16px;
  align-self:flex-start;
  border:1px solid var(--dim); padding:14px 28px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); text-decoration:none;
  transition:background .25s,border-color .25s,box-shadow .25s;
  opacity:0; animation:fadeUp .6s 1.2s forwards;
  position:relative; overflow:hidden;
}
.hero-cta::before {
  content:''; position:absolute; left:-100%; top:0; bottom:0; width:100%;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,0.08),transparent);
  transition:left .4s;
}
.hero-cta:hover::before { left:100%; }
.hero-cta:hover { border-color:var(--cyan); box-shadow:0 0 24px rgba(0,229,255,0.2); }

/* ── HERO GRID ── */
.hero-grid { display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:center; width:100%; max-width:1300px; margin:0 auto; }
.hero-left  { display:flex; flex-direction:column; }
.hero-right { opacity:0; animation:fadeUp .8s 1.1s forwards; }
.hero-left, .hero-right { transition: transform .55s cubic-bezier(.16,1,.3,1); }
#hero.term-hero-open .hero-left  { transform: translateX(-22vw); }
#hero.term-hero-open .hero-right { transform: translateX(22vw);  }

/* ── SCROLL HINT ── */
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--dimtxt); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; animation:fadeUp .6s 2.2s forwards;
}
.scroll-hint-line {
  width:1px; height:36px;
  background:linear-gradient(to bottom,var(--cyan),transparent);
  animation:scroll-pulse 2s ease-in-out infinite;
}
.scroll-hint-text { font-family:var(--mono); }

/* ── CONTACT GLITCH ── */
.cg-line { position:relative; display:inline-block; }
.cg-line::before { content:attr(data-text); position:absolute; inset:0; color:var(--red);   animation:glitch1 5s infinite 0.3s; }
.cg-line::after  { content:attr(data-text); position:absolute; inset:0; color:var(--green); animation:glitch2 5s infinite 0.6s; }

/* ── PROJECTS ── */
#projects { position:relative; z-index:10; padding:80px 48px 120px; }
.section-header {
  display:flex; align-items:center; gap:16px;
  margin-bottom:56px;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s,transform .7s;
}
.section-header.visible { opacity:1; transform:none; }
.sh-line { flex:1; height:1px; background:var(--dim); }
.sh-label { font-size:10px; color:var(--dimtxt); letter-spacing:.18em; text-transform:uppercase; }
.sh-bracket { color:var(--cyan); }
.project-grid { display:flex; flex-direction:column; gap:2px; }
.proj {
  display:grid; grid-template-columns:60px 1fr;
  align-items:start; gap:24px;
  padding:32px 24px;
  border:1px solid transparent;
  text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  cursor:none;
  opacity:0; transform:translateX(-20px);
  transition:opacity .6s, transform .6s, border-color .3s, background .3s;
  --mx:50%; --my:50%;
}
.proj.visible { opacity:1; transform:none; }
.proj::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--cyan); transform:scaleY(0);
  transform-origin:bottom; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.proj:hover {
  border-color:var(--dim);
  background:radial-gradient(500px circle at var(--mx) var(--my), rgba(0,229,255,0.05), transparent 65%);
}
.proj:hover::before { transform:scaleY(1); }
.proj-num { font-size:11px; color:var(--ink2); letter-spacing:.08em; padding-top:8px; }
.proj-name-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.proj-name {
  font-family:var(--display); font-size:clamp(28px,4vw,52px);
  letter-spacing:.06em; color:var(--ink); line-height:1;
  transition:color .25s,text-shadow .25s;
}
.proj:hover .proj-name { color:var(--cyan); text-shadow:0 0 30px rgba(0,229,255,0.35); }
.proj-open-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--dim); padding:8px 16px;
  font-size:10px; letter-spacing:.12em; color:var(--dimtxt);
  text-transform:uppercase; background:transparent;
  cursor:none; font-family:var(--mono);
  transition:all .25s;
}
.proj:hover .proj-open-btn {
  border-color:var(--cyan); color:var(--cyan);
  box-shadow:0 0 16px rgba(0,229,255,0.2);
  background:rgba(0,229,255,0.05);
}
.proj-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.proj-tag {
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink2); border:1px solid var(--dim);
  padding:3px 8px;
}
.proj-desc { font-size:11px; color:var(--ink2); margin-top:8px; line-height:1.7; max-width:560px; }
.proj.upcoming { opacity:.25; pointer-events:none; }
.proj.upcoming .proj-name { font-style:italic; letter-spacing:.02em; }

/* ── PREVIEW MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(6,8,16,0.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  width:min(1400px,94vw); height:min(900px,90vh);
  border:1px solid var(--dim);
  display:flex; flex-direction:column;
  transform:scale(.94); transition:transform .35s cubic-bezier(.16,1,.3,1);
  background:var(--panel);
}
.modal-overlay.open .modal-box { transform:scale(1); }
.modal-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--dim);
  background:rgba(0,229,255,0.04); flex-shrink:0;
}
.modal-url { font-size:10px; color:var(--dimtxt); letter-spacing:.08em; }
.modal-actions { display:flex; gap:8px; align-items:center; }
.modal-ext {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; color:var(--cyan); letter-spacing:.1em;
  text-decoration:none; border:1px solid var(--dim); padding:4px 10px;
  transition:all .2s;
}
.modal-ext:hover { background:rgba(0,229,255,0.08); border-color:var(--cyan); }
.modal-close {
  width:28px; height:28px; background:transparent;
  border:1px solid var(--dim); color:var(--ink2);
  display:flex; align-items:center; justify-content:center;
  cursor:none; font-size:14px; transition:all .2s;
}
.modal-close:hover { border-color:var(--red); color:var(--red); }
.modal-frame { flex:1; border:none; background:var(--bg2); }

/* ── ABOUT ── */
#about { position:relative; z-index:10; padding:80px 48px; }
.terminal-window {
  border:1px solid var(--dim); background:var(--panel);
  max-width:860px; margin:0 auto;
  opacity:0; transform:translateY(30px);
  transition:opacity .8s,transform .8s;
}
.terminal-window.visible { opacity:1; transform:none; }
.term-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-bottom:1px solid var(--dim);
  background:rgba(0,229,255,0.04);
}
.term-dot { width:10px; height:10px; border-radius:50%; }
.td1 { background:var(--red); }
.td2 { background:var(--amber); }
.td3 { background:var(--green); }
.term-title { font-size:10px; color:var(--ink2); letter-spacing:.1em; margin-left:8px; }
.term-body { padding:24px 28px; font-size:12px; line-height:2; }
.tl { display:flex; gap:12px; }
.tl-p { color:var(--green); flex-shrink:0; }
.tl-cmd { color:var(--cyan); }
.tl-arg { color:var(--amber); }
.tl-out { color:var(--ink2); padding-left:24px; }
.tl-key { color:var(--cyan); min-width:120px; display:inline-block; }
.tl-val { color:var(--ink); }
.tl-comment { color:var(--ink2); opacity:.5; }
.tl-section { color:var(--dimtxt); letter-spacing:.1em; font-size:10px; margin:8px 0 4px; }

/* ── CONTACT ── */
#contact { position:relative; z-index:10; padding:80px 48px 120px; }
.contact-glitch {
  font-family:var(--display);
  font-size:clamp(52px,10vw,130px);
  line-height:.9; letter-spacing:.04em;
  position:relative; display:inline-block;
  opacity:0; transform:translateY(30px);
  transition:opacity .8s,transform .8s;
}
.contact-glitch.visible { opacity:1; transform:none; }
.contact-glitch a { color:var(--ink); text-decoration:none; transition:color .3s; }
.contact-glitch a:hover { color:var(--cyan); text-shadow:0 0 40px rgba(0,229,255,0.4); }
.contact-row {
  display:flex; align-items:center; gap:24px; margin-top:40px;
  font-size:11px; color:var(--ink2); letter-spacing:.1em;
  opacity:0; transition:opacity .8s .2s;
}
.contact-row.visible { opacity:1; }
.cr-sep { width:1px; height:16px; background:var(--dim); }
.cr-link { color:var(--cyan); text-decoration:none; }
.cr-link:hover { text-decoration:underline; }

/* ── CURSOR VARIANTS ── */
body.c-cross #cur { width:1px; height:28px; border-radius:0; background:var(--cyan); box-shadow:0 0 8px rgba(0,229,255,0.5); }
body.c-cross #cur::before {
  content:''; position:absolute;
  width:28px; height:1px; background:var(--cyan);
  top:50%; left:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(0,229,255,0.5);
}
body.c-cross #cur2 { display:none; }
body.c-brackets #cur { width:26px; height:26px; background:transparent; border-radius:0; }
body.c-brackets #cur::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0    0   /7px 1.5px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0    0   /1.5px 7px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0   /7px 1.5px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0   /1.5px 7px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0    100%/7px 1.5px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0    100%/1.5px 7px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/7px 1.5px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/1.5px 7px no-repeat;
}
body.c-brackets #cur2 { display:none; }
body.c-block #cur { width:10px; height:18px; border-radius:0; background:var(--cyan); animation:blink .9s infinite; box-shadow:0 0 10px rgba(0,229,255,0.6); }
body.c-block #cur::before { display:none; }
body.c-block #cur2 { display:none; }
body.c-trail #cur2 { display:none; }

/* ── TERMINAL HERO MODE ── */
.cmd-overlay.hero-mode {
  position: absolute;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.cmd-overlay.hero-mode .cmd-box {
  pointer-events: all;
  width: min(820px, 52vw);
  max-height: 78vh;
  transform: translateX(10vw) scale(0.94);
}
.cmd-overlay.hero-mode.open .cmd-box {
  transform: translateX(10vw) scale(1);
}

/* ── TERMINAL ── */
.cmd-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(6,8,16,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s;
  backdrop-filter:blur(6px);
}
.cmd-overlay.open { opacity:1; pointer-events:all; }
.cmd-box {
  width:min(760px,92vw); max-height:70vh;
  border:1px solid var(--dim); background:var(--panel);
  display:flex; flex-direction:column;
  position: relative;
}
.cmd-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--dim);
  background:rgba(0,229,255,0.04); flex-shrink:0;
}
.cmd-title { font-size:10px; color:var(--dimtxt); letter-spacing:.1em; }
.cmd-close {
  width:28px; height:28px; background:transparent;
  border:1px solid var(--dim); color:var(--ink2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .2s; flex-shrink:0;
}
.cmd-close:hover { border-color:var(--red); color:var(--red); }
.cmd-history {
  flex:1; overflow-y:auto; padding:20px 24px;
  font-size:12px; line-height:1.85;
  scrollbar-width:thin; scrollbar-color:var(--dim) transparent;
}
.cmd-echo    { display:flex; gap:10px; }
.cmd-out     { padding-left:4px; color:var(--ink2); }
.cmd-out.pre { white-space:pre; font-size:clamp(6px, 0.9vw, 11px); line-height:1.35; }
.cmd-out.cy  { color:var(--cyan); }
.cmd-out.gr  { color:var(--green); }
.cmd-out.am  { color:var(--amber); }
.cmd-out.rd  { color:var(--red); }
.cmd-out.dm  { color:var(--ink2); opacity:.45; }
.cmd-input-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 24px; border-top:1px solid var(--dim); flex-shrink:0;
}
.cmd-ps  { font-size:12px; white-space:nowrap; flex-shrink:0; }
.cmd-input-wrap { position:relative; flex:1; display:flex; align-items:center; }
.cmd-field {
  width:100%; padding:0; background:transparent; border:none; outline:none;
  font-family:var(--mono); font-size:12px; color:var(--ink);
  caret-color:var(--cyan); user-select:text; position:relative; z-index:1;
}
.cmd-ghost-layer {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:12px;
  pointer-events:none; white-space:pre; line-height:1;
}
#cmd-ghost-typed  { color:transparent; }
#cmd-ghost-suffix { color:rgba(0,229,255,0.28); }
.term-hint {
  font-size:10px; color:var(--ink2); letter-spacing:.1em;
  border:1px solid var(--dim); padding:4px 10px;
  transition:all .2s; cursor:pointer; background:transparent; font-family:var(--mono);
}
.term-hint:hover { color:var(--cyan); border-color:var(--cyan); }
.term-hint kbd { color:var(--cyan); font-family:var(--mono); }
.term-fab {
  position:fixed; bottom:28px; right:28px; z-index:300;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--cyan2); padding:10px 18px;
  background:rgba(6,8,16,0.88); backdrop-filter:blur(8px);
  color:var(--cyan); font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; cursor:none;
  box-shadow:0 0 24px rgba(0,229,255,0.15);
  transition:box-shadow .4s, border-color .3s, opacity .5s, transform .5s;
  opacity:0; transform:translateY(12px);
}
.term-fab:hover { box-shadow:0 0 36px rgba(0,229,255,0.3); border-color:var(--cyan); }
.term-fab.dimmed { opacity:.35; }
.term-fab.dimmed:hover { opacity:1; }
.term-fab-icon { width:14px; height:14px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.term-fab-icon span { display:block; height:1.5px; background:var(--cyan); }
.term-fab-icon span:nth-child(2) { width:60%; }

/* ── FOOTER ── */
footer {
  position:relative; z-index:10;
  border-top:1px solid var(--dim);
  padding:20px 48px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; color:var(--ink2); letter-spacing:.1em;
}

/* ── RESPONSIVE ── */
@media(max-width:1600px){
  #hero.term-hero-open .hero-left  { transform: none; }
  #hero.term-hero-open .hero-right { transform: none; }
  .cmd-overlay.hero-mode             { background: rgba(6,8,16,0.80); backdrop-filter:blur(8px); }
  .cmd-overlay.hero-mode .cmd-box      { width:min(88vw,720px); transform:translateX(0) scale(.94); }
  .cmd-overlay.hero-mode.open .cmd-box { transform:translateX(0) scale(1); }
}
@media(max-width:1200px){
  .hero-grid { gap:32px; }
}
@media(max-width:1024px){
  .hero-grid { grid-template-columns:1fr; }
  .hero-right { display:none; }
}
@media(max-width:768px){
  nav { padding:14px 20px; }
  .nav-links { display:none; }
  .nav-status { display:none; }
  #hero { padding:90px 20px 60px; }
  #projects,#about,#contact { padding-left:20px; padding-right:20px; }
  .proj { grid-template-columns:40px 1fr; }
  .proj-cta { display:none; }
  .scroll-hint { display:none; }
  footer { padding:16px 20px; flex-direction:column; gap:8px; }
}
@media(max-width:768px){
  .modal-box { width:100vw; height:100dvh; border:none; }
  .modal-overlay { align-items:flex-end; }
}
