/* ============================================
   Terminal / CLI Home × Midwest Emo backdrop
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --term-bg: #0d1117;
  --term-fg: #9ae6b0;
  --term-dim: #94a3b8;
  --term-prompt: #7dd3fc;
  --term-link: #9ae6b0;
  --term-link-hover: #6ee7b7;
  --term-border: #334155;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Consolas', monospace;
}

body.terminal-home {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.65;
  color: var(--term-fg);
  position: relative;
}

/* Homepage background: centered image, smaller so it doesn't take full height */
.term-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: #1a1520;
  background-image: url('/assets/img/0025160427_0.jpg');
  background-repeat: no-repeat;
  background-position: center calc(50% - 10px);
  background-size: auto 70vh;
}

/* Full-page panel: same dark semi-transparent backdrop as before, applied to entire page */
.term-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(13, 17, 23, 0.82);
}

/* Film grain */
.term-grain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.terminal-home a {
  color: var(--term-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.terminal-home a:hover {
  color: var(--term-link-hover);
  text-decoration: underline;
}

/* Content area: block centered on page, text left-aligned */
.terminal-container {
  position: relative;
  z-index: 3;
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  min-height: 100vh;
  box-sizing: border-box;
}

.terminal-container .term-prompt-block,
.terminal-container .term-output,
.terminal-container .term-track-label,
.terminal-container .term-filter {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Prompt block */
.term-prompt-block {
  margin-bottom: 0.75rem;
}

.term-output .term-subtitle {
  color: var(--term-dim);
  font-weight: 400;
  font-size: 0.92em;
}

.term-track-label {
  color: var(--term-dim);
  font-size: 0.8em;
  margin: 0.25rem 0 0.5rem;
  padding-left: 0.25rem;
  letter-spacing: 0.12em;
}

.term-prompt-block .prompt {
  color: var(--term-prompt);
  margin-right: 0.5rem;
}

.term-prompt-block .cmd {
  color: var(--term-fg);
}

/* Output: ls-style list */
.term-output {
  margin: 0.5rem 0 1.5rem;
  padding-left: 0.25rem;
}

.term-line {
  display: block;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.term-line:hover {
  background: rgba(46, 160, 67, 0.08);
  border-bottom-color: var(--term-border);
}

.term-line .date {
  color: var(--term-dim);
  font-size: 0.9em;
  margin-right: 1rem;
  min-width: 4.5rem;
  display: inline-block;
}

.term-line .filename {
  color: var(--term-link);
}

.term-line:hover .filename {
  color: var(--term-link-hover);
}

.term-line .tags {
  color: var(--term-dim);
  font-size: 0.85em;
  margin-left: 0.75rem;
}

/* Filter hint */
.term-filter {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--term-border);
  color: var(--term-dim);
  font-size: 0.85em;
}

.term-filter kbd {
  background: var(--term-border);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-family: inherit;
}

/* Blink cursor */
.term-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--term-fg);
  margin-left: 0.2rem;
  vertical-align: text-bottom;
  animation: term-blink 1.1s step-end infinite;
}

@keyframes term-blink {
  50% { opacity: 0; }
}