@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* ---------- THEME + VARS ---------- */
:root {
  --crt: rgb(0,255,0);
  --bg: #000;

  /* Terminal */
  --term-font-size: 20px;
  --term-gap: 8px;       /* spacing between rows */
  --hint-row-h: 1.2em;   /* fixed height row for hint */

  /* Avatar sprite sheet */
  --avatar-frames: 4;
  --avatar-src-w: 1536px;
  --avatar-src-h: 1024px;
  --avatar-frame-w: calc(var(--avatar-src-w) / var(--avatar-frames)); /* 384px */
  --avatar-frame-h: var(--avatar-src-h);                              /* 1024px */

  /* Scale so avatar fits stage */
  --avatar-scale: 0.22;
  --avatar-w: calc(var(--avatar-frame-w) * var(--avatar-scale));
  --avatar-h-full: calc(var(--avatar-frame-h) * var(--avatar-scale));

  /* Crop padding above/below character (source pixels) */
  --avatar-top-crop: 190px;
  --avatar-bottom-crop: 24px;

  /* Derived crop values */
  --avatar-cropY: calc(-1 * var(--avatar-top-crop) * var(--avatar-scale));
  --avatar-visible-h: calc(var(--avatar-frame-h) - var(--avatar-top-crop) - var(--avatar-bottom-crop));
  --avatar-h: calc(var(--avatar-visible-h) * var(--avatar-scale));

  /* Animation speeds */
  --avatar-step-speed: 0.5s;  /* slower leg switch so you can see steps */
  --walk-duration: 1.6s;      /* how long the glide takes */

  /* How far she walks from start (left:-120px). Tweak later if needed. */
  --walk-end: 450px;
}

/* ---------- GLOBAL RESET ---------- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--crt);
  font-family: 'DotGothic16', system-ui, monospace;
}

/* ---------- PAGE LAYOUT ---------- */
.wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.stage, .terminal { width: 100%; }

@media (min-width: 880px) {
  .wrap {
    grid-template-columns: 420px minmax(420px, 720px);
    gap: 40px;
    align-items: center;
  }
  .stage { justify-self: end; }
  .terminal { justify-self: start; }
}

/* ---------- STAGE (avatar area) ---------- */
.stage {
  position: relative;
  height: 280px;
  max-width: 420px;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- TERMINAL ---------- */
.terminal {
  padding: 24px;
  background: var(--bg);
  text-align: left !important;

  display: grid;
  grid-template-rows: auto auto var(--hint-row-h); /* system, prompt, hint */
  row-gap: var(--term-gap);
}

/* System line */
.line {
  font-family: 'DotGothic16', monospace;
  font-size: var(--term-font-size);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  align-self: start;
}

/* Prompt row */
.prompt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  visibility: hidden;   /* hidden until JS adds .show */
  pointer-events: none;
  gap: 0;               /* we add one space via .caret::after */
  margin: 0;
}
.prompt.show {
  visibility: visible;
  pointer-events: auto;
}

/* caret symbol (">") + one space after */
.caret {
  font-family: 'DotGothic16', monospace;
  font-size: var(--term-font-size);
}
.caret::after { content: "\00a0"; }

/* typed text */
.typed {
  font-family: 'DotGothic16', monospace;
  font-size: var(--term-font-size);
  letter-spacing: 0.08em;
  line-height: 1;
}

/* blinking block cursor */
.cursor-block {
  display: inline-block;
  width: 1.1ch;
  height: 1.3em;
  background: var(--crt);
  color: #000;
  vertical-align: -0.06em;
  opacity: 0; /* off until prompt shows */
  animation: cursorBlink 0.8s steps(1, end) infinite;
}
.prompt.show .cursor-block { opacity: 1; }

@keyframes cursorBlink {
  0%,45%   { background: var(--crt); color:#000; }
  50%,100% { background: transparent; color: transparent; }
}

/* Real input: hidden offscreen */
#cmd.cmd {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  pointer-events: none;
}

/* Hint row (always reserved) */
.hint {
  font-style: italic;
  opacity: 0.9;
  font-size: 16px;
  height: var(--hint-row-h);      /* fixed height */
  line-height: 1;
  margin: 0;
  display: block;
  margin-left: calc(1.3ch + 6px); /* indent under typed text */
}

/* ---------- AVATAR ---------- */
.figure {
  position: absolute;
  bottom: calc(40px + 2vh);   /* raise avatar a bit so she aligns with text */
  left: -120px;

  width: var(--avatar-w);
  height: var(--avatar-h);
  overflow: hidden;

  background-image: url('avatar/avatar_intro.png?v=7');
  background-repeat: no-repeat;
  background-position: 0 var(--avatar-cropY);

  background-size:
    calc(var(--avatar-src-w) * var(--avatar-scale))
    calc(var(--avatar-src-h) * var(--avatar-scale));

  image-rendering: pixelated;
  will-change: transform, background-position;
  transform-origin: bottom left;

  /* IMPORTANT: slide-in lives here so its final transform persists */
  animation: walk-in var(--walk-duration) linear forwards;
}

/* Legs step only while .walking is present */
.figure.walking {
  animation:
    walk-in var(--walk-duration) linear forwards,  /* keep this duplicated so fill still applies */
    avatar-walk var(--avatar-step-speed) steps(2) infinite;
}

/* After arrival, face forward (frame 3 = index 2) */
.figure.forward {
  background-position: calc(-2 * var(--avatar-w)) var(--avatar-cropY);
}

/* ---------- AVATAR KEYFRAMES ---------- */
@keyframes walk-in {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; } /* fade in quickly */
  100% { transform: translateX(var(--walk-end)); }  /* landing distance */
}
@keyframes avatar-walk {
  from { background-position: 0 var(--avatar-cropY); }
  to   { background-position: calc(-2 * var(--avatar-w)) var(--avatar-cropY); }
}

/* ---------- RESPONSIVE TWEAK ---------- */
@media (max-width: 879px){
  .stage{ margin-bottom:18px; }
}