:root {
  --bg: #060606;
  --fg: #c1121f;
  --fg-dim: rgba(193, 18, 31, 0.72);
  --fg-faint: rgba(193, 18, 31, 0.18);
  --glow: rgba(193, 18, 31, 0.35);
  --white-glow: rgba(255, 255, 255, 0.08);
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* Blink cursor */
@keyframes blink {

  0%,
  49.9% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* Vertical scanline sweep */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(140vh);
  }
}

/* Subtle flicker */
@keyframes flicker {
  0% {
    opacity: 0.98;
  }

  5% {
    opacity: 0.94;
  }

  10% {
    opacity: 0.99;
  }

  15% {
    opacity: 0.95;
  }

  30% {
    opacity: 1;
  }

  50% {
    opacity: 0.97;
  }

  75% {
    opacity: 0.99;
  }

  100% {
    opacity: 0.96;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at center, rgba(193, 18, 31, 0.06), transparent 55%),
    #060606;
  color: var(--fg);
  font-family: var(--font-mono);
  overflow: hidden;
}

body {
  position: relative;
  text-shadow:
    0 0 6px var(--glow),
    0 0 2px var(--white-glow);
  animation: flicker 0.18s infinite;
}

.terminal-shell {
  position: relative;
  z-index: 2;
  padding: 20px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.code {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.1;
  font-size: clamp(0.72rem, 1.1vw, 1rem);
  user-select: none;
  max-width: 100%;
}

.blink {
  animation: blink 1s steps(1, end) infinite;
}

.scanline {
  position: fixed;
  top: -20%;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.03) 45%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.03) 55%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 4;
  animation: scanline 7.5s linear infinite;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 0.7px, transparent 0.8px);
  background-size: 5px 5px;
  mix-blend-mode: screen;
}

.secret-link {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  cursor: default;
  animation: pulse-glow 15s ease infinite;
}

.secret-link:hover,
.secret-link:focus {
  color: var(--fg);
  text-shadow: 0 0 10px var(--glow);
  outline: none;
  cursor: pointer;
}

.dim {
  color: var(--fg-dim);
}

.faint {
  color: var(--fg-faint);
}

/* Pulse glow every 15 seconds */
@keyframes pulse-glow {

  0%,
  91%,
  100% {
    text-shadow: 0 0 6px var(--glow), 0 0 2px var(--white-glow);
  }

  94% {
    text-shadow: 0 0 20px var(--fg), 0 0 40px var(--glow), 0 0 8px rgba(255, 255, 255, 0.4);
  }

  97% {
    text-shadow: 0 0 6px var(--glow), 0 0 2px var(--white-glow);
  }
}

#terminal-input {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  font-size: 16px;
  opacity: 0;
  border: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 640px) {
  .terminal-shell {
    padding: 14px;
  }

  .code {
    line-height: 1.05;
    font-size: 0.7rem;
  }
}