/* ==========================================================================
   tui-pages website - animated ASCII mountain background (chafa-rendered)

   The mountain background is JS-driven: tools/mountain.py renders 60
   procedural 3D mountain-flyover PNG frames; chafa converts each to 80x24
   ASCII; tools/build_mountain_js.py bundles them into static/js/mountain.js.
   static/js/mountain-bg.js cycles the frames at 12 fps into the
   <pre id="tp-mountain-bg" class="tp-mountain-bg"> placeholder in index.html.

   This CSS file:
     - positions the frame as a full-screen top layer
     - tints the dense characters rust-orange with text-shadow + glow
     - adds a CRT scanline overlay
     - disables the animation under prefers-reduced-motion
     - swaps the tint for a soft sepia wash in light mode (paper & ink feel)
   ========================================================================== */

/* Full-screen ASCII mountain top layer ----------------------------------- */
.tp-mountain-bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* font-size: max(0.7vw, 1.39vh); */ /* 240p */
  font-size: max(0.463vw, 0.926vh); /* 360p */
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--tp-mountain-color, #f4a26b);
  text-shadow: 0 0 8px var(--tp-mountain-glow, rgba(183, 65, 14, 0.35));
  opacity: var(--tp-mountain-opacity, 0.45);
  white-space: pre;
  background: transparent;
  overflow: hidden;
  user-select: none;
  transition: color 250ms ease, opacity 250ms ease, text-shadow 250ms ease;
}

/* CRT scanlines overlay - a thin moving line every 2px. Faint so it doesn't
   fight the page content. */
.tp-mountain-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.20) 2px,
    rgba(0, 0, 0, 0.20) 3px
  );
  pointer-events: none;
  animation: tp-mtn-scanline 8s linear infinite;
  mix-blend-mode: multiply;
}

@keyframes tp-mtn-scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 6px; }
}

/* ---------- Light theme: faded ink wash on paper ------------------------
   In winter mode the ASCII becomes a soft sepia watermark — a hint of
   "topography" rather than a glowing graphic. The scanlines swap to
   light-on-dark so they still add texture without darkening the page. */
:root[data-theme="winter"] .tp-mountain-bg {
  opacity: 0.12;                /* much fainter than the dark mode rust */
  color: #6b5236;               /* warm sepia, harmonizes with cream bg */
  text-shadow: none;
  mix-blend-mode: multiply;
}

:root[data-theme="winter"] .tp-mountain-bg::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(28, 25, 23, 0.05) 2px,
    rgba(28, 25, 23, 0.05) 3px
  );
  mix-blend-mode: multiply;
}

/* Reduced motion: keep the first frame static, no scanline drift. */
@media (prefers-reduced-motion: reduce) {
  .tp-mountain-bg::after {
    animation: none !important;
  }
}