/* ---------- board 1: ARPANET Age — CRT terminal ---------- */

body.bbs {
  background: #000;
  color: #2fff6b;
  font-family: "Courier New", monospace;
  animation: crt-flicker 6s infinite;
}

body.bbs::before,
body.bbs::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

body.bbs::before {
  background-image: repeating-linear-gradient(
    0deg,
    rgb(0 0 0 / 35%) 0,
    rgb(0 0 0 / 35%) 1px,
    transparent 1px,
    transparent 3px
  );
}

body.bbs::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 70%) 100%);
}

@keyframes crt-flicker {
  0%,
  100% {
    opacity: 1;
  }

  8% {
    opacity: 0.93;
  }

  9% {
    opacity: 1;
  }

  51% {
    opacity: 0.97;
  }
}

.bbs-nav a {
  color: #2fff6b;
  border-color: #175a2c;
}

.board {
  background: #010401;
  border: 2px solid #1e7a3d;
  box-shadow: 0 0 18px rgb(47 255 107 / 15%);
}

.board-banner,
.board-banner .board-name,
.board h1,
.post-body h2,
.thread-meta,
.poster .handle,
.post-body p,
.signature {
  color: #2fff6b;
  text-shadow: 0 0 2px #2fff6b, 0 0 7px rgb(47 255 107 / 55%);
}

/* short single-line strings: literal type-in reveal via clip-path, since the
   element's own box never changes size (only what's visible does), so text
   of any length can be staggered without forcing an overflow-prone fixed
   width. */
.board-banner .board-name,
.board h1,
.thread-meta,
.signature {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: type-reveal 1.4s steps(24, end) forwards;
  position: relative;
}

.board-banner .board-name::after,
.board h1::after,
.thread-meta::after,
.signature::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.1em;
  background: #2fff6b;
  vertical-align: text-bottom;
  animation: blink 0.85s step-end infinite;
}

.board h1 {
  animation-delay: 0.1s;
}

.board-banner .board-name {
  animation-delay: 0s;
}

.thread-meta {
  animation-delay: 1.6s;
}

.post.op .signature {
  animation-delay: 0.2s;
}

.post:not(.op) .signature {
  animation-delay: 0.6s;
}

@keyframes type-reveal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* full paragraphs: staggered jerky fade instead of a literal per-character
   type, since fixed-width nowrap would overflow on the 390px viewport */
.post-body p {
  opacity: 0;
  animation: crt-appear 0.4s steps(3, end) forwards;
}

.post-body p:nth-of-type(1) {
  animation-delay: 0.3s;
}

.post-body p:nth-of-type(2) {
  animation-delay: 0.9s;
}

.post-body p:nth-of-type(3) {
  animation-delay: 1.5s;
}

@keyframes crt-appear {
  to {
    opacity: 1;
  }
}

.avatar {
  background: #000;
  border: 2px solid #2fff6b;
  border-radius: 2px;
  color: #2fff6b;
  box-shadow: none;
  font-family: "Courier New", monospace;
}

.rainbow-rule {
  background: none;
  border: none;
  border-top: 2px dashed #1e7a3d;
  height: 0;
}

.era-nav-link {
  color: #2fff6b;
  border-color: #1e7a3d;
}

@media (prefers-reduced-motion: reduce) {
  body.bbs,
  .board-banner .board-name,
  .board h1,
  .thread-meta,
  .signature,
  .post-body p {
    animation: none;
    opacity: 1;
    clip-path: none;
  }

  .board-banner .board-name::after,
  .board h1::after,
  .thread-meta::after,
  .signature::after {
    animation: none;
  }
}