/* ─────────────────────────────────────────────────────────────────────────
   Glass letters — display glyphs are WINDOWS, and they keep their colors.
   The glyph fill = a solid base color that FOLLOWS the letter's live color
   (the zero-g palette cycle flows straight through — /mv/glass.js copies
   the parent's computed color into background-color every frame) with a
   viewport-pinned DOT grid punched into it: drag a letter and the dots
   stay put while the letter slides over them.

   Mechanics: background-clip:text clips both the color and the dot layer;
   glass.js counter-offsets background-position per frame (background-
   attachment:fixed is dead inside transformed elements and on iOS). The
   transparent color only applies inside @supports, so unsupporting
   browsers keep plain ink and the palette still works there.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --tex-dot: rgba(250, 250, 247, 0.30); /* paper through the fill */
}
html[data-theme="dark"] {
  --tex-dot: rgba(16, 16, 16, 0.32);
}
html[data-theme="red"] {
  --tex-dot: rgba(224, 48, 31, 0.34);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .glass {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-color: var(--ink); /* pre-JS paint; glass.js takes over */
    background-image: radial-gradient(var(--tex-dot) 1.3px, transparent 1.4px);
    background-size: 9px 9px;
    background-repeat: repeat;
  }
  .glass::selection { color: var(--paper); }
}