/* ---------------------------------------------------------
   Retro terminal sequence
   The look is intentionally configurable through CSS variables.
---------------------------------------------------------- */
:root {
  --bg: #000;
  --green: #6dff73;
  --green-dim: rgba(109, 255, 115, 0.68);
  --green-faint: rgba(109, 255, 115, 0.18);
  --glow-1: rgba(83, 255, 98, 0.42);
  --glow-2: rgba(83, 255, 98, 0.18);

  --font-size: clamp(15px, 2.15vw, 34px);
  --line-height: 1.35;
  --letter-spacing: 0.075em;

  --screen-radius: 0px;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: "Courier New", Courier, monospace;
}

.stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: stretch;
  background: #000;
}

.terminal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: var(--green);
  background: #000;
  border-radius: var(--screen-radius);
}

/* Main text layer */
.terminal-content {
  position: absolute;
  inset: 8.7% 7.2%;
  z-index: 4;
  white-space: pre-wrap;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  text-shadow:
    0 0 1px var(--green),
    0 0 6px var(--glow-1),
    0 0 18px var(--glow-2);
  opacity: 0;
}

/* The cursor is absolutely positioned from JS so it follows typed text */
.cursor {
  position: absolute;
  z-index: 5;
  width: 0.66em;
  height: 1.03em;
  background: var(--green);
  box-shadow:
    0 0 4px var(--green),
    0 0 14px var(--glow-1);
  opacity: 0;
  transform: translateY(0.11em);
}

.cursor.is-visible { opacity: 1; }

.cursor.is-blinking {
  animation: blink 680ms steps(1, end) infinite;
}

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

/* CRT scan lines */
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.045) 0px,
      rgba(255,255,255,0.045) 1px,
      rgba(0,0,0,0.18) 2px,
      rgba(0,0,0,0.18) 4px
    );
}

/* Soft CRT falloff */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(0,0,0,0.08) 68%,
      rgba(0,0,0,0.38) 100%
    );
}

/* Full-screen phosphor flash */
.terminal.is-flashing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--green);
  opacity: 0;
  animation: phosphor-flash var(--flash-duration, 110ms) ease-out forwards;
}

@keyframes phosphor-flash {
  0%   { opacity: 0.92; }
  22%  { opacity: 0.68; }
  100% { opacity: 0; }
}

@media (max-width: 600px) {
  .terminal-content {
    inset: 8% 6%;
  }
}