/* motion/terminal.css — 「一个批次的生命周期」终端窗口与打字机重演样式。 */

.console-section {
  background: #0b1512;
}

.console-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: center;
}

.console-grid .section-heading {
  margin-bottom: 0;
}

.console-window {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(12, 22, 20, 0.98), rgba(4, 10, 8, 0.98));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.console-body {
  /* 8 × 12px × 1.9 = 15.2em；7 × 2px 行距 + 22px × 2 padding = 58px。 */
  min-height: calc(15.2em + 58px);
  padding: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.9;
  transition: opacity 0.4s ease;
}

.console-body.is-cycle-fade {
  opacity: 0;
}

.console-line {
  min-height: 1.9em;
  margin: 0;
  color: #9eb0a8;
}

.console-line + .console-line {
  margin-top: 2px;
}

.console-line.is-command {
  color: var(--mint);
  font-weight: 700;
}

.console-line.is-warn {
  color: var(--amber);
}

.console-line.is-ok {
  color: var(--mint-strong);
  font-weight: 700;
}

/* 无 JS 时没有 has-motion，8 行原文保持可见。 */
html.has-motion .console-line.line-pending {
  opacity: 0;
}

.console-line.line-active::after {
  display: inline;
  margin-left: 0.12em;
  content: "▌";
  animation: console-caret 1s steps(2, end) infinite;
}

@keyframes console-caret {
  to {
    opacity: 0;
  }
}

@media (max-width: 980px) {
  .console-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .console-body {
    /* 窄屏约 4 行可能折行：按 12 个行盒预留，避免打字时窗口跳高。 */
    min-height: calc(22.8em + 46px);
    padding: 16px;
    font-size: 11px;
  }
}

html.motion-reduced .console-body,
html.motion-reduced .console-body.is-cycle-fade {
  opacity: 1;
  transition: none;
}

html.motion-reduced .console-line.line-pending {
  opacity: 1;
}

html.motion-reduced .console-line.line-active::after {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.has-motion .console-body,
  html.has-motion .console-body.is-cycle-fade {
    opacity: 1;
    transition: none;
  }

  html.has-motion .console-line.line-pending {
    opacity: 1;
  }

  html.has-motion .console-line.line-active::after {
    animation: none;
    opacity: 1;
  }
}