/* ==========================================================================
   THEME: SENTINEL — defense-tech personal site
   Minimalist single-screen terminal, progressive disclosure via commands.
   ========================================================================== */

:root{
  --bg:            #050806;
  --bg-alt:        #080c0a;
  --panel:         #0b1210;
  --panel-2:       #0e1613;
  --line:          rgba(90, 255, 170, 0.14);
  --line-strong:   rgba(90, 255, 170, 0.32);
  --accent:        #39ff9c;
  --accent-dim:    #1f8a56;
  --amber:         #ffb020;
  --red:           #ff4d4d;
  --text:          #d9e8e0;
  --text-dim:      #7d938a;
  --text-faint:    #4c5d57;
  --font-mono:     'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-head:     'Rajdhani', 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }

html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

::selection{ background:var(--accent); color:#04120a; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; letter-spacing:.02em; margin:0; color:#eef7f1; }
p{ margin:0 0 1em; }
img{ max-width:100%; display:block; }

/* ---------------------------------------------------------------------- */
/* background layers: grid + scanline + vignette + HUD corners            */
/* ---------------------------------------------------------------------- */

#tac-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.75;
}

.grid-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.9), transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.9), transparent 75%);
  opacity:.55;
}

.scanline{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px);
  opacity:.5;
  mix-blend-mode:overlay;
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0,0,0,.65) 100%);
}

.hud-corners span{
  position:fixed; width:26px; height:26px;
  border:1px solid var(--line-strong);
  z-index:5; pointer-events:none;
}
.hud-corners .tl{ top:18px; left:18px; border-right:none; border-bottom:none; }
.hud-corners .tr{ top:18px; right:18px; border-left:none; border-bottom:none; }
.hud-corners .bl{ bottom:18px; left:18px; border-right:none; border-top:none; }
.hud-corners .br{ bottom:18px; right:18px; border-left:none; border-top:none; }

/* ---------------------------------------------------------------------- */
/* boot overlay                                                            */
/* ---------------------------------------------------------------------- */

#boot{
  position:fixed; inset:0; z-index:100;
  background:#04120a; color:var(--accent);
  font-family:var(--font-mono); font-size:.85rem;
  padding:2rem;
  display:flex; flex-direction:column; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#boot.hidden{ opacity:0; visibility:hidden; }
#boot .boot-line{ opacity:0; animation:boot-in .25s forwards; margin-bottom:.35rem; }
#boot .boot-line .ok{ color:var(--accent); }
#boot .cursor{ display:inline-block; width:8px; height:1em; background:var(--accent); margin-left:4px; animation:blink 1s steps(1) infinite; vertical-align:text-bottom; }
@keyframes boot-in{ to{ opacity:1; } }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------------------------------------------------------------------- */
/* stage + terminal card                                                   */
/* ---------------------------------------------------------------------- */

.stage{
  position:relative; z-index:3;
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:2.4rem 1.2rem 1rem;
  min-height:0;
}

.hub-terminal{
  width:100%; max-width:740px;
  display:flex; flex-direction:column;
  border:1px solid var(--line-strong);
  background:rgba(8,13,11,.94);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 50px rgba(57,255,156,.06), 0 30px 80px rgba(0,0,0,.55);
  max-height:82vh;
}

.term-head{
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);
  font-size:.72rem; letter-spacing:.08em; color:var(--text-dim);
  flex-shrink:0;
}
.term-head .dots{ display:flex; gap:5px; }
.term-head .dots i{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); display:block; }
.term-head .title{ flex:1; text-align:center; text-transform:uppercase; }
.term-head .clock{ color:var(--text-faint); display:flex; align-items:center; gap:.45rem; }
.term-head .clock .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.term-body{
  padding:1.4rem 1.3rem;
  overflow-y:auto;
  flex:1;
  font-size:.86rem;
  line-height:1.7;
}
.term-body::-webkit-scrollbar{ width:6px; }
.term-body::-webkit-scrollbar-track{ background:transparent; }
.term-body::-webkit-scrollbar-thumb{ background:var(--line-strong); }

.term-line{ white-space:pre-wrap; word-break:break-word; }
.term-line.cmd{ color:var(--text); margin-top:.3rem; }
.term-line.cmd .prompt{ color:var(--accent); margin-right:.5em; }
.term-line.out{ color:var(--text-dim); margin:.25rem 0 .9rem; }
.term-line.out b{ color:var(--text); font-weight:600; }
.term-line .accent{ color:var(--accent); }

.kv-block{ margin:.2rem 0 .9rem; color:var(--text-dim); }
.kv-block .row{ display:flex; gap:.6em; }
.kv-block .k{ width:80px; flex-shrink:0; color:var(--text-faint); }
.kv-block .v{ color:var(--text); }
.kv-block .v.live{ color:var(--accent); }

.typed-tagline{ color:var(--text-dim); margin:.1rem 0 .9rem; min-height:1.4em; }
.typed-tagline .type-cursor{ display:inline-block; width:8px; height:1em; background:var(--accent); vertical-align:text-bottom; margin-left:2px; animation:blink 1s steps(1) infinite; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 .3rem; }
.chip{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
  color:var(--text); background:var(--panel-2);
  border:1px solid var(--line-strong);
  padding:.45em .85em;
  cursor:pointer;
  transition:all .18s ease;
}
.chip::before{ content:'./'; color:var(--text-faint); }
.chip:hover, .chip:focus-visible{ border-color:var(--accent); color:var(--accent); background:rgba(57,255,156,.08); box-shadow:0 0 10px rgba(57,255,156,.15); outline:none; }

