/* tui.css — shared terminal-UI theme for semeer.me (index + 404)
   WebStorm Dark (JetBrains New UI). Pages layer their layout on top. */

:root{
  --bg:      #1e1f22;   /* editor background */
  --bg-deep: #161718;   /* window chrome */
  --pane:    #1e1f22;
  --line:    #393b40;   /* borders */
  --fg:      #bcbec4;   /* default text */
  --muted:   #6f737a;   /* comments */

  --accent: #3574f0;    /* WebStorm signature blue */
  --green:  #6aab73;    /* string green */
  --cyan:   #56a8f5;    /* function blue */
  --purple: #c77dbb;    /* keyword magenta-purple */
  --pink:   #cf8e6d;    /* keyword orange */
  --orange: #cf8e6d;
  --yellow: #e8bf6a;    /* metadata yellow */
  --red:    #f75464;

  --bright-green: #73bd79; /* status LEDs */

  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*{ box-sizing:border-box; }
body{
  margin:0; color:var(--fg); font-family:var(--mono); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(33,66,131,.85); color:#fff; }
a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------------- window chrome bar ---------------- */
.chrome{
  display:flex; align-items:center; gap:14px;
  padding:11px 14px; background:var(--bg-deep); border-bottom:1px solid var(--line);
}
.lights{ display:flex; gap:7px; }
.lights i{ width:12px; height:12px; border-radius:50%; display:block; }
.lights .r{ background:#ff5f56; } .lights .y{ background:#ffbd2e; } .lights .g{ background:#27c93f; }
.chrome .name{ color:var(--muted); font-size:12.5px; }
.chrome .name b{ color:var(--fg); font-weight:500; }

/* ---------------- CRT scanlines + slow sweep ----------------
   Add class "crt" to the terminal surface (.win on index, body on 404). */
.crt{ position:relative; }
.crt::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  opacity:.35; mix-blend-mode:multiply;
}
.crt::after{
  content:''; position:absolute; left:0; right:0; height:90px; top:-90px;
  pointer-events:none; z-index:6;
  background:linear-gradient(180deg, transparent, rgba(188,190,196,.05), transparent);
  animation:sweep 7s linear infinite;
}
body.crt::before, body.crt::after{ position:fixed; }
@keyframes sweep{ to{ transform:translateY(calc(100vh + 180px)); } }

/* ---------------- shared keyframes / cursor ---------------- */
.blink{ animation:blink 1.1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.cursor{
  display:inline-block; width:9px; height:17px; vertical-align:text-bottom;
  background:var(--orange); margin-left:2px; animation:blink 1.1s step-end infinite;
}
input:focus ~ .cursor{ display:none; } /* hide fake cursor while typing */

/* ---------------- shell (shared engine in shell.js) ---------------- */
.out{ font-size:13px; white-space:pre-wrap; overflow:auto; }
.out .cmd{ color:var(--fg); }
.out .ps{ color:var(--bright-green); }
.out .ps .at{ color:var(--muted); }
.out .err{ color:var(--red); }
.out .ok{ color:var(--bright-green); }
.out .hd{ color:var(--pink); }

.shell input, .prompt input{
  flex:1; background:transparent; border:0; outline:0; color:var(--fg);
  font:inherit; caret-color:var(--orange); padding:2px 0;
}

/* ── rm -rf / easter egg: cosmetic only, restores itself ── */
@keyframes meltShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3px,2px); }
  40%{ transform:translate(3px,-2px); }
  60%{ transform:translate(-2px,-1px); }
  80%{ transform:translate(2px,3px); }
}
@keyframes meltHue{ 0%{ filter:none; } 100%{ filter:hue-rotate(-55deg) saturate(1.7) contrast(1.1); } }
@keyframes meltFlicker{ 0%,100%{ opacity:.7; } 50%{ opacity:.95; } }
body.meltdown{ animation:meltShake .11s steps(2) infinite, meltHue 1.8s ease forwards; }
body.meltdown .crt::before, body.meltdown.crt::before{
  opacity:.7 !important; animation:meltFlicker .18s steps(2) infinite !important;
}
/* red wash; on the 404 this also overrides body.crt::after's sweep for the duration */
body.meltdown::after{
  content:''; position:fixed; inset:0; height:auto; z-index:50; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 38%, rgba(247,84,100,.20));
  mix-blend-mode:screen; animation:none; transform:none;
}

/* the blast: white flash + expanding shockwave ring at detonation */
@keyframes blastFlash{ 0%{ opacity:0; } 7%{ opacity:1; } 100%{ opacity:0; } }
@keyframes blastRing{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:.95; border-width:14px; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:0; border-width:1px; }
}
.blast{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(circle at 50% 54%, rgba(255,244,214,.95), rgba(232,191,106,.7) 22%, rgba(247,84,100,.45) 42%, transparent 64%);
  animation:blastFlash .75s ease-out forwards;
}
.blast::after{
  content:''; position:absolute; left:50%; top:54%; width:160vmax; height:160vmax;
  border-radius:50%; border:14px solid rgba(255,210,140,.85);
  transform:translate(-50%,-50%) scale(0);
  animation:blastRing .8s cubic-bezier(.15,.6,.3,1) forwards;
}

/* ---------------- reduced motion: shared floor ---------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .crt::after{ display:none; }
}