/* ==========================================================================
   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
   ========================================================================== */

/* 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(2.1vw, 4.17vh);
  font-size: max(2.1vw, 4.17svh);
  line-height: 1.0;
  letter-spacing: 0;
  color: #f4a26b;
  text-shadow: 0 0 8px rgba(183, 65, 14, 0.35);
  opacity: 0.45;
  white-space: pre;
  background: transparent;
  overflow: hidden;
  user-select: none;
}

/* 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: dim the background, drop the glow, switch to dark text. */
:root[data-theme="winter"] .tp-mountain-bg {
  opacity: 0.20;
  color: #2a1810;
  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(255, 255, 255, 0.12) 2px,
    rgba(255, 255, 255, 0.12) 3px
  );
  mix-blend-mode: screen;
}

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