/* ─────────────────────────────────────────────────────────────────────
   glitch.css — frozen chromatic tear with broken letterforms
   Uses furnace orange + phosphor green ONLY. Never cyan/magenta.
   No animation. The letters themselves are torn apart.

   Usage:
     <h1 class="glitch-mark">antimeme.ai</h1>

   Requires the SVG filter block in the HTML (see glitch-filter.svg
   or paste the <svg> inline, hidden, at top of <body>).
   ───────────────────────────────────────────────────────────────────── */

.glitch-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: var(--weight-emphasis);
  color: var(--aluminum);
  letter-spacing: -0.02em;
  filter: url(#tear);
}

/* ── Small screens — less displacement ───────────────────────────── */
.glitch-mark--sm {
  filter: url(#tear-sm);
}

@media (max-width: 480px) {
  .glitch-mark {
    filter: url(#tear-sm);
  }
}

/* ── Scan lines overlay ──────────────────────────────────────────── */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}
