/* ============================================================
   portfolio-terminal.css — "Terminal" aesthetic for Xero Data
   Black CRT, mono green text, amber accents, CLI prompts.
   ============================================================ */

.page-term {
  --bg: #0c0e0a;
  --bg-2: #131611;
  --panel: #0a0d09;
  --rule: rgba(94, 255, 138, 0.18);
  --text: #cfeed8;
  --text-2: rgba(207, 238, 216, 0.62);
  --text-3: rgba(207, 238, 216, 0.4);
  --green: #5eff8a;
  --amber: #ffb86c;
  --red: #ff6b6b;

  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: "New York", "Source Serif 4", Georgia, ui-serif, serif;

  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding: clamp(16px, 3vw, 40px);
}

/* Faint CRT scanlines */
.page-term::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.page-term,
.page-term * { box-sizing: border-box; }

.page-term a { color: var(--green); text-decoration: none; }
.page-term a:hover { color: var(--amber); }

/* ---------- Full-bleed hero ---------- */
.term-hero {
  --hero-img: none;
  position: relative;
  height: 100vh;
  min-height: 600px;
  width: calc(100% + 80px);
  margin: calc(-1 * clamp(16px, 3vw, 40px)) calc(-1 * clamp(16px, 3vw, 40px)) clamp(32px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  z-index: 2;
}

.term-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #03060a;
  background-image:
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(94, 255, 138, 0.22) 0%, rgba(3, 6, 10, 0.4) 35%, rgba(3, 6, 10, 0.95) 75%),
    var(--hero-img);
  background-size: cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: term-glow-roam 18s ease-in-out infinite;
  will-change: background-image;
}

@keyframes term-glow-roam {
  0%   { --glow-x: 50%; --glow-y: 50%; }
  25%  { --glow-x: 60%; --glow-y: 42%; }
  50%  { --glow-x: 48%; --glow-y: 58%; }
  75%  { --glow-x: 42%; --glow-y: 46%; }
  100% { --glow-x: 50%; --glow-y: 50%; }
}

@property --glow-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --glow-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

/* Scanlines slowly drift downward */
.term-hero-scan {
  animation: term-scan-drift 6s linear infinite;
  background-size: 100% 3px;
  background-attachment: local;
}

@keyframes term-scan-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 24px; }
}

.term-hero-scan {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
    to bottom,
    rgba(94, 255, 138, 0.05) 0px,
    rgba(94, 255, 138, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.term-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 6, 10, 0.5) 0%, transparent 20%, transparent 70%, rgba(3, 6, 10, 0.7) 100%);
}

.term-hero-tl {
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.term-hero-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green) !important;
  letter-spacing: 0.06em;
  align-self: flex-start;
}

.term-hero-mark {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  white-space: pre;
}

.term-hero-tr {
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  right: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  max-width: 260px;
  line-height: 1.55;
}

.term-hero-tr-tag {
  font-size: 11px;
  color: var(--amber);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.term-hero-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 40px;
  color: rgba(207, 238, 216, 0.45);
  font-family: var(--mono);
  font-size: 11px;
  pointer-events: none;
  opacity: 0.7;
}

.term-hero-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.term-hero-cell span:first-child { color: var(--green); }

.term-hero-cell {
  animation: term-cell-flicker 3.2s ease-in-out infinite;
}

.term-hero-cell:nth-child(2n) { animation-delay: -0.7s; animation-duration: 4.1s; }
.term-hero-cell:nth-child(3n) { animation-delay: -1.4s; animation-duration: 5.3s; }
.term-hero-cell:nth-child(5n) { animation-delay: -2.2s; }

@keyframes term-cell-flicker {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.term-hero-bl {
  position: absolute;
  bottom: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 48px);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

.term-hero-prompt { color: var(--green); }

.term-hero-caret {
  color: var(--green);
  animation: term-hero-blink 1s steps(2, end) infinite;
  font-weight: 700;
}

@keyframes term-hero-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.term-hero-br {
  position: absolute;
  bottom: clamp(24px, 4vw, 48px);
  right: clamp(24px, 4vw, 48px);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  padding: 6px 12px;
  border: 1px solid var(--green);
  background: rgba(94, 255, 138, 0.08);
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .term-hero-grid { display: none; }
  .term-hero-tr { max-width: 180px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .term-hero-caret,
  .term-hero-bg,
  .term-hero-scan,
  .term-hero-cell { animation: none !important; }
}

/* ---------- Window ---------- */
.term-window {
  max-width: 960px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.term-titlebar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}

.term-traffic {
  display: flex;
  gap: 8px;
}

.term-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.term-dot-r { background: var(--red); }
.term-dot-y { background: var(--amber); }
.term-dot-g { background: var(--green); }

.term-title {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}

.term-titlebar-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3) !important;
  text-transform: uppercase;
}

.term-titlebar-back:hover { color: var(--green) !important; }

.term-screen {
  padding: clamp(20px, 4vw, 48px);
}

/* ---------- Blocks ---------- */
.term-block {
  margin-bottom: 56px;
}

.term-line {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 16px;
  white-space: pre-wrap;
}

.term-prompt {
  color: var(--green);
  margin-right: 8px;
}

.term-h1 {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 12px;
  font-weight: 500;
}

.term-tagline {
  font-family: var(--mono);
  color: var(--text-2);
  margin: 0 0 24px;
  font-size: 14px;
}

.term-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 0;
  line-height: 1.8;
  white-space: pre;
  overflow-x: auto;
}

/* ---------- Health rows ---------- */
.term-output {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 18px;
}

.term-row {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.9;
}

.term-key {
  color: var(--green);
}

.term-mid {
  color: var(--text-2);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

.term-val {
  color: var(--amber);
  font-feature-settings: "tnum";
}

/* ---------- Stack ---------- */
.term-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 18px;
}

.term-stack li {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  line-height: 1.9;
}

.term-bullet {
  color: var(--green);
  margin-right: 10px;
}

/* ---------- Story chapters ---------- */
.term-chapter-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}

.term-h2 {
  font-family: var(--mono);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 20px;
  font-weight: 500;
  max-width: 36ch;
}

.term-para {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 16px;
  max-width: 70ch;
}

.term-para:last-child { margin-bottom: 0; }

/* ---------- Coda ---------- */
.term-coda-line {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 32px;
  line-height: 1.9;
}

.term-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green) !important;
  padding: 10px 18px;
  border: 1px solid var(--green);
  border-radius: 4px;
  transition: background 200ms ease, color 200ms ease;
}

.term-back:hover {
  background: var(--green);
  color: var(--bg) !important;
}

/* ---------- Cursor ---------- */
.term-cursor {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  margin-top: 24px;
}

.term-caret {
  color: var(--green);
  animation: term-blink 1s steps(2, end) infinite;
  font-weight: 700;
}

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

/* ---------- Footer ---------- */
.term-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 640px) {
  .term-screen { padding: 20px; }
  .term-titlebar { padding: 10px 12px; }
  .term-title { font-size: 11px; }
  .term-titlebar-back { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .term-caret { animation: none; opacity: 1; }
}