@import url("tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Lumen Night Foundry
 * enrichment: none (typography only) · nav: none · footer: none
 */

html, body {
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-in-2);
  font-family: var(--font-body);
  font-weight: 400;
  display: grid;
  place-items: center;
  padding-inline: max(1rem, env(safe-area-inset-left));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* faint brass bloom — the instrument-grade warmth behind the type */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(42% 38% at 72% 24%, oklch(76% 0.14 50 / 0.07), transparent 70%),
    radial-gradient(38% 34% at 20% 82%, oklch(66% 0.12 18 / 0.05), transparent 70%);
  animation: marquee-bloom var(--dur-pulse) var(--ease-in-out) infinite alternate;
}

/* page reveal */
@keyframes marquee-bloom {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

.terminal {
  position: relative;
  width: min(100%, 46rem);
}

.marquee {
  opacity: 0;
  animation: reveal var(--dur-long) var(--ease-out) 260ms forwards;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.line {
  display: block;
  white-space: pre-wrap;
}

/* interactive prompt */
.line.prompt {
  opacity: 0;
}
.line.prompt.show {
  opacity: 1;
}

/* caret */
.line-error-in {
  color: var(--color-error);
  opacity: 0;
  animation: error-in var(--dur-long) var(--ease-out) forwards;
}
@keyframes error-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* caret */
.caret {
  display: inline-block;
  width: 0.58em;
  height: 1.1em;
  margin-left: 0.15em;
  vertical-align: text-bottom;
  background: var(--color-accent);
  box-shadow: 0 0 12px 2px var(--color-glow);
  animation: blink 1.1s steps(1) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .caret {
    animation: none;
  }
}