/* heychewie.dev — v1 static core.
   system fonts only. no webfonts, no cdn, nothing to phone home. */

:root {
  /* amber crt phosphor — a machine left glowing overnight in a dark room. */
  --bg: #0c0a07;      /* warm near-black */
  --fg: #e6dccb;      /* warm bone/parchment */
  --dim: #9a8f76;     /* muted warm grey for secondary text (AA on --bg) */
  --accent: #ffb000;  /* classic amber-phosphor: caret + eth link */
  --prompt: #b07d1a;  /* dimmer amber for the ">" prompts */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
    "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  /* anchor the content low and to the left — a prompt sitting in a terminal,
     not a lonely card floating in the middle of a black void. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* weight the content toward the lower-left */
  padding: 6vh 6vw;
}

.box {
  width: 100%;
  max-width: 46rem;
  min-width: 0;   /* let long lines wrap instead of forcing the box wide */
}

/* terminal surface */
.terminal {
  border: 1px solid #2a2114;
  border-radius: 6px;
  background: #090705;
  padding: 1.2rem 1.4rem;
  margin-bottom: 2.6rem;
}

.lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.line {
  position: relative;
  margin: 0.15rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt {
  color: var(--prompt);
  margin-right: 0.5ch;
  user-select: none;
}

/* the resting prompt line + its persistent caret */
.caret-line {
  margin: 0.15rem 0;
  white-space: pre-wrap;
}

.caret {
  display: inline-block;
  width: 0.6ch;
  height: 1.15em;
  background: var(--accent);
  vertical-align: text-bottom;
}

.js-enabled .caret { animation: blink 1.06s step-end infinite; }

.terminal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#skip-typing {
  min-height: 24px;
  border: 0;
  border-bottom: 1px solid #5a4416;
  padding: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

#skip-typing:hover { color: var(--accent); }

/* the sliver of real */
.real h1 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--dim);
  margin: 0 0 0.6rem;
}

.real p {
  margin: 0 0 1rem;
  max-width: 40rem;
}

/* the quiet eth link */
.eth {
  margin-top: 2.4rem;
  border-top: 1px solid #221a10;
  padding-top: 1.2rem;
}

.eth p { margin: 0.2rem 0; }

.eth a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid #5a4416;
}

.eth a:hover,
.eth a:focus {
  border-bottom-color: var(--accent);
}

.eth a:focus-visible,
#skip-typing:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.quiet {
  color: var(--dim);
  font-size: 0.85rem;
}

/* the original text stays accessible and reserves its complete wrapped height.
   only the aria-hidden overlay changes while the intro types. */
.js-typing .line-content {
  opacity: 0;
}

.typed-line {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.line.is-typing .typed-line,
.line.is-done .typed-line {
  visibility: visible;
}

/* while the intro types itself out, hold the resting caret back so there's
   only one caret on screen; it returns for good once the lines finish. */
.js-typing .caret-line {
  visibility: hidden;
}

.line.is-typing .typed-line::after {
  content: "\2588";
  color: var(--accent);
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}

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

/* respect reduced motion: never hide, never animate a caret. the lines just
   sit there readable, and the resting caret is a steady (non-blinking) block. */
@media (prefers-reduced-motion: reduce) {
  .js-typing .line-content { opacity: 1; }
  .typed-line { display: none; }
  .js-typing .caret-line { visibility: visible; }
  .js-enabled .caret { animation: none; }
}

@media (max-width: 480px) {
  body { padding: 4vh 6vw; font-size: 15px; }
  .terminal { padding: 1rem 1rem; }
}