/* CRT scanlines, layered relative to the text.
 * ---------------------------------------------------------------------------
 * The site used to paint one fixed scanline sheet at z-index 9999, on top of
 * everything. That reads as a filter over the page: every glyph you try to read
 * has a dark bar sliced through it. The Project Portal does it the other way
 * round - the texture is part of the *screen*, so it sits behind the readable
 * prose and the prose stays crisp - and this file brings that behaviour here.
 *
 * The chrome is the exception. The ASCII wordmark, the terminal title bar, the
 * interactive prompt line at the bottom and the footer are decoration you look
 * *at*, not text you read, so the texture runs over their glyphs - the same way
 * the wordmark logo carries it. Wes asked for the header, footer and the
 * terminal's own UI (the title bar and the bottom prompt line) to sit behind
 * the scanlines like the wordmark does.
 *
 * Layers, in paint order:
 *
 *   1. .crt-backdrop            fixed, z-index 0, behind everything. The
 *                              desk-level texture outside the terminal window.
 *   2. .terminal-window::before absolute inset:0 inside the window, above the
 *                              window's own background but below its children.
 *                              The phosphor panel the prose sits crisply on.
 *   3. chrome overlays          z-index 2, over their own glyphs:
 *        .ascii-art::after          the wordmark logo
 *        .terminal-header::after    the title bar
 *        .cli-prompt-line::after    the interactive prompt line at the bottom
 *        footer::after              the copyright line
 *
 * SAFARI. Every layer sets its texture with the `background-image` LONGHAND,
 * not the `background` shorthand. Safari (WebKit) drops a `background:
 * var(--x)` declaration when the custom property expands to a multi-layer
 * value - so the previous `background: var(--scanlines)` left every layer
 * blank in Safari while Chrome rendered it fine ("shows in Chrome, not
 * Safari - no scanlines at all"). The longhand takes a comma image list from a
 * var reliably in both engines. See css-tricks.com/managing-multiple-
 * backgrounds-with-custom-properties and WebKit's own shorthand-expansion note.
 */

:root {
  --scanlines:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  --scanlines-size: 100% 3px, 3px 100%;

  /* Inside the window the panel is already dark and translucent, so the full
     strength texture crushes it. Same pattern, lighter hand. */
  --scanlines-panel:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.16) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.045), rgba(0, 255, 0, 0.015), rgba(0, 0, 255, 0.045));
}

/* --- Layer 1: the page behind the window -------------------------------- */

.crt-backdrop {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--scanlines);
  background-size: var(--scanlines-size);
  z-index: 0;
  pointer-events: none;
}

/* Everything real is lifted one step above the backdrop. Without this the
   backdrop would paint over the page content instead of under it, because both
   would be in the same stacking context at the auto/0 level. */
body > .screen,
body > footer,
body > header {
  position: relative;
  z-index: 1;
}

/* --- Layer 2: the phosphor panel ---------------------------------------- */

.terminal-window { position: relative; }

.terminal-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--scanlines-panel);
  background-size: var(--scanlines-size);
  z-index: 0;
  pointer-events: none;
}

/* The window's own children sit above the panel texture. They are otherwise
   auto-z-index siblings of ::before and would lose the tie-break to it. */
.terminal-window > * {
  position: relative;
  z-index: 1;
}

/* --- Layer 3: chrome, which keeps the texture on top --------------------- */

/* The wordmark logo, the title bar, the bottom prompt line and the footer are
   decoration, not reading text, so the scanlines run over their glyphs. Each
   carries its own ::after sheet at z-index 2 - above the panel texture and
   above the chrome's own content. */
.ascii-art,
.terminal-header,
.cli-prompt-line,
footer {
  position: relative;
}

.ascii-art::after,
.terminal-header::after,
.cli-prompt-line::after,
footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--scanlines);
  background-size: var(--scanlines-size);
  z-index: 2;
  pointer-events: none;
}

/* Anyone who has asked the OS to stop moving things gets a still screen: the
   flicker animation is the only motion here, and the texture itself is static
   either way. */
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}