/* ==========================================================================
   REMNANT — terminal shell + boot sequence styling
   Restrained monochrome CRT presentation. No neon, no "hacker" glow,
   no gamer chrome, no transitions beyond a hard cut between states.
   ========================================================================== */

:root {
  --bg-solid:  #060503;
  --fg:        #e8a33d;   /* amber phosphor */
  --fg-dim:    #8a6320;
  --glow:      rgba(232, 163, 61, 0.45);
  --glow-soft: rgba(232, 163, 61, 0.20);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-solid);
  overflow: hidden;
  /* No mouse pointer anywhere on the page — this machine doesn't
     acknowledge one. Purely cosmetic: clicking, focusing the hidden
     input, and dismissing the boot gate all still work exactly as
     before. The moment the cursor leaves the page into the browser's
     own chrome (tabs, address bar), the system pointer reappears
     there as normal, so nothing is actually taken away. */
  cursor: none;
}

body {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 16px;
}

/* --------------------------------------------------------------------
   CRT frame
   -------------------------------------------------------------------- */

#crt {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--bg-solid);
  overflow: hidden;
  animation: power-on 900ms ease-out both;
}

/* --------------------------------------------------------------------
   Boot layers — one visible at a time, hard cut, no fades.
   -------------------------------------------------------------------- */

.boot-layer {
  display: none;
  position: absolute;
  inset: 0;
}

.boot-layer.visible {
  display: block;
}

/* ---- Stage 0: the power-on gate ---- */

#boot-gate.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

#boot-gate-prompt {
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--fg-dim);
  text-shadow: 0 0 2px var(--glow-soft);
  animation: gate-blink 1.8s ease-in-out infinite;
}

/* ---- Stage 1: hardware / system diagnostics ---- */

#boot-diagnostics {
  padding: 8% 6% 0 0;
}

#boot-diagnostics.visible {
  display: flex;
  justify-content: flex-end;
}

#diagnostics-text {
  margin: 0;
  white-space: pre;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
  text-shadow: 0 0 2px var(--glow-soft);
}

/* ---- Stage 3: the REMNANT identity reveal ---- */

#boot-identity.visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#identity-wordmark {
  margin: 0;
  white-space: pre;
  font-size: clamp(8px, 1.55vw, 32px);
  line-height: 1.05;
  color: var(--fg);
  text-shadow: 0 0 3px var(--glow), 0 0 10px var(--glow-soft);
}

/* Quick CRT "kick on" for the wordmark — fast and physical, not a
   slow decorative fade. Plays automatically the moment #boot-identity
   goes from display:none to visible. */
#boot-identity.visible #identity-wordmark {
  animation: wordmark-boot-in 260ms ease-out both;
}

#identity-subtitle {
  margin: 1.6em 0 0;
  white-space: pre;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 1px;
  color: var(--fg-dim);
  text-shadow: 0 0 2px var(--glow-soft);
}

/* Subtitle lines are laid out in full up front (see js/boot.js) and
   revealed by toggling this class one at a time — the block already
   occupies its final height, so revealing lines never moves the
   wordmark above it. */
.reveal-line {
  opacity: 0;
  transition: opacity 130ms ease-out;
}

.reveal-line.visible {
  opacity: 1;
}

/* ---- Stage 5/6: system initialization + live terminal ---- */

#screen.visible {
  display: block;
}

#screen {
  padding: 36px 44px;
  overflow-y: auto;
  color: var(--fg);
  text-shadow: 0 0 3px var(--glow), 0 0 10px var(--glow-soft);
  line-height: 1.45;
  letter-spacing: 0.3px;
}

#screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#terminal-output {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------
   Input line
   -------------------------------------------------------------------- */

#input-line {
  display: flex;
  align-items: center;
  margin-top: 2px;
  min-height: 1.45em;
}

/* Stays hidden until Terminal.enableInput() reveals it — the live
   prompt must not appear while stage 5/6 text is still auto-printing. */
#input-line.hidden {
  display: none;
}

#prompt-glyph {
  margin-right: 0.6em;
  color: var(--fg);
}

#input-text {
  white-space: pre;
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 1px;
  background: var(--fg);
  box-shadow: 0 0 6px var(--glow);
  animation: blink 1.1s steps(1) infinite;
  vertical-align: -0.15em;
}

/* Real input field. Functionally active, visually removed — the
   #input-text span is what the player actually sees. */
#terminal-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------
   Terminal asset tag — persistent, unobtrusive, bottom-right. Shown
   once the live terminal is (js/boot.js toggles .visible at the same
   moment #screen appears) and just stays there.
   -------------------------------------------------------------------- */

#terminal-id {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--fg-dim);
  text-shadow: 0 0 2px var(--glow-soft);
  pointer-events: none;
}

#terminal-id.visible {
  display: block;
}

/* --------------------------------------------------------------------
   CRT artifacts — subtle, physical, not decorative "retro" texture
   -------------------------------------------------------------------- */

#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.28) 2px,
    rgba(0, 0, 0, 0.28) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.4;
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* --------------------------------------------------------------------
   Motion — kept to an absolute minimum on purpose. The only animated
   things are the cursor blink and a single power-on flicker when the
   page first loads. Stage-to-stage transitions are hard cuts (see
   .boot-layer above), not fades or slides.
   -------------------------------------------------------------------- */

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

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

@keyframes power-on {
  0%   { opacity: 0; filter: brightness(2.2); }
  40%  { opacity: 1; filter: brightness(1.6); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes wordmark-boot-in {
  0%   { opacity: 0; filter: brightness(2.4); }
  55%  { opacity: 1; filter: brightness(1.9); }
  100% { opacity: 1; filter: brightness(1); }
}

/* Rare, brief physical imperfection — scheduled at random, irregular
   intervals by js/crt-imperfection.js. Small enough to read as "old
   hardware," not an effect. */
@keyframes crt-flicker {
  0%   { filter: brightness(1); transform: translateY(0); }
  30%  { filter: brightness(0.85); transform: translateY(1px); }
  55%  { filter: brightness(1.04); transform: translateY(0); }
  75%  { filter: brightness(0.93); transform: translateY(-1px); }
  100% { filter: brightness(1); transform: translateY(0); }
}

#crt.flicker {
  animation: crt-flicker 240ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  #crt {
    animation: none;
  }
  .cursor {
    animation: none;
  }
  #boot-identity.visible #identity-wordmark {
    animation: none;
  }
  .reveal-line {
    transition: none;
  }
  #crt.flicker {
    animation: none;
  }
  #boot-gate-prompt {
    animation: none;
  }
}