/* ---------- board 5: The Social Web Awakens — Frutiger Aero ---------- */

body.bbs {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-image: radial-gradient(38rem 22rem at 15% 5%, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 0%) 60%),
    linear-gradient(200deg, #eaf9ff 0%, #b7e9fb 25%, #6fc6ec 55%, #2f9fd6 80%, #146fa8 100%);
  color: #0a5c82;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

/* soft blurred cloud shapes */
body.bbs::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(6rem 2.4rem at 15% 12%, rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 0%) 75%),
    radial-gradient(4rem 1.8rem at 22% 15%, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 0%) 75%),
    radial-gradient(7rem 2.8rem at 78% 22%, rgb(255 255 255 / 85%) 0%, rgb(255 255 255 / 0%) 75%),
    radial-gradient(5rem 2rem at 88% 8%, rgb(255 255 255 / 85%) 0%, rgb(255 255 255 / 0%) 75%);
  filter: blur(2px);
  animation: cloud-drift 22s ease-in-out infinite alternate;
}

/* bubbles + water drops */
body.bbs::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4rem 1.4rem at 10% 70%, rgb(255 255 255 / 85%) 0%, rgb(255 255 255 / 10%) 60%, rgb(255 255 255 / 0%) 75%),
    radial-gradient(0.8rem 0.8rem at 88% 62%, rgb(255 255 255 / 85%) 0%, rgb(255 255 255 / 0%) 75%),
    radial-gradient(0.6rem 0.9rem at 6% 40%, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 0%) 80%),
    radial-gradient(0.5rem 0.75rem at 94% 88%, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 0%) 80%);
  animation: bubble-drift-5 12s ease-in-out infinite alternate;
}

@keyframes cloud-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(1.5rem);
  }
}

@keyframes bubble-drift-5 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-1.2rem);
  }
}

.bbs-nav,
.board,
.aero-fish {
  position: relative;
  z-index: 1;
}

.bbs-nav a {
  color: #0a5c82;
  border-color: #7fcdec;
}

.board {
  background: linear-gradient(160deg, rgb(255 255 255 / 75%), rgb(200 240 250 / 55%));
  border: 1px solid #bfe9f9;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 8px 22px rgb(10 90 130 / 20%);
  backdrop-filter: blur(4px);
}

.board-banner .board-name {
  color: #0b5a80;
}

.board h1 {
  background: linear-gradient(180deg, #1ba0e8 0%, #0f7fb8 55%, #063f5c 100%);
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgb(255 255 255 / 70%);
}

.thread-meta {
  color: #12546f;
}

.post-body h2 {
  color: #0b6f8f;
}

.aero-fish {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin: 1rem 0;
}

.fish {
  animation: fish-swim 6s ease-in-out infinite alternate;
}

.fish-2 {
  animation-duration: 8s;
  animation-delay: 0.5s;
}

.fish-3 {
  animation-duration: 7s;
  animation-delay: 1s;
}

@keyframes fish-swim {
  from {
    transform: translateX(0) translateY(0);
  }

  to {
    transform: translateX(1rem) translateY(-0.4rem);
  }
}

.post {
  background: linear-gradient(160deg, rgb(255 255 255 / 80%), rgb(210 245 250 / 50%));
  border: 1px solid #bfe9f9;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 4px 12px rgb(10 90 130 / 15%);
}

.avatar {
  background: linear-gradient(180deg, #fff, #8fd8f2);
  border: 1px solid #7fcdec;
  color: #0b5a80;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
}

.poster .handle {
  color: #0b5a80;
}

.signature {
  color: #12546f;
}

.rainbow-rule {
  height: 3px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #cdf3ff, #6fc6ec, #2f9fd6);
}

.era-nav-link {
  color: #0b5a80;
  border-color: #7fcdec;
  background: linear-gradient(180deg, #fff, #d5f1fc);
}

@media (prefers-reduced-motion: reduce) {
  body.bbs::before,
  body.bbs::after,
  .fish {
    animation: none;
  }
}