/* ============================================================
   Tomáš Březina — night-terminal
   A tiny web terminal as a personal links page.
   ============================================================ */

/* ---------- Font (variable, self-hosted) ---------- */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  --bg: #05070b;
  --panel: #0c1017;
  --panel-edge: #1c2534;
  --bar: #0a0e15;

  --fg: #cdd6e4;
  --dim: #6f7b8e;
  --faint: #414c5e;

  --green: #3fe081;
  --cyan: #53d6f0;
  --blue: #6cb0ff;
  --magenta: #e07ae0;
  --yellow: #e8bf4a;
  --red: #ff6b6b;

  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .25, 1);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: rgba(83, 214, 240, .25); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Background: pixel starfield + colour glows ---------- */

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.glow {
  position: fixed;
  z-index: 0;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  pointer-events: none;
}
.glow-a {
  top: -22vmax;
  left: -18vmax;
  background: radial-gradient(closest-side, rgba(83, 214, 240, .12), transparent 70%);
  animation: breatheA 11s ease-in-out infinite alternate;
}
.glow-b {
  bottom: -26vmax;
  right: -20vmax;
  background: radial-gradient(closest-side, rgba(224, 122, 224, .1), transparent 70%);
  animation: breatheB 14s ease-in-out infinite alternate;
}
@keyframes breatheA { from { opacity: .7; transform: scale(.96); } to { opacity: 1.0; transform: scale(1.05); } }
@keyframes breatheB { from { opacity: 1.0; transform: scale(1.04); } to { opacity: .65; transform: scale(.97); } }

/* ---------- Layout ---------- */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.9rem, 3.5vh, 3rem) .9rem;
}

/* ---------- The window ---------- */

.term {
  width: min(46rem, 96vw);
  background: rgba(12, 16, 23, .92);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .65),
    0 0 70px rgba(83, 214, 240, .06),
    0 0 160px rgba(224, 122, 224, .05);
  overflow: hidden;
  transition: width .35s var(--ease);
  animation: term-in .55s var(--ease) both;
}
@keyframes term-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.term.is-max { width: min(96vw, 80rem); }
.term.is-min .screen-wrap,
.term.is-min .term-status { display: none; }

/* ---------- Title bar ---------- */

.term-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 .9rem;
  background: var(--bar);
  border-bottom: 1px solid var(--panel-edge);
}