.output-block{
  border-left:2px solid var(--line-strong);
  padding:.15rem 0 .1rem 1rem;
  margin:.3rem 0 1.3rem;
  animation:out-in .3s ease;
}
@keyframes out-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }

/* about output */
.about-out{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.about-out .photo{ width:88px; height:88px; border:1px solid var(--line-strong); flex-shrink:0; overflow:hidden; }
.about-out .photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(.85); }
.about-out .text{ flex:1; min-width:200px; color:var(--text-dim); }
.about-out .text p{ margin-bottom:.7em; }

.mini-stats{ margin-top:.9rem; display:grid; gap:.55rem; }
.mini-stats .stat-row{ display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:.6rem; font-size:.72rem; color:var(--text-dim); }
.mini-stats .bar{ height:4px; background:var(--panel-2); border:1px solid var(--line); }
.mini-stats .bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); width:0; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.mini-stats .stat-row.in-view .bar span{ width:var(--val); }

/* work output */
.work-list{ display:grid; gap:.8rem; }
.work-item{ border:1px solid var(--line); padding:.85rem .95rem; background:var(--panel-2); }
.work-item .idx{ font-size:.64rem; color:var(--text-faint); letter-spacing:.12em; }
.work-item h4{ font-size:.95rem; text-transform:uppercase; margin:.3rem 0 .4rem; color:#eef7f1; }
.work-item p{ font-size:.8rem; margin-bottom:.5rem; color:var(--text-dim); }
.work-item .stack{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.work-item .stack span{ font-size:.62rem; border:1px solid var(--line); padding:.15em .5em; color:var(--text-dim); }
.work-item .link{ font-size:.72rem; color:var(--accent); }
.work-item .link::after{ content:'→'; margin-left:.35em; transition:transform .2s ease; display:inline-block; }
.work-item .link:hover::after{ transform:translateX(4px); }

/* contact output */
.contact-out .field{ margin-bottom:.75rem; display:flex; flex-direction:column; gap:.35rem; max-width:420px; }
.contact-out label{ font-size:.68rem; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; }
.contact-out input, .contact-out textarea{
  background:var(--bg-alt); border:1px solid var(--line); color:var(--text);
  font-family:var(--font-mono); font-size:.82rem; padding:.6em .7em; outline:none;
  transition:border-color .2s ease;
}
.contact-out input:focus, .contact-out textarea:focus{ border-color:var(--accent); }
.contact-out .direct{ margin-top:.9rem; font-size:.78rem; color:var(--text-dim); }
.contact-out .direct a{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.7em 1.3em;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--text); background:transparent;
  cursor:pointer; transition:all .2s ease;
  clip-path:polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
}
.btn:hover{ border-color:var(--accent); color:var(--accent); background:rgba(57,255,156,.06); }
.btn.primary{ background:var(--accent); color:#04120a; border-color:var(--accent); font-weight:700; }
.btn.primary:hover{ background:#5dffb0; color:#04120a; }
.btn:disabled{ opacity:.6; cursor:default; }

/* links output */
.links-out{ display:flex; flex-wrap:wrap; gap:.6rem; }
.links-out a{ font-size:.78rem; border:1px solid var(--line-strong); padding:.45em .85em; color:var(--text); }
.links-out a:hover{ color:var(--accent); border-color:var(--accent); }

/* footer prompt (fixed within card) */
.term-footer{
  flex-shrink:0;
  border-top:1px solid var(--line);
  padding:.85rem 1.1rem;
  background:rgba(5,8,6,.6);
}
.prompt-line{ display:flex; align-items:center; gap:.5rem; }
.prompt-line .prompt{ color:var(--accent); white-space:nowrap; font-size:.84rem; }
.prompt-line input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--font-mono); font-size:.86rem; caret-color:var(--accent);
}
.prompt-line input::placeholder{ color:var(--text-faint); }
.term-hint{ margin-top:.4rem; font-size:.65rem; letter-spacing:.05em; color:var(--text-faint); }
.term-hint b{ color:var(--text-dim); font-weight:500; }

/* page footer, below the card */
.site-foot{
  position:relative; z-index:3;
  text-align:center;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint);
  padding-bottom:1.6rem;
}
.site-foot a:hover{ color:var(--accent); }

/* legal docs (terms / privacy) — long-form prose inside .term-body        */
.legal-out .meta{ color:var(--text-faint); font-size:.72rem; margin-bottom:1.2rem; }
.legal-out h2{ font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin:1.4rem 0 .5rem; }
.legal-out h2:first-of-type{ margin-top:0; }
.legal-out p{ color:var(--text-dim); font-size:.86rem; margin-bottom:.8em; }
.legal-out ul{ margin:0 0 .9em; padding-left:1.2em; color:var(--text-dim); font-size:.86rem; }
.legal-out li{ margin-bottom:.4em; }
.legal-out a{ color:var(--accent); }
.legal-out a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 640px){
  .hud-corners{ display:none; }
  .hub-terminal{ max-height:88vh; }
  .term-body{ font-size:.8rem; padding:1.1rem; }
  .kv-block .k{ width:66px; }
  .mini-stats .stat-row{ grid-template-columns:88px 1fr 30px; }
}