/* /terminal CRT treatment. Scoped to body.terminal-mode (set by terminal.js). */

body.terminal-mode {
  background: #05070a;
}

body.terminal-mode #terminal-container {
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #0b1714 0%, #05070a 75%);
  color: #d9f7ec;
  font-size: clamp(13px, calc(0.45vw + 9px), 19px);
  line-height: 1.5;
  padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 64px);
  text-shadow: 0 0 6px rgba(124, 247, 212, 0.28), 0 0 1px rgba(217, 247, 236, 0.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 247, 212, 0.25) transparent;
  transform-origin: 50% 50%;
}

/* The session is a centered column that scales with the viewport, so wide
   screens don't leave every line hugging the left edge. */
body.terminal-mode #terminal-output,
body.terminal-mode #terminal-input-line {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

body.terminal-mode .term-logo {
  display: block;
  white-space: pre;
  font-size: min(1em, calc((100vw - 8rem) / 54));
  line-height: 1.15;
  overflow: hidden;
}

body.terminal-mode #terminal-output > div {
  animation: term-line-in 0.22s ease-out both;
}

@keyframes term-line-in {
  from { opacity: 0; transform: translateY(4px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

body.terminal-mode #terminal-input-line {
  background: #05070a;
  box-shadow: 0 -28px 24px -8px #05070a;
  border-top: 1px solid rgba(124, 247, 212, 0.18);
}

body.terminal-mode #terminal-prompt { color: #7cf7d4; }

body.terminal-mode #terminal-input {
  font-size: inherit;
  color: #f2efe8;
  caret-color: #7cf7d4;
  text-shadow: inherit;
}

body.terminal-mode .term-ok { color: #28c840; }
body.terminal-mode .term-hl { color: #7cf7d4; }

.crt-overlay { display: none; }

body.terminal-mode .crt-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: multiply;
}

body.terminal-mode .crt-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18vh;
  background: linear-gradient(to bottom, transparent, rgba(124, 247, 212, 0.05), transparent);
  animation: crt-roll 7s linear infinite;
}

@keyframes crt-roll {
  from { transform: translateY(-20vh); }
  to { transform: translateY(110vh); }
}

/* Power-on: a bright scanline opens into the screen. */
body.crt-boot #terminal-container { animation: crt-on 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
body.crt-dived #terminal-container { animation: crt-dive-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
body.crt-off #terminal-container { animation: crt-off 0.5s cubic-bezier(0.7, 0, 0.84, 0) both; }

@keyframes crt-on {
  0% { transform: scale(1, 0.004); filter: brightness(6); opacity: 0.4; }
  45% { transform: scale(1, 0.004); filter: brightness(4); opacity: 1; }
  100% { transform: none; filter: none; }
}

@keyframes crt-dive-in {
  from { transform: scale(1.18); filter: blur(10px) brightness(2.2); opacity: 0; }
  to { transform: none; filter: none; opacity: 1; }
}

@keyframes crt-off {
  0% { transform: none; filter: none; }
  60% { transform: scale(1, 0.004); filter: brightness(5); }
  100% { transform: scale(0, 0.004); filter: brightness(8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.terminal-mode #terminal-container,
  body.terminal-mode #terminal-output > div,
  body.terminal-mode .crt-overlay::after { animation: none !important; }
}