.lights { display: flex; gap: 8px; }
.light {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.light:hover { transform: scale(1.15); filter: brightness(1.15); }
.light:active { transform: scale(.95); }
.light-r { background: #ff5f57; }
.light-y { background: #febc2e; }
.light-g { background: #28c840; }

.term-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  color: var(--dim);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------- Screen ---------- */

.screen-wrap { position: relative; }

.screen {
  position: relative;
  padding: 1.05rem 1.2rem 1.15rem;
  max-height: min(36rem, 74svh);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 4px; }

.block { margin-bottom: 1rem; }
.block:last-child { margin-bottom: .1rem; }

/* boot choreography (JS applies .hide, removes it in sequence) */
.block.hide { display: none; }
.row-hide { opacity: 0; transform: translateY(3px); }
.links .row { transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .16s var(--ease); }

/* ---------- Prompt ---------- */

.promptline { word-break: break-word; }
.p-user { color: var(--green); font-weight: 600; }
.p-path { color: var(--cyan); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.cmd { color: var(--fg); font-weight: 500; }

/* ---------- neofetch ---------- */

.fetch {
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
  margin: .65rem 0 .25rem .2rem;
}

.pixavatar {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(83, 214, 240, .12);
}

.fetch-title { font-size: 1rem; font-weight: 700; }
.fetch-rule { color: var(--faint); line-height: 1.1; margin-bottom: .35rem; user-select: none; }

.fetch-list .frow { display: flex; gap: .6rem; }
.fetch-list dt { color: var(--cyan); font-weight: 600; min-width: 7ch; }
.fetch-list dt::after { content: ':'; color: var(--dim); }
.fetch-list dd { color: var(--fg); }

.ansi { display: flex; gap: 4px; margin-top: .55rem; }
.ansi i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.a1 { background: #414c5e; }
.a2 { background: var(--red); }
.a3 { background: var(--green); }
.a4 { background: var(--yellow); }
.a5 { background: var(--blue); }
.a6 { background: var(--magenta); }
.a7 { background: var(--cyan); }
.a8 { background: #cdd6e4; }

/* ---------- ls -l links ---------- */

.links { margin-top: .35rem; }
.links .row {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .34rem .55rem;
  margin: 0 -.55rem;
  border-radius: 7px;
  text-decoration: none;
}
.links .perm { color: var(--faint); }
.links .fname { font-weight: 700; min-width: 9.5ch; }
.links .arr { color: var(--dim); transition: transform .16s var(--ease), color .16s var(--ease); }
.links .target { color: var(--dim); transition: color .16s var(--ease); }

.c-fb { color: var(--blue); }
.c-ig { color: var(--magenta); }
.c-x { color: #e6edf3; }
.c-li { color: var(--green); }
.c-rev { color: var(--cyan); }

@media (hover: hover) {
  .links .row:hover { background: rgba(255, 255, 255, .05); }
  .links .row:hover .arr { color: var(--yellow); transform: translateX(3px); }
  .links .row:hover .target { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
}
.links .row:active { background: rgba(255, 255, 255, .08); }

/* glow ignites on hover only — resting state stays clean */
.fname { transition: text-shadow .2s var(--ease); }
@media (hover: hover) {
  .links .row:hover .fname { text-shadow: 0 0 16px currentColor; }
}

/* ---------- live prompt + input ---------- */

#b-live { position: relative; }

.cursor {
  display: inline-block;
  width: .62em;
  height: 1.18em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--fg);
  animation: blink 1.1s steps(2, start) infinite;
}
#b-live.unfocused .cursor {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dim);
  animation: none;
}
@keyframes blink { to { visibility: hidden; } }

#cli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  cursor: text;
}

.out { white-space: pre-wrap; word-break: break-word; margin: .1rem 0 .65rem; }
.out.pre { white-space: pre; overflow-x: auto; }

/* clickable command tokens inside output */
.cbtn {
  color: var(--green);
  cursor: pointer;
  text-decoration: underline dotted rgba(63, 224, 129, .45);
  text-underline-offset: 3px;
  transition: color .15s var(--ease);
}
.cbtn:hover {
  color: var(--cyan);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
.cbtn:active { color: var(--yellow); }
.out .ok { color: var(--green); }
.out .warn { color: var(--yellow); }
.out .err { color: var(--red); }
.out .cy { color: var(--cyan); }
.out .mg { color: var(--magenta); }

/* ---------- document pages (privacy) ---------- */

.doc-h {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan);
  margin: .55rem 0 .5rem;
}
.doc-list { max-width: 60ch; }
.doc-list li {
  display: flex;
  gap: .7rem;
  margin-bottom: .55rem;
}
.doc-list li > span:first-child { flex-shrink: 0; }
.doc-list b { color: var(--fg); font-weight: 600; }
.doc-list li { color: var(--dim); }
.doc-list a { color: var(--cyan); text-underline-offset: 3px; }

/* ---------- colour themes (the `theme` command) ---------- */

:root[data-theme="amber"] {
  --fg: #e6d3ae;
  --dim: #9a8968;
  --faint: #5c5138;
  --green: #ffb454;
  --cyan: #ffd580;
  --blue: #ffc46b;
  --magenta: #ff9e64;
  --yellow: #ffe2a8;
  --panel: #120e08;
  --panel-edge: #33291a;
  --bar: #0e0b06;
}
:root[data-theme="green"] {
  --fg: #b5eec4;
  --dim: #6da583;
  --faint: #3c5c49;
  --green: #3fe081;
  --cyan: #7ce38b;
  --blue: #7ce38b;
  --magenta: #c8ffdd;
  --yellow: #a9f0b6;
  --panel: #08120c;
  --panel-edge: #1c3426;
  --bar: #060e09;
}
:root[data-theme="amber"] .c-x,
:root[data-theme="green"] .c-x { color: var(--fg); }

/* ---------- matrix overlay ---------- */

#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.term.fx-on #fx { display: block; }

/* ---------- CRT ---------- */

.crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, .22) 2px 3px
  );
  mix-blend-mode: multiply;
  animation: flicker 6s ease-in-out infinite;
}
/* slow phosphor refresh band sweeping down the screen */
.crt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110px;
  background: linear-gradient(to bottom,
    rgba(190, 255, 225, 0),
    rgba(190, 255, 225, .055) 45%,
    rgba(190, 255, 225, 0));
  mix-blend-mode: screen;
  animation: sweep 7s linear infinite;
}
.term.crt-off .crt { display: none; }
@keyframes flicker {
  0%, 100% { opacity: .6; }
  48% { opacity: .5; }
  50% { opacity: .64; }
  52% { opacity: .52; }
}
@keyframes sweep {
  from { transform: translateY(-130px); }
  to { transform: translateY(min(46rem, 80vh)); }
}

/* screen vignette */
.screen-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .32);
}

/* ---------- closed-session overlay ---------- */

.closed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(5, 7, 11, .96);
  z-index: 3;
}
.closed[hidden] { display: none; }
.closed-msg { color: var(--dim); }
#btn-reconnect { color: var(--green); padding: .3rem .6rem; }
#btn-reconnect:hover { color: var(--cyan); }

/* ---------- status bar ---------- */

.term-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .45rem .95rem;
  font-size: .74rem;
  color: var(--dim);
  background: var(--bar);
  border-top: 1px solid var(--panel-edge);
}
.term-status a { text-decoration: none; }
.term-status a:hover, .st-help:hover { color: var(--cyan); }
.st-help { padding: 0; letter-spacing: inherit; }
.st-help::before { content: 'type "'; color: var(--faint); }
.st-help::after { content: '"'; color: var(--faint); }

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  body { font-size: 13px; }
  .screen { padding: .85rem .8rem .95rem; max-height: none; }
  .stage { align-items: flex-start; padding-top: max(1.2rem, 4svh); }
  .fetch { gap: .9rem; }
  .pixavatar { width: 92px; height: 92px; }
  .links .perm { display: none; }
  .links .fname { min-width: 9ch; }
  .links .row { gap: .6rem; padding: .42rem .5rem; }
  .term-title { display: none; }
  .term-bar::after {
    content: 'tomas@brezina: ~';
    margin-left: .9rem;
    font-size: .8rem;
    color: var(--dim);
  }
}

@media (max-width: 400px) {
  .fetch-list dt { min-width: 6.5ch; }
  .links .target { font-size: .86em; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .term { animation: none; }
  .glow-a, .glow-b { animation: none; }
  .crt { animation: none; opacity: .5; }
  .crt::after { display: none; }
  .cursor { animation: none; }
  .links .row, .links .arr, .links .target, .light { transition: none; }
  .row-hide { opacity: 1; transform: none; }
